介绍:

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的更多相关文章

  1. 原生 JavaScript 代替 jQuery【转】

    目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...

  2. 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  3. 表单美化-原生javascript和jQuery单选按钮(兼容IE6)

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  4. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  5. 原生javascript与jquery 的比较

    JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽 轻量级的脚本语言,比较容易学习 运行在用户机器上,运行结果和处理相对比较快. ...

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

    1.创建元素 文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document. ...

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

    后台C#代码 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/p ...

  8. 原生JavaScript和jQuery的较量

    JavaScript和jQuery有很多相似知促,那么二者又是如何进行较量,我们先了解一下什么是JavaScript和jQuery,知其源头,才能知其所以然. 简介: [JavaScript] 一种直 ...

  9. 表单美化-原生javascript和jQuery多选按钮(兼容IE6)

    前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...

随机推荐

  1. 2139: road

    把a[i], b[i]分开来排序 对应位置上的点连边 感性理解这是最小的 会连出若干个环 要使得若干个环连成大环 令a[i]向b[i - 1] 连边 易证一定能使图联通 感性理解这也是最小的 #inc ...

  2. str_replace字符串替换

    字符串替换, src 源字符串, buf_size 缓冲大小, search搜索的字符串大小, repstr 需要替换成的字符串 int str_replace(char *src, unsigned ...

  3. javascript类式继承模式#2——借用构造函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 【APUE】Chapter8 Process Control

    这章的内容比较多.按照小节序号来组织笔记的结构:再结合函数的示例带代码标注出来需要注意的地方. 下面的内容只是个人看书时思考内容的总结,并不能代替看书(毕竟APUE是一本大多数人公认的UNIX圣经). ...

  5. SecureCRT自动登录跳板机/堡垒机并连接目标机器

    公司登录目标服务器,需要先登录跳板机(堡垒机),然后再登录目标机器,一共需要4.5步. MAC或LINUX机器可以写.SH脚本,那WINDOWS有没有一键登陆的方法呢? 常用的SecureCRT工具就 ...

  6. 剑指offer-从尾到头打印链表03

    class Solution: # 返回从尾部到头部的列表值序列,例如[1,2,3] def printListFromTailToHead(self, listNode): # write code ...

  7. [CF1045C]Hyperspace Highways

    题目大意:给一张$n$个点$m$条边的图,保证若有一个环,一定是完全子图,多次询问两个点之间的最短路径长度 题解:把完全子图缩成一个点,圆方树,方点权值设成$1$,圆点设成$0$即可. 卡点:数组开小 ...

  8. POJ 1149 PIGS | 最大流问题

    参考了这个PDF 第一道网络流啊!感动 #include<cstdio> #include<algorithm> #include<cstring> #includ ...

  9. POJ 3090 Visible Lattice Points | 其实是欧拉函数

    题目: 给一个n,n的网格,点可以遮挡视线,问从0,0看能看到多少点 题解: 根据对称性,我们可以把网格按y=x为对称轴划分成两半,求一半的就可以了,可以想到的是应该每种斜率只能看到一个点 因为斜率表 ...

  10. BZOJ3597 [Scoi2014]方伯伯运椰子 【二分 + 判负环】

    题目链接 BZOJ3597 题解 orz一眼过去一点思路都没有 既然是流量网络,就要借鉴网络流的思想了 我们先处理一下那个比值,显然是一个分数规划,我们二分一个\(\lambda = \frac{X ...