原生js模拟jquery中的addClass和removeClass方法
js代码:
//添加类
function addClass(obj,className) {
if(obj.className == '') {
//如果没有class
obj.className = className;
}else {
var strClass = obj.className;
var arrClass = strClass.split(' ');
var arr = [];
var index = arrIndex(arrClass,className);
if(index == -1) {
//如果不存在class
arr.push(className);
obj.className += ' ' + arr.join(' ');
}
}
}
//移除类
function removeClass(obj,className) {
if(obj.className == '') {
alert('该对象没有class');
}else {
var arrClass = obj.className.split(' ');
console.log(arrClass);
var index = arrIndex(arrClass,className);
if(index != -1) {
//如果该对象已经存在className
arrClass.splice(index,1);
obj.className = arrClass.join(' ');
}
}
}
//查找是否存在相同class
function arrIndex(arrClass,a) {
for(var i = 0; i<arrClass.length; i++) {
if(arrClass[i] == a) {
return i
}
}
return -1;
}
原生js模拟jquery中的addClass和removeClass方法的更多相关文章
- 原生JS模拟jQuery $
模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...
- 使用原生js模拟jQuery选择器,实现new方法,兼容ie5
// 考虑到兼容ie5,未使用es6语法 /* 使用方法: 在<head>标签中(需使用ready方法): <script src="./jQuery2.js"& ...
- 原生 JS 与 jQuery 中的 AJAX
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更 ...
- 原生JS和jQuery中基本的节点操作
js中节点操作**document.createElement()**用来生成网页元素节点,参数为元素的标签名: **document.createTextNode()**用来生成文本节点,参数为所要 ...
- jQuery 属性操作 - addClass() 和 removeClass() 方法
实例 向第一个 p 元素添加一个类: $("button").click(function(){ $("p:first").addClass("int ...
- 原生js模拟jquery写法
function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == " ...
- js和jquery中有关透明度操作的问题
在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器 ...
- JavaScript中函数和类(以及this的使用<重点>,以及js和jquery讲解,原生js实现jquery)
1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下 一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...
随机推荐
- CLion注冊码算法逆向分析实录(纯研究)
声明 CLion程序版权为jetBrains全部.注冊码授权为jetBrains及其付费用户全部,本篇仅仅从兴趣出发,研究其注冊码生成算法. 不会释出不论什么完整的源码. 网上查了下.已有注冊机,所以 ...
- 足球大数据:致足球怀疑论者-The Counter(s)-Reformation反教条改革
足球大数据:致足球怀疑论者-The Counter(s)-Reformation反教条改革 注:本序列文章都是本人对<The Numbers Game>书(豆瓣链接http://book. ...
- hdu 5269 ZYB loves Xor I && BestCoder Round #44
题意: ZYB喜欢研究Xor,如今他得到了一个长度为n的数组A. 于是他想知道:对于全部数对(i,j)(i∈[1,n],j∈[1,n]).lowbit(AixorAj)之和为多少.因为答案可能过大,你 ...
- 《从零開始学Swift》学习笔记(Day 51)——扩展构造函数
创文章.欢迎转载.转载请注明:关东升的博客 扩展类型的时候,也能够加入新的构造函数.值类型与引用类型扩展有所差别.值类型包含了除类以外的其它类型.主要是枚举类型和结构体类型. 值类型扩展构造函数 扩展 ...
- 37.创建自定义的指令的限制使用 通过restrict 设置
转自:https://www.cnblogs.com/best/tag/Angular/ 1. 元素名 <runoob-directive></runoob-directive> ...
- 登录那些事儿+ Session原理
http://cnodejs.org/topic/5671441a1d2912ce2a35aaa1 登录那些事儿 http://www.jianshu.com/p/2b7c10291aad Sess ...
- 熟悉了下HTTP协议
HTML是一种用来定义网页的文本,会HTML,就可以编写网页: HTTP是在网络上传输HTML的协议,用于浏览器和服务器的通信.200表示一个成功的响应,后面的OK是说明.失败的响应有404 Not ...
- POJ 3279 枚举?
思路: 1.枚举第一行 递推剩下的 判断最后一行成不成立 2. (误)高斯消元? 如何判断1最少和字典序最小- (所以这种做法好像不可取) //By SiriusRen #include <cs ...
- Scala基础简述
* Scala基础简述 本文章作为Scala快速学习的教程,前提环境是:我假设在此之前,你已经学会了Java编程语言,并且我们以随学随用为目标(在此不会深度挖掘探讨Scala更高级层次的知识).其中语 ...
- Android 自定义viewpager 三张图片在同一屏幕轮播的效果
github:https://github.com/nickeyCode/RoundImageViewPager 说实话不知道怎么描述这个效果,在网页上见得跟多,公司要求做这个效果得时候不知道怎么用文 ...