类选择器 · 伪全栈技术汇总

类选择器，顾名思义，通过class样式类名来获取节点描述： `$( ".class" )` 类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的右边实现一个原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较我们不难发现： **jQuery除了选择上的简单，而且没有再次使用循环处理** 不难想到$(".imooc").css()方法内部肯定是带了一个隐式的循环处理，所以使用jQuery选择节点，不仅仅只是选择上的简单，同时还增加很多关联的便利操作，后续我们还会慢慢的学到其他的优势。 ~~~ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div class="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <div class="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div> <script type="text/javascript"> //通过原生方法处理 //样式是可以多选的，所以得到的是一个合集 //需要通过循环给合集中每一个元素修改样式 var divs = document.getElementsByClassName('aaron'); for (var i = 0; i < divs.length; i++) { divs[i].style.border = "3px solid blue"; } </script> <script type="text/javascript"> //通过jQuery直接传入class //class选择器可以选择多个元素 $(".imooc").css("border", "3px solid red"); </script> </body> </html> ~~~