原生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)
前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...
随机推荐
- Mplab X IDE 安装DMCI
DMCI在Mplab 8中是默认安装的,在 Mplab X IDE中是作为插件,默认不安装. 找到 勾选前面的复选框,点击安装
- 自定义注解不能拦截controller层
1,首先在springMVC的配置文件中,webapp/WEB-INF/servlet.xml,加上AOP的相关内容: <beans xmlns="http://www.springf ...
- Android开发——弹性滑动的两种实现方式
0. 前言 欢迎转载,转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52538723 我们在Android开发--View滑动的三 ...
- CSS计数器(自定义列表)
概念 CSS3计数器(CSS Counters)可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能(自定义有序列表) 与有序列表相比,它的突出特性在于可以对任意元素计数,同时实 ...
- Java与Scala的两种简易版连接池
Java版简易版连接池: import java.sql.Connection; import java.sql.DriverManager; import java.util.LinkedList; ...
- unbantu安装wmvare
最新评论 wsmyyjie:写的太好了!!! zhangmin92:回复 wopapa523: 这个是你用另一.. wopapa523:请问i11是在哪里输入的? myh65013:挺深入的 andk ...
- virtualenv简介以及一个比较折腾的scrapy安装方法
本文来自网易云社区 作者:沈高峰 virtualenv + pip 安装python软件包是一种非常好的选择,在大部分情况下安装python软件包是不需要求助于sa的. 使用自己的一个工作副本也是写p ...
- 为什么要搞vim
一. 先得想清楚折腾vim受的这顿折磨值不值.值.零碎记录几点. 迫使我使用vim的原因如下: (1)之前实习的公司的开发机上只有vim,以后工作的公司也只有vim,同部门的同事大都用vim:如果不用 ...
- REMIX与LOCALHOST相连
REMIX与LOCALHOST相连 让Remix与本地文件系统进行交互,点击connect同时找到localhost下的Remix文件管理器的共享目录.在开始之前,参考网址: https://remi ...
- 网络--OSI七层模型详解
OSI 七层模型通过七个层次化的结构模型使不同的系统不同的网络之间实现可靠的通讯,因此其最主要的功能就是帮助不同类型的主机实现数据传输 . 完成中继功能的节点通常称为中继系统.在OSI七层模型中,处于 ...