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

  1. 原生JS模拟jQuery $

    模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...

  2. 使用原生js模拟jQuery选择器,实现new方法,兼容ie5

    // 考虑到兼容ie5,未使用es6语法 /* 使用方法: 在<head>标签中(需使用ready方法): <script src="./jQuery2.js"& ...

  3. 原生 JS 与 jQuery 中的 AJAX

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更 ...

  4. 原生JS和jQuery中基本的节点操作

    js中节点操作**document.createElement()**用来生成网页元素节点,参数为元素的标签名: **document.createTextNode()**用来生成文本节点,参数为所要 ...

  5. jQuery 属性操作 - addClass() 和 removeClass() 方法

    实例 向第一个 p 元素添加一个类: $("button").click(function(){ $("p:first").addClass("int ...

  6. 原生js模拟jquery写法

    function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == " ...

  7. js和jquery中有关透明度操作的问题

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置       透明度在IE浏览器 ...

  8. JavaScript中函数和类(以及this的使用<重点>,以及js和jquery讲解,原生js实现jquery)

    1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...

  9. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

随机推荐

  1. Android 取得 ListView中每个Item项目的值

    首先我们须要创建 ListView .这里假定我们已经创建好了而且使用SimpleAdapter设置好了adapter数据,看一下我们的adapter ArrayList<HashMap< ...

  2. caffe 训练測试自己的数据集

    简单记录一下自己使用caffe的过程和遇到的一些问题. 下载caffe以及安装不具体叙述了. 可參照 http://caffe.berkeleyvision.org/installation.html ...

  3. pig 调试(explain&amp;illerstrate)

    grunt> cat t.txt kw1 2 kw3 1 kw2 4 kw1 5 kw2 2 cat test.pig A = LOAD '/user/input/t.txt' as (k:ch ...

  4. nodejs02---demo

    1.Hello World 打一个一个文本编辑器,在其中输入 console.log('Hello World'); 并保存为helloworld.js.打开dos窗口进入该文件的目录运行 node ...

  5. nyoj--108--士兵杀敌(一)(区间求和&&树状数组)

    士兵杀敌(一) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军现在想知 ...

  6. Gojs学习史(一):基本定义

    1. gojs定义 初始化时,先简化gojs本身的方法: var Go = go.GraphObject.make; //简化方法 1.1 画布定义 在声明了Go方法之后,接下来就是定义画布: myD ...

  7. Asp.Net 中使用 水晶报表(上)

    Asp.Net中使用水晶报表(上) 在我们对VS.Net中的水晶报表(Crystal Reports)进行研究之前,我和我朋友对如何将这个复杂的东东加入我们的Web应用有着非常的好奇心.一周以后,在阅 ...

  8. ScrollView嵌套GridView不显示顶部

    /*     * scrollView中嵌套GridView不能显示头部     *      * 方案①:scrollView.smoothScrollTo(0, 0);     *      * ...

  9. bash编程,while嵌套case语句, file不能判断文件存在与否

    写一个脚本, 完成如下要求 (1)脚本可接受参数 : start, stop, restart, status, (2)如果参数非非法, 提示使用格式后报错退出; (3)如果是start, 则创建/t ...

  10. 去除input的前后的空格

    这里用的是jquery的方法