先上一段代码
来看下这个代码的结果
不是addClass吗，为什么没有变蓝色呢??
我们可以打个点来看下发生什么问题
打如下图的点：
ok，接下来刷新一下页面，变成这样了.......
天啊，原来已经变成蓝色了，只是在下面遍历的时候，className=“inner”把原来的类覆盖了，或者说重置了
这是打点停住时候发生的事情，原来的c1被盖了
所以，点题一下：className属性是会覆盖掉原来的class属性
简单上一下源码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <style type="text/css"> .c1{ color: blue; } .cc{ font-size: 20px; } </style> </head> <body> <div class="box"> <ul class="b-ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html> <script type="text/javascript"> var lis = document.getElementsByClassName("b-ul")[0].children; $(".b-ul>*").addClass("c1");/*失效了,原效果是变蓝色*/ for(var i=0;i<4;i++){ lis[i].className = "inner"; lis[i].classList.add("cc"); } // $("#b-ul>*").addClass("c1");/*没有问题*/ </script>