原生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方法,有时候 ... 
随机推荐
- Failed to initialize connector [Connector[HTTP/1.1-443]]
			Failed to initialize connector [Connector[HTTP/1.1-443]] 出现如上错误时,是因为443端口被占用, 所以tomcat的https协议无法使用, ... 
- [MST] Defining Asynchronous Processes Using Flow
			In real life scenarios, many operations on our data are asynchronous. For example, because additiona ... 
- 浅析为什么 char 类型的范围是 : -128~+127
			在 C 语言中. signed char 类型的范围为 -128~127,每本教科书上也这么写.可是没有哪一本书上(包含老师)也不会给你为什么是 -128~127,这个问题貌似看起来也非常easyea ... 
- [数位dp] bzoj 3209 花神的数论题
			题意:中文题. 思路:和普通数位dp一样,这里转换成二进制,然后记录有几个一. 统计的时候乘起来就好了. 代码: #include"cstdlib" #include"c ... 
- .NET 框架简单介绍
			初学.NET肯定会有一系列的疑问,比方(下面为自己的疑问): 1) 何为. NET框架.它都包括哪些东西? 2) 程序集是什么.它是怎样在CLR(通用语言执行时)中执行的? 3) C#与VB.NET同 ... 
- Leaflet--建设移动设备友好的互动地图
			Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的.开源的 JavaScript 库.它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,尽管代码仅有 33 KB ... 
- rest_framework-解析器-总结完结篇
			感谢alex和武老师 前戏: Djaogo对请求体只支持 application/x-www-form-urlencoded请求头以及name=alex&age=18的数据格式 django. ... 
- WebView的坑[持续更新]
			返回错误的 innerHeight,如 240(WebView returns bad window.innerHeight) http://stackoverflow.com/questions/1 ... 
- caioj 1074 动态规划入门(中链式1:最小交换合并问题)
			经典的石子合并问题!!! 设f[i][j]为从i到j的最大值 然后我们先枚举区间大小,然后枚举起点终点来更新 f[i][j] = min(f[i][k] + f[k+1][j] + sum(i, j) ... 
- C++ 容器(一):顺序容器简介
			C++提供了使用抽象进行高效编程的方式,标准库中定义了许多容器类以及一系列泛型函数,使程序员可以更加简洁.抽象和有效地编写程序,其中包括:顺序容器,关联容器和泛型算法.本文将简介顺序容器(vector ... 
