原生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方法,有时候 ...
随机推荐
- servlet3.0 @webfilter 过滤顺序
Servlet3.0之前Filter过滤的顺序是由用户在web.xml中配置的顺序决定的,如下会先执行encodingFilter,再执行filter1. <filter> <dis ...
- java用freemarker实现导出word----包含图片
分为以下三个步骤: 1.先制作word模板 2.将该文档另存为 xml 文件 3.打开xml 文件 将对应的字段替换,比如 4.将xml文件保存成ftl格式的文档 5.相应的代码: package o ...
- JavaScript(14)jQuery(JavaScript 库)
JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常非常困难也非常耗时.为了应对这些调整,很多的 JavaScript (helper) 库应运而 ...
- 转:移动建站工具(一):分秒钟将Web网站移动化
作者唐小引 移动建站工具Web移动化简易开发MobifyTOPMobile Joomla!MoFuseWordPress优化 摘要:时下移动端显然已是诸多企业都想要占领的重要阵地.但限于较小的屏幕 ...
- CCEditBox/CCEditBoxImplAndroid
#ifndef __CCEDITBOXIMPLANDROID_H__ #define __CCEDITBOXIMPLANDROID_H__ #include "cocos2d.h" ...
- ItemTouchHelper(实现RecyclerView上添加拖动排序与滑动删除的所有事情)
简单介绍: ItemTouchHelper是一个强大的工具,它处理好了关于在RecyclerView上添加拖动排序与滑动删除的所有事情.它是RecyclerView.ItemDecoration的子类 ...
- 4、Go for循环
package main import "fmt" func main(){ //for 循环是go语言唯一的循环结构,分为三种类型 //第一种 类似while i:=1 for ...
- 四、YOLO-V1原理与实现(you only look once)
可以看成图像分类与定位的结合,给定一张图片,目标检测系统要能够识别出图片的目标并给出其位置,由于图片中目标数是不定的,且要给出目标的精确位置,目标检测相比分类任务更复杂.目标检测的一个实际应用场景就是 ...
- ubuntu 同时安装anaconda2和anaconda3
说明:先根据Ubuntu预装的python2.7来安装Anaconda2,然后将Anaconda3作为其环境安装在envs文件夹下. 重要提示:有一些软件需要py2.7的环境,比如XX-Net, 最好 ...
- CF546E Soldier and Traveling(网络流,最大流)
CF546E Soldier and Traveling 题目描述 In the country there are \(n\) cities and \(m\) bidirectional road ...