Class selectors (JQuery

JQuery class selector: Get a collection of nodes,

$('.class'); 
Copy the code

Relative to the ID selector

$('#id'); // Get the unique nodeCopy the code

Class selector multiple selection is relatively inefficient,

In browser compatibility: (1) javascript native getElementsByClassName(” class name “); $(‘.class ‘); Implementation as follows: native:

    <script type="text/javascript">
        var divs = document.getElementsByClassName("aaron");
        for ( var i = 0; i < divs.length; i++) {
            divs[i].style.border = "5px solid blue";
        }
    </script>
Copy the code

JQuery:

    <script type="text/javascript">
        $(".imooc").css("border", "5px solid red");
    </script>    
Copy the code

Note that the class name attribute class= “XXX”;

< div class = "Aaron" > < p > id = "Aaron" < / p > < p > select < / p > < / div >Copy the code

Specific code:

<! PUBLIC DOCTYPE HTML "- / / / / W3C DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd" > < HTML > < head > < meta  http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>$(".class")</title> <style> div{ width: 100px; height: 90px; float: float; margin: 5px; padding: 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 > id = "Aaron" < / p > < p > select < / p > < / div > < div class = "Aaron" > < p > id = "Aaron" < / p > < p > select < / p > < / div > < div class = "imooc" > < p > id = "imooc" < / p > < p > JQuery selected < / p > < / div > < div class = "imooc" > < p > id = "imooc" < / p > < p > JQuery uncheck < / p > < / div > < script type="text/javascript"> var divs = document.getElementsByClassName("aaron"); for ( var i = 0; i < divs.length; i++) { divs[i].style.border = "5px solid blue"; } </script> <script type="text/javascript"> $(".imooc").css("border", "5px solid red"); </script> </body> </html>Copy the code