原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass

【原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass】的更多相关文章

原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass

介绍: 1.hasClass:判断DOM元素是否存在类. 2.addClass:为的DOM元素添加类. 3.removeClass:删除DOM元素的类. 4.toggleClass:如果DOM元素存在(不存在)类,就删除(添加)类. 原生 JavaScript 实现的代码: // 实现方法2:传入一个数组 function hasClass(obj, className) { // obj是数组或伪数组 for(var i = 0,len = obj.length;i<len;i++){ if(…

原生 JavaScript 代替 jQuery【转】

目录用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promises Animation Alternatives Browser Support License 用原生JavaScript代替jQuery 前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Ang…

四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现

原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们的需求,下面我简单介绍一些常见的四种提示弹出框(success,loading,error,warning),我分别用原生JavaScript和jQuery来介绍分享给各位博友! 一.首先介绍原生JavaScript来实现四种提示弹出框: 第一步:先看看html的建立 <!DOCTYPE html…

表单美化-原生javascript和jQuery单选按钮（兼容IE6）

最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一效果,一种是用原生的javascript 和一种是现在特别流行的javascript框架jQuery来实现这一效果. 首先我们先来用javascript的方式,不了解原生javascript的童鞋可以跳过这个直接进去jQuery的部分.javascript是前端的基础建议大家还是要学习下原生java…

jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

▓▓▓▓▓▓ 大致介绍学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写的也要是面向对象的,看看基本的结构 // 定义lQuery对象 function lQuery(lArg){ } function lQ(lArg){ return new lQuery(lArg); } // css()方法 lQuery.prototype.css = function(){};…

原生javascript与jquery 的比较

JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽轻量级的脚本语言,比较容易学习运行在用户机器上,运行结果和处理相对比较快. 可以使用第三方附加组件来检查代码片段. 缺点: 安全问题:由于JavaScript在客户端运行,可能被用于黑客目的. 渲染问题:在不同浏览器中的处理结果可能不同. jQuery的优点和缺点: 使用jQuery最大的好处是少量的代码做更多的事情.看个简单例子,获取元素的值,使用JavaScript:…

常见的dom操作----原生JavaScript与jQuery

1.创建元素文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document.createElement("div");if(document.body){ document.body.appendChild(newDiv);}else{ document.documentElement.appendChild(newDiv);} document.createTe…

原生javascript和jquery实现简单的ajax例子

后台C#代码 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string name = context.Request["Name"]; var data = new T_UsersTableAdapter().GetDataByName(name); JavaScriptSerializer jss = new JavaS…

原生JavaScript和jQuery的较量

JavaScript和jQuery有很多相似知促,那么二者又是如何进行较量,我们先了解一下什么是JavaScript和jQuery,知其源头,才能知其所以然. 简介: [JavaScript] 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.JavaScript被广泛应用于Web开发中,随着HTML5的发展,JavaScript在将来会有更大的发展和应用的控件. [jQuery] 是一个兼容多浏览器的JavaScript库,其设计理念是write less,do mor…

表单美化-原生javascript和jQuery多选按钮（兼容IE6）

前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图片效果代码我就不具体一步一步做了有兴趣的童鞋可以参见下我第一篇美化表单的文章http://blog.csdn.net/qianqianyixiao1/article/details/40422769 首先我们用原生的javascript来做这个效果需要注意的是IE8以下是不支持getEleme…

mui项目中如何使用原生JavaScript代替jquery来操作dom 转自【B5教程网】:http://www.bcty365.com/content-146-3661-1.html

最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom.选择元素//jq$('.el');//js document.querySelector("di…

mui项目中如何使用原生JavaScript代替jquery来操作dom

最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom.选择元素//jq$('.el');//js document.querySelector("di…

常见浏览器的宽高代码写法！有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站

我的个人网站点击链接!欢迎大家访问下面是网页一些常见的宽高的获取.........这是原生的写法(JavaScript) 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scro…

hasClass() removeClass() addClass()

//检查第元素是否包含 "intro" 类 $("button").click(function(){ alert($("p:first").hasClass("intro")); }); 向第一个 p 元素添加一个类: $("button").click(function(){ $("p:first").addClass("intro"); }); 移除所有 <…

使用原生javascript实现jquery的$(function(){ })

在使用jquery的时候,经常用到$(function(){})方法或者是$(document).read(function(){})来作为页面dom节点加载完成之后javascript的执行入口,现在可以使用原生的javascipt模拟jquery中 $(function(){});方法 function $(fun){ if(typeof fun !="function"){ throw new typeError('传入的参数不是一个函数'); }else{ …

使用原生javascript和jQuery解析json数据

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式. JSONM文件中包含了关于“名称”和“值”的信息. 有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现. jQuery ajax - getJSON() 方法语法: jQuery.getJSON(url,data,success(data,status,xhr)) 等价于: $.ajax({ url: url, data: data, suc…

表单美化-原生javascript和jQuery下拉列表（兼容IE6）

效果: 思想:用其他标签配合脚本和隐藏的input并通过传值模拟表单元素中的select <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0} .selectL…

JavaScript常用，继承，原生JavaScript实现classList

原文链接:http://caibaojian.com/8-javascript-attention.html 基于 Class 的组件最佳实践(Class Based Components) 基于 Class 的组件是状态化的,包含有自身方法.生命周期函数.组件内状态等.最佳实践包括但不限于以下一些内容: 1)引入 CSS 依赖 (Importing CSS) 我很喜欢 CSS in JavaScript 这一理念.在 React 中,我们可以为每一个 React 组件引入相应的 CSS 文件,…

JavaScript和JQuery之战再续

之前写过关于JavaScript和Jquery的之间的比较,现在再看比较偏向于理论知识,还不是很理解.经过这一段时间的项目的锻炼,对JQuery有了新的认识. 原生JavaScript和jQuery的较量 JavaScript和Jquery的比较,这让我想起我们一开始学习VB就接触到的函数,函数的功能就是能够完成某项功能,我们现在所用的JavaScript和Jquery也是实现某种功能,让某元素有一个行为,下面这个图就能看出这三者之间的关系,只是在越来越精细化. 接下来就以JavaScript中…

原生js addclass,hasClass,removeClass,toggleClass的兼容

(function (window) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg(className) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management //…

你可能不需要 jQuery！使用原生 JavaScript 进行开发

很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用. 然而,另一方面,作为前端开发的基础框架,jQuery 包含大量的兼容性代码和扩展功能,其中有很多在你的整个项目中可能都不会用到.其实如果你只是针对现代浏览器,很多功能使用原生的 JavaScript 就可以实现,即使是拖后腿的低版本 IE 浏览器,兼容性也是很容易处理的. 您可能感兴趣的…

[转]抛弃jQuery，使用原生JavaScript

原文链接 Document Ready 事件在jQuery中,document.ready可以让代码在整个文档加载完毕之后执行: $(document).ready(function() { // Code }); JavaScript同样拥有一个DOM内容加载事件的侦听器: document.addEventListener("DOMContentLoaded", function() { // Code }, false); 选择器API jQuery中的选择器语法丰富灵活: v…

原生 JavaScript 代码和Jquery实现对比

下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http://www.cnblogs.com/lhb25/p/you-might-not-need-jquery.html 类似的还有很多很多,可以参考这里:http://youmightnotneedjquery.com/.…

抛弃jQuery，拥抱原生JavaScript

前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少.因此我们项目组在双十一后抽了一周时间,把所有代码中的 jQuery 移除.下面总结一下: Why not jQuery 1. 模式变革 jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表…

jQuery的addClass,removeClass和toggleClass方法

jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法removeClass,移除一个class. 第三个方法toggleClass是互斥class. <input id="Text1" type="text" /> 创建样式,当文本框focus时,文本框边框高亮和变宽,当blur时,恢复原来样式. .text…

JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)

1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一致的 Name = "root" Age = function Foo(name,age){ this.Name = name; this.Age = age; this.Func = function(){ console.log(this.Name,this.Age); #this是当…

jQuery操纵cookie(原生javascript处理cookie)

jQuery也是可以操作cookie的 1.首先下载jQuery.js 以及 jquery.cookie.js 这两个文件 2.安装(其实就是引用) <html> <head>  <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <!--引入jquery-…

原生javascript实现类似jquery on方法的行为监听

原生javascript有addEventListener和attachEvent方法来注册事件,但有时候我们需要判断某一行为甚至某一函数是否被执行了,并且能够获取前一行为的参数,这个时候就需要其他方法来实现了. 项目中的原始场景是有若干个tab切换,tab组件当然是已经写好的,现在需要每次点击后保存localstorage等其他操作,需要监听tab是否被点击.下面是简单的实现事件监听方法: <!DOCTYPE html> <html lang="en"> &l…

原生js和jquery实现图片轮播特效

本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换式1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方(也就是一个banner吧)3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部6.然后是一个图片描述info…

原生js和jquery实现图片轮播特效(转)

本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换式1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方(也就是一个banner吧)3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部6.然后是一个图片描述info…