原生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((' '+obj[i].className+' ').indexOf(' '+className+' ')>-1){
return true;
}
}
return false;
}
// ----------------
// ----------------
// ----------------
// 实现方法1:传入单个对象
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) {
obj.className += " " + cls;
}
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}
function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj, cls);
} else {
addClass(obj, cls);
}
}
原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass的更多相关文章
- 原生 JavaScript 代替 jQuery【转】
目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...
- 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- 表单美化-原生javascript和jQuery单选按钮(兼容IE6)
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- 原生javascript与jquery 的比较
JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽 轻量级的脚本语言,比较容易学习 运行在用户机器上,运行结果和处理相对比较快. ...
- 常见的dom操作----原生JavaScript与jQuery
1.创建元素 文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document. ...
- 原生javascript和jquery实现简单的ajax例子
后台C#代码 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/p ...
- 原生JavaScript和jQuery的较量
JavaScript和jQuery有很多相似知促,那么二者又是如何进行较量,我们先了解一下什么是JavaScript和jQuery,知其源头,才能知其所以然. 简介: [JavaScript] 一种直 ...
- 表单美化-原生javascript和jQuery多选按钮(兼容IE6)
前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...
随机推荐
- android stadio svn 使用技巧
有时候有这样的需求: 就是我一次要改很多的需求,然后代码要分开提交,那么怎么办? 提交的时候一个一个的点开看? 比如:这次改的还没有提上去,又来了一个需求,怎么区分呢 新建一个active的变化列表 ...
- 缓存(CDN缓存,浏览器(客户端)缓存)
1.什么是缓存? 缓存是一种数据结构,用于快速查找以及执行的操作结果.因此,如果一个操作执行起来很慢,对于常用的输入数据就可以将操作的结果缓存,并在下次调用该操作时使用缓存的数据. 缓存是一个到处都存 ...
- URL地址传参中特殊符号的转码和解码
背景: URL传参在web开发中很常见,一般来说这种方式并不推荐,原因就是浏览器多种多样,各家浏览器对URL地址的解析的表现很不一样,特别是当参数有非ASCII字符.英文字母.阿拉伯数字时. 在CRM ...
- Redmine部署到Windows Azure
有幸,今天可以尝试将Redmine部署到Windows Azure中,记下点滴,方便大家查阅 步骤一:Windows Azure中安装Ubuntu VM 遇到的问题,创建VM时会提示云服务.云存储订阅 ...
- DOS程序员手册(二)
2.6存储设备 随着DOS的升级,磁盘存储容量也有了很大扩充.表2.4介绍了软盘容量的增加以 及所支持驱动器型号的数量. ...
- lnmp一键安装环境中nginx开启pathinfo
问题及原理可参考:http://www.laruence.com/2009/11/13/1138.html 如果是用lnmp脚本一键安装的开发环境,可以通过如下方式开户pathinfo: 1.注释ng ...
- 17、bootStrap组件
1.bootStrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 2.字体图标 ①不要和其他图标混合使用 ②只能对内容为空的元素起作用 3.下拉菜单 <di ...
- postman导出excel出现response
https://jingyan.baidu.com/article/915fc414559b4351394b2084.html
- [译]11-spring bean定义的继承
spring中bean的定义包含很多信息,如,构造器参数.property指定的依赖项.初始化方法.工厂类和工厂方法等. 如果spring容器的中每个bean都重复声明这些属性,是非常烦人也是十分低效 ...
- Python全栈工程师(Linux基本操作)
ParisGabriel Python 入门基础 Linux :Ubuntu操作系统 首先我们说的是Linux操作系统常用的快捷键以及终端命令 一. VMware ...