JQuery object, basic selector, filter selector

Time:2020-5-6

DOM object converted to jQuery object

If the parameter passed to the $(DOM) function is a DOM object, the jQuery method will wrap the DOM object into a new jQuery object

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script></script>
</head>
<body>
< div > element 1 < / div >
< div > element two < / div >
< div > element three < / div >
<script type="text/javascript">
    Var div = document.getelementsbytagname ('div '); // DOM object         
    //JQuery object to convert DOM node div to $div
    $div = $(div);          
    Var $first = $div.first(); // find the first div element
    $first. CSS ('color ',' Red '); // set the color to the first element
</script>
</body>
</html>

JQuery basic selector

id selector

ID selector: an ID used to find, that is, the ID attribute of the element: $(“ාid”)

Note: ID is unique. Each ID value can only be used once in a page. If multiple elements are assigned the same ID, only the first DOM element of the ID selection set is matched. But this should not happen; pages with more than one element with the same ID are not valid

<!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></script>
</head>
<body>   
     <div id="aaron">
        <p>id="aaron"</p>
        <p>Select</p>
    </div>
    <div id="imooc">
        <p>id="imooc"</p>
        <p>JQuery selected</p>
    </div>
    <div id="imooc">
        <p>id="imooc"</p>
        <p>JQuery not selected</p>
    </div>
    <script type="text/javascript">
       //Processing through native methods
        var div = document.getElementById('aaron');
        div.style.border = "3px solid blue";
    </script>
    <script type="text/javascript">
        //Pass in ID directly through jquery
        //The unique ID only selects the first div node with the matching ID of imooc
        $("#aaron").css("border", "3px solid red");
    </script>
</body>
</html>

Class selector

Class selector, get node through class style class name: $(“. Class”)

Class selectors are less efficient than ID selectors, but they have the advantage of multiple choices

<!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></script>
</head>
<body>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>Select</p>
    </div>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>Select</p>
    </div>

    <div class="imooc">
        <p>class="imooc"</p>
        <p>JQuery selected</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>JQuery selected</p>
    </div>

    <script type="text/javascript">
        //Processing through native methods
        //You can select multiple styles, so you get a collection
        //You need to cycle through the styles for each element in the assembly
        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">
        //Pass in class directly through jquery
        //The class selector can select multiple elements
        $(".imooc").css("border", "3px solid red");
    </script>


</body>

</html>

element selector

Element selector to select all elements according to the given (HTML) tag name: $(“element”)

<!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></script>
</head>
<body>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>Select</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>Select</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>JQuery selected</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>JQuery selected</p>
    </div>

    <script type="text/javascript">
    //Processing through native methods
    //Get all elements with node tag name div
    //Give each div a blue border
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.border = "3px solid blue";
    }
    </script>
    <script type="text/javascript">
    //Pass in the tag name P directly through jquery
    //Tags can be multiple, so what we get is also a collection
    $("p").css("border", "3px solid red");
    </script>
</body>

</html>

Full selector (* selector)

Pass the * selector to select the element in the document page: $(“*”)

<!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></script>
</head>
<body>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>Select</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>Select</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>JQuery selected</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>JQuery selected</p>
    </div>

    <script type="text/javascript">
        //Get all elements in the page
        var elements1 = document.getElementsByTagName('*');
    </script>
    <script type="text/javascript">
        //Get all elements in the page
        var elements2 = ?       ;
        //Comparison between native and jQuery methods
        //===Indicates that both data and type are equal
        if(elements2.length === elements1.length){
           elements2.css("border","1px solid red");
        }
    </script>
</body>
</html>

Level selector

The level selector in the selector is used to handle the following relationships:

Child element descendant element sibling element adjacent element

JQuery object, basic selector, filter selector

Similarities and differences between level selectors:

  1. Each level selector has a reference node
  2. The descendant selector contains the selection of the child selector
  3. The general sibling selector contains the contents of neighboring sibling selection
  4. The elements selected by adjacent sibling selector and general sibling selector must be under the same parent element

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" href="imooc.css" type="text/css">
        <script></script>
    </head>
    
    <body>
        <h2>Subselector and descendant selector</h2>
        <div class="left">
            <div class="aaron">
                <p>The first P element under div</p>
            </div>
            <div class="aaron">
                <p>The first P element under div</p>
            </div>
        </div>
        <div class="right">
            <div class="imooc">
                <article>
                    <p>P element under article under div</p>
                </article>
            </div>
            <div class="imooc">
                <article>
                    <p>P element under article under div</p>
                </article>
            </div>
        </div>
    
        <script type="text/javascript">
            //Sub selector
            //$('div > p ') select the child element P in all div elements
            $('div > p').css("border", "1px groove red");
        </script>
    
        <script type="text/javascript">
            //Descendant selector
            //$('div p ') select the P element in all div elements
            $('div  p').css("border", "1px groove red");
        </script>
    
    
        <h2>Adjacent brother selector and general brother selector</h2>
        <div class="bottom">
            < div > brother node div, + ~ selector can't select forward < / div >
            < span class = "prev" > selector span element</span>
            The first sibling node after < div > span
            < div > brother node div
                < div class = "small" > child element div < / div >
            </div>
            <span>Brother node span, not optional</span>
            < div > brother node div</div>
        </div>
    
        <script type="text/javascript">
            //Adjacent brother selector
            //Select the first div sibling after prev
            $(".prev + div").css("border", "3px groove blue");
        </script>
    
        <script type="text/javascript">
            //General adjacent selector
            //Select all div siblings after prev
            $(".prev ~ div").css("border", "3px groove blue");
        </script>
    
    </body>
    
    </html>

JQuery filter selector

Basic filter selector

The usage of the filter selector is similar to that of the pseudo element in CSS. The selector starts with a colon ‘:’, as follows is the description of the basic filter:

JQuery object, basic selector, filter selector

matters needing attention:

  1. : eq(),: lt(),: gt(),: even,: odd are used to filter the collection elements of their previous matching expressions. According to the previous matching elements, they are further filtered. Note that jQuery collections are indexed from 0
  2. GT is a paragraph filter, starting from the next specified index, GT (1) actually starting from 2

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" href="imooc.css" type="text/css">
        <script></script>
    </head>
    
    <body>
        <h2>Basic filter</h2>
        <h3>:first/:last/:even/:odd</h3>
        <div class="left">
            <div class="div">
                <p>div:first</p>
                <p>:even</p>
            </div>
            <div class="div">
                <p>:odd</p>
            </div>
            <div class="div">
                <p>:even</p>
            </div>
            <div class="div">
                <p>:odd</p>
            </div>
            <div class="div">
                <p>:even</p>
            </div>
            <div class="div">
                <p>div:last</p>
                <p>:odd</p>
            </div>
        </div>
        <script type="text/javascript">
        //Find the first div
        $(".div:first").css("color", "#CD00CD");
        </script>
        
        <script type="text/javascript">
        //Find the last div
        $(".div:last").css("color", "#CD00CD");
        </script>
        
        <script type="text/javascript">
        //: even select even elements, counting from 0
        $(".div:even").css("border", "3px groove red");
        </script>
        
        <script type="text/javascript">
        //: odd select the element with odd value and count from 0
        $(".div:odd").css("border", "3px groove blue");
        </script>
        
        
        <h3>:eq/:gt/:lt</h3>
        <div class="left">
            <div class="aaron">
                <p>:lt(3)</p>
            </div>
            <div class="aaron">
                <p>:lt(3)</p>
            </div>
            <div class="aaron">
                <p>:eq(2)</p>
            </div>
            <div class="aaron">
            </div>
            <div class="aaron">
                <p>:gt(3)</p>
            </div>
            <div class="aaron">
                <p>:gt(3)</p>
            </div>
        </div>
        <script type="text/javascript">
        //:eq
        //Select a single
        $(".aaron:eq(2)").css("border", "3px groove blue");
        </script>
    http://img.mukewang.com/57cd1df2000146de06020498.jpg    
        <script type="text/javascript">
        //: GT select all elements in the matching set whose index value is greater than the given index parameter
        $(".aaron:gt(3)").css("border", "3px groove blue");
        </script>
        
         <script type="text/javascript">
        //: ltselect all elements in the matching set with index values less than the given index parameter
        //Opposite to: GT
        $(".aaron:lt(2)").css("color", "#CD00CD");
        </script>
        
        <h3>:not</h3>
        <div class="left">
            <div>
                <input type="checkbox" name="a" />
                <p>Aaron</p>
            </div>
            <div>
                <input type="checkbox" name="b" />
                <p>MOOC</p>
            </div>
            <div>
                <input type="checkbox" name="c" checked="checked" />
                <p>Others</p>
            </div>
        </div>
        <script type="text/javascript">
            //: not select all elements to remove elements that do not match the given selector
            //Select all the P elements immediately after the input elements without the checked attribute, and color them
            $("input:not(:checked) + p").css("background-color", "#CD00CD");
        </script>
    </body>
    
    </html>

Content filter selector

The basic filter selector is for element DOM nodes. If you want to filter through content, use the content filter selector. Its rules are reflected in the sub elements or text content it contains. The content filter is described in the following table:

JQuery object, basic selector, filter selector

matters needing attention:

  1. : contains and: has both have the meaning of searching, but contains looks for the element containing “specified text”, and has looks for the element containing “specified element”
    If: contains matched text is contained in a child element of the element, it is also considered qualified.
  2. : parent and: empty are the opposite, and they involve child elements, including text nodes

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" href="imooc.css" type="text/css">
        <script></script>
    </head>
    
    <body>
        <h2>Content filter</h2>
        <h3>:contains/:has</h3>
        <div class="left">
            <div class="div">
                <p>:contains</p>
            </div>
            <div class="div">
                <p>:contains</p>
            </div>
            <div class="div">
                <p>
                    <span>:has</span>
                </p>
            </div>
            <div class="div">
                <p>:contains</p>
            </div>
        </div>
    
        <script type="text/javascript">
            //Find all element nodes with "contains" in DOM element in class ='div '
            //And set the color
            $(".div:cotains(':contains')").css("color", "#CD00CD");
        </script>
    
        <script type="text/javascript">
            //Find all element nodes with "span" in DOM element in class ='div '
            //And set the color
            $(".div:has(span)").css("color", "blue");
        </script>
    
    
        <h3>:parent/:empty</h3>
        <div class="left">
            <div class="aaron">
                <a>:parent</a>
            </div>
            <div class="aaron">
                <a>:parent</a>
            </div>
            <div class="aaron">
                <a>:parent</a>
            </div>
            <div class="aaron">
                <a></a>
            </div>
        </div>
        <script type="text/javascript">
           //Select all a elements that contain child elements or text
           //Add a blue border
           $("a:parent").css("border", "3px groove blue");
        </script>
    
        <script type="text/javascript">
           //Find all empty nodes below the a element (no child elements)
           //Add a paragraph of text and border
           $("a:empty").text(":empty").css("border", "3px groove red"); 
        </script>
    
    </body>
    
    </html>

Visibility filter selector

The element has display state and hidden state. JQuery extends the visibility filter selector: visible and: Hidden according to the element’s state. The description is as follows:

JQuery object, basic selector, filter selector

: Hidden selector, including not only the elements with display = “None” style, but also hidden forms, visibility, etc

There are the following ways to hide elements:

  1. The value of CSS display is none
  2. Form element of type = “hidden”
  3. Width and height are explicitly set to 0
  4. An ancestor element is hidden and will not be displayed on the page
  5. The value of CSS visibility is hidden
  6. CSS opacity refers to 0

Elements are considered visible if they occupy a certain amount of space in the document. The width or height of the visible element is greater than zero. The visibility: hidden or opacity: 0 of the element is considered visible because they still occupy the spatial layout

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script></script>
</head>

<body>
    <h2>Visibility filter selector</h2>
    <h3>:visible/:hidden</h3>
    <div class="left">
        <div class="div">
            <a>display</a>
            <p id="div1" style="display:none;">display</p>
        </div>
        <div class="div">
            <a>width</a>
            <a>height</a>
            <p id="div2" style="width:0;height:0">width/height</p>
        </div>
        <div class="div">
            <a>visibility</a>
            <a>opacity</a>
            <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
        </div>
    </div>

    <p id="show"></p>
    <script type="text/javascript">
        function show (ele) {
            if (ele instanceof jQuery) {
                $("show"). HTML (= '+ ele. Length of' length of element)
            } else {
                Alert (ELE + 'is not a jQuery object')
            }
        }
    </script>


    <script type="text/javascript">
        //Find the DOM element with id = div1, whether it is visible
        show( $('#div1:visible') );
    </script>

    <script type="text/javascript">
        //Find the DOM element with id = div2, whether it is visible
        show( $('#div2:visible') );
    </script>

    <script type="text/javascript">
        //Find the DOM element with id = div3, whether it is visible
        show( $('#div3:visible') );
    </script>

    <script type="text/javascript">
        //Find the DOM element with id = div1, hide or not
        show( $('#div1:hidden') );
    </script>

    <script type="text/javascript">
        //Find the DOM element with id = div2, hide or not
        show( $('#div2:hidden') );
    </script>

    <script type="text/javascript">
        //Find the DOM element with id = div3, hide or not
        show( $('#div3:hidden') );
    </script>

</body>

</html>

Property filter selector

Attribute selectors can locate an element based on attributes. If you only need to specify an attribute of the element, all elements that use the attribute and do not consider its attribute value will be located. You can also be more specific and locate elements that use a specific value on these attributes

JQuery object, basic selector, filter selector

Among them, [attr = “value”] and [attr * = “value”] are the most practical:

  • [attr = “value”] can locate different types of elements, especially the operation of form elements, such as input [type = “text”], input [type = “checkbox”], etc
  • [attr * = “value”] can help us match different types of files in the website

There are three forms of selector in $(selector):
① String: used for element selection; ② DOM element: used to encapsulate DOM elements and provide a series of jQuery methods; ③ function is the $(FN) form during initialization
$(“div [data = PMX]”) parentheses can be single or double quotes. The purpose is to indicate that the parameter in $(selector) is a string. [attribute = value] in this form, value can be without quotation marks. If you want to add quotation marks, you need to refer to the selector. If the selector is a single quote, then value must be a double quote

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script></script>
</head>

<body>
    <h2>Property filter selector</h2>
    <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true" name='p1'>
            <a>[att=val]</a>
        </div>
        <div class="div" testattr="true" p2>
            <a>[att]</a>
        </div>
        <div class="div" testattr="true" name="-">
            <a>[att|=val]</a>
        </div>
        <div class="div" testattr="true" name="a b">
            <a>[att~=val]</a>
        </div>
    </div>

    <script type="text/javascript">
         //Find the div element with attribute name = P1 in all divs
         $("div[name=p1]"]).css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
        //Find the div element with attribute P2 in all divs
        $("div[p2]").css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //Find the div element with attribute name containing only one hyphen "-" in all divs
        $("div[name|='-']").css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //Find all divs where the value in attribute name contains a div element with a hyphen of "null" and "a"
        $("div[name~='a']").css("border", "3px groove #668B8B"); 
    </script>


    <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true"  name='imooc-aaorn'>
            <a>[att^=val]</a>
        </div>
        <div class="div" testattr="true"  name='aaorn-imooc'>
            <a>[att$=val]</a>
        </div>
        <div class="div" testattr="true"  name="attr-test-selector">
            <a>[att*=val]</a>
        </div>
        <div class="div" name="a b">
            <a>[att!=val]</a>
        </div>
    </div>


    <script type="text/javascript">
         //In all divs, the value of attribute name starts with imooc
         $("div[name^='imooc']").css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
         //In all divs, the value of attribute name ends with imooc
         $("div[name$='imooc']").css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //Find the div element with the value in attribute name containing a test string in all divs
        $("div[name*=test]").css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //Find all divs, the value in the attribute testattr does not contain a div of "true"
        $("div[name!=true]").css("border", "3px groove #668B8B"); 
    </script>


</body>

</html>

Child element filter selector

The sub element filter selector is not often used, and its filter rules are slightly more complicated than other selectors

Child element filter selector description table:

JQuery object, basic selector, filter selector

matters needing attention:

  1. : first matches only one single element, but the: first child selector can match multiple: matching the first child for each parent element. This is equivalent to: nth child (1)
  2. : last matches only one single element, and the: last child selector can match multiple elements: that is, the last child for each parent element
  3. If there is only one child: first child and last child are the same
  4. : only child match if an element is the only child element in the parent element, that is to say, the current child element is the only element in the parent element, then match
  5. JQuery implementation: nth child (n) is strictly from the CSS specification, so the n value is “index”, that is, count from 1, Nth child (index) starts from 1, and EQ (index) starts from 0
  6. The difference between nth child (n) and: nth last child (n) is that the former is calculated from the front to the back, and the latter is calculated from the back to the front
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script></script>
</head>

<body>
    <h2>Child element filter selector</h2>
    <h3>:first-child、:last-child、:only-child</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>Second element</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>Second element</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //Find the first a element under class = "first div"
        //For the first of all parents
        $(".first-div a:first-child").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //Find the last a element under class = "first div"
        //For the last of all parents
        //If there is only one element, last is also the first one
        $(".first-div a:last-child").css("color", "red");
    </script>

    <script type="text/javascript">
        //Find a element with only one child under class = "first div"
        $(".first-div a:only-child").css("color", "blue");
    </script>


    <h3>:nth-child、:nth-last-child</h3>
    <div class="left last-div">
        <div class="div">
            <a>:first-child</a>
            <a>Second element</a>
            <a>Third element</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>Second element</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>Second element</a>
            <a>Third element</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //Find the second a element under class = "last div"
        $('.last-div a:nth-child(2)').css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //Find the penultimate a element under class = "last div"
        $('.last-div a:nth-last-child(2)').css("color", "red");
    </script>

</body>

</html>

Form element selector

Specific method description of form selector:

JQuery object, basic selector, filter selector

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style> 
        input{
            display: block;
            margin: 10px;
            padding:10px;
        }
    </style>
    <script></script>
</head>

<body>
    <h2>Child element filter selector</h2>
    <h3>input、text、password、radio、checkbox</h3>
    <h3>submit、image、reset、button、file</h3>
    <div class="left first-div">
        <form>
            < input type = "text" value = "text type" / >
            <input type="password" value="password"/>
            <input type="radio"/> 
            <input type="checkbox"/>
            <input type="submit" />
            <input type="image" />
            <input type="reset" />
            <input type="button" value="Button" />
            <input type="file" />
        </form>
    </div>

    <script type="text/javascript">
        //Find all input, textarea, select, and button elements
        //: the input selector basically selects all form controls
        $(':input').css("border", "1px groove red"); 
    </script>

    <script type="text/javascript">
        //Match input elements of type text in all input elements
        $('input:text').css("background", "#A2CD5A");
    </script>

    <script type="text/javascript">
        //Match input elements of type password in all input elements
        $('input:password').css("background", "yellow");
    </script>

    <script type="text/javascript">
        //Match radio buttons in all input elements and check
        $('input:radio').attr('checked','true');
    </script>

    <script type="text/javascript">
        //Match the check buttons in all input elements and select
        $('input:checkbox').attr('checked','true'); 
    </script>

    <script type="text/javascript">
        //Match submitted buttons in all input elements, change the background color
        $('input:submit').css("background", "#C6E2FF");
    </script>

    <script type="text/javascript">
        //Match elements of image type in all input elements, modify background color
        $('input:image').css("background", "#F4A460");
    </script>

    <script type="text/javascript">
        //Match all input elements with button type
        $('input:button').css("background", "red");
    </script>

    <script type="text/javascript">
        //Match all input elements with type file
        $('input:file').css("background", "#CD1076");
    </script>

</body>

</html>
  • Selectors are used for check boxes and radio boxes. For drop-down box elements, use the: selected selector
  • In some browsers, the selector: checked may be incorrectly selected to the < option > element, so be sure to use the selector input: checked instead to ensure that only the < input > element is selected

Special selector this

This indicates that the current context object is an HTML object, which can call the properties and methods owned by the HTML object. $(this), representing a jQuery context object, which can call jQuery's methods and property values

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script></script>
</head>

<body>
    <h2>Special selector this</h2>

    < p id = "test1" > Click to test: through native DOM processing</p>
    
    < p id = "test2" > Click to test: through native jQuery processing</p>

    <script type="text/javascript">
        var p1 = document.getElementById('test1')
        p1.addEventListener('click',function(){
            //Change color directly through DOM
            this.style.color = "red"; 
        },false);
    </script>

    <script type="text/javascript">
        $('#test2').click(function(){
            //Change color by wrapping it as a jQuery object
            $(this).css('color','blue');
        })
    </script>

</body>

</html>