4--The selector in Jquery (basic selector)

The selector is the foundation of the Jquery framework, and the event processing in Jquery. Both traversing the DOM and ajax operations rely on selectors.
The advantage of the Jquery selector is that it is written concisely.
$("#username") is equivalent to:
domcument.getElementById("username");
$("tagName") is equivalent to:
domcument.getElementsByTagName("tagName")
HTML required for demonstration

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery的选择器</title>
    <script src="jquery-1.11.3.js"></script>
    <!--导入自定义的js文件-->
   <!-- <script src="selector_base.js"></script>-->
    <!--<script src="selector_level.js"></script>-->
    <script src="selector_filter.js"></script>
    <style>
        div,span,p {
     
     
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border:#000 1px solid;
            float:left;
            font-size:17px;
            font-family:Verdana;
        }
        div.mini {
     
     
            width:55px;
            height:55px;
            background-color: #aaa;
            font-size:12px;
        }
        div.hide {
     
     
            display:none;
        }
    </style>
</head>

<body>
    <div class="one" id="one" >
        id为one,class为one的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one"  id="two" title="test" >
        id为two,class为one,title为test的div.
        <div class="mini"  title="other">class为mini,title为other</div>
        <div class="mini"  title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"  title="tesst">class为mini,title为tesst</div>
    </div>
    <div style="display:none;"  class="none">
        style的display为"none"的div
    </div>

    <div class="hide">class为"hide"的div</div>

    <div>
        包含input的type为"hidden"的div<input type="hidden" size="8"/>
    </div>

    <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

The basic selector is the most commonly used selector in Jquery, and it is also the simplest selector. It finds DOM elements by element id, class and tag name. (Similar to CSS)

#id (id selector): Usage $("#myDIV"); The return value is a collection of single elements. It is to directly select the element with id=”myDIV” in HTML.
Example: Change the background color of the element with id one to #FF0000

/*Id选择器：
*  语法：$("#id的值")
* */
$(function(){
    
    
    $("#one").css("background-color","#FF0000");
});

Element (element selector): usage $("element name"): return value, collection element
Example: change the element name
The background of all the elements is blue (blue)

/*元素选择器：
* 语法:$("元素名")
* */
$(function(){
    
    
    $("div").css("backgroundColor","blue");
});

class (class selector): usage $(".myClass"), return value, collection element
Example: change the background of all elements whose class is mini to yellow (yellow)

/*类选择器：
* 语法：$(".类属性的值")
* */
$(function(){
    
    
    $(".mini").css("backgroundColor","yellow").css("color","red");
});

Wildcard selector *: Usage $("*"): return value, set elements, match all elements.
Example: Change the background of all elements to #00FF33

/*通配符选择器：
* 语法：$("*")
* */
$(function(){
    
    
    $("*").css("backgroundColor","#00FF33");
});

selector1,selector2,selector3... (combination selector) Usage: $("div,span,p.myCLass") returns the collection element.
Example: Change the background of all elements and elements whose id is TWO to yellow

/*组合选择器：
* 语法：$("selector1,selector2,selectorN")
* */
$(function(){
    
    
    $("span,#two").css("backgroundColor","yellow");
})

The example effects are omitted here. You can verify by yourself.
The entire selector_base.js code is as follows:

/**
 * Jquery中的基本选择器
 */
/*Id选择器：
*  语法：$("#id的值")
* */
/*
$(function(){
    $("#one").css("background-color","#FF0000");
});
*/
/*元素选择器：
* 语法:$("元素名")
* */
/*
$(function(){
    $("div").css("backgroundColor","blue");
});
*/
/*类选择器：
* 语法：$(".类属性的值")
* */
/*$(function(){
    $(".mini").css("backgroundColor","yellow").css("color","red");
});*/
/*通配符选择器：
* 语法：$("*")
* */
/*$(function(){
    $("*").css("backgroundColor","#00FF33");
});*/
/*组合选择器：
* 语法：$("selector1,selector2,selectorN")
* */
$(function(){
    
    
    $("span,#two").css("backgroundColor","yellow");
})

4--The selector in Jquery (basic selector)

Guess you like