关于原生js添加class名.和jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ margin-top: 200px; overflow: hidden; } li{ list-style: none; float: left; width: 20px; height: 20px; border:1px solid #000; } .check{ border:1px solid red; } </style> </head> <body> <ul id="js"> <li class="demo1">1</li> <li class="demo1">2</li> <li class="demo1">3</li> <li class="demo1">4</li> </ul> <ul id="js1"> <li class="demo2">h</li> <li class="demo2">q</li> <li class="demo2">b</li> <li class="demo2">v</li> </ul> </body> <script src="jquery-1.12.2.min.js"></script> <script> // 原生js方法 // js添加claa名，删除class名方法 function hasClass(obj, cls) { return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)')); } function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls; } function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\s|^)' + cls + '(\s|$)'); obj.className = obj.className.replace(reg, ' '); } } var li1Ele = document.getElementsByClassName("demo1"); var li2Ele = document.getElementsByClassName("demo2"); var change=function (obj) { for(var i = 0; i < obj.length; i++){ obj[i].onclick = function() { for(var i = 0; i < obj.length; i++){ removeClass(obj[i],"check") } addClass(this,"check"); }; } }; change(li1Ele); change(li2Ele); // jquery方法 // var li1ele=$(".demo1"); // var li2ele=$(".demo2"); // var changeJ=function (obj) { // for(var i = 0; i < obj.length; i++){ // obj[i].onclick = function() { // for(var i = 0; i < obj.length; i++){ // $(obj).eq(i).removeClass("check") // } // $(this).addClass("check") // // }; // } //}; //changeJ(li1ele); //changeJ(li2ele); </script> </html>