JQuery selector aggregation and jquery Selector
I. Basic Selector
<body> <div> <div id="div1"> aaaaaaaaaaa</div> <div class="c1"> bbbbbbbbb</div> <span>ccccccccc</span> </div></body>
$ (Function () {$ ("# div1" ).html ("hello world 1"); // match element (a) $ (". c1 ").html (" hello world 2 "); // matches the element (B) based on Yclass $ (" span ").html (" hello world 3 "); // match (c) $ ("span, div. c1 ").html (" hello world 4 "); // match all the spans and class = c1 div (B c) on the page) $ ("*" ).html ("hello world 5"); // matches all the elements on the page, including the body });
Ii. Hierarchical Selector
<body> <span id="span1"> aaaaaaaaa</span> <span class="c1"> bbbbbbbbb</span> <div> ccccccccc <span>ddddddddd</span> </div> <div>eeeeeeeee</div></body>
$ (Function () {$ ("body span" ).html ("hello world 1"); // select all spans (a B d) in the body) $ ("body> span" ).html ("hello world 2"); // select the child span element (a B) of the body element $ ("span. c1 + div ").html (" hello world 3 "); // select the next div element of the span whose class is c1. Note that it is the same level element $ (" span. c1 ").next().html (" hello world 3 "); // The same as the uplink (c) $ (" span. c1 ~ Div ").html (" hello world 4 "); // select all the divs behind the span whose class is c1 $ (" span. c1 "pai.nextall().html (" hello world 4 "); // same as the uplink (c e )});
III. Basic filter Selector
<body>$ (Function () {$ ("div: first" ).html ("hello world 1"); // select the first div of all divs $ ("span: last "pai.html (" hello world 2 "); // select the last $ (" span: not (. c1) ").html (" hello world 3 "); // select all spans except the span where the class is c1 $ (" span: even ").html (" hello world 4 "); // select a span with an even index. The index starts from 0 $ (" span: odd ").html (" hello world 5 "); // select a span with an odd index. The index starts from 0 $ ("span: eq (2)" ).html ("hello world 6"); // select the span of the specified index, index starts from 0 $ ("span: gt (0)" ).html ("hello world 7"); // select a span greater than the specified index, does not contain the specified index $ ("span: lt (2)" ).html ("hello world 8"); // select a span smaller than the specified index, excluding the specified index $ (": header "pai.html (" hello world 9 "); // select all the title elements on the page, h1 h2 h3 ...});Iv. Content Filtering Selector
<body> <span id="span1">aaaaaaaaa</span> <span class="c1">bbbbbbbbb</span> <span></span> <div> ccccccccc <span id="span2" class="c2">ddddddddd</span> </div> <div>eeeeeeeee</div></body>$ (Function () {$ ("span: contains (aa)" ).html ("hello world 1"); // select the span element whose content contains aa $ ("span: empty ").html (" hello world 2 "); // select an empty span element $ (" div: has (span) ").html (" hello world 3 "); // select the div element $ ("span: parent" ).html ("hello world 4") containing span; // select the span element containing child elements, including text });5. Attribute filter Selector
<body> <span id="span1">aaaaaaaaa</span> <span class="c1">bbbbbbbbb</span> <span></span> <div> ccccccccc <span id="span2" class="c2">ddddddddd</span> </div> <div>eeeeeeeee</div></body>$ (Function () {$ ("span [id]" world .html ("hello world 1 "); // select the span element with an attribute id $ ("span [id = span2]" ).html ("hello world 2 "); // select the span element whose property id is equal to span2 $ ("span [id! = Span2] ").html (" hello world 3 "); // select the span element whose attribute id is not equal to span2 $ ("span [id ^ = span]" ).html ("hello world 4 "); // select the span element whose attribute id starts with span $ ("span [id $ = 2]" ).html ("hello world 5 "); // select the span element whose attribute id ends with 2 $ ("span [id * = an]" ).html ("hello world 6 "); // select the span element whose attribute id contains an $ ("span [id * = an] [class $ = 2]" ).html ("hello world 6 "); // select the span element whose property id contains an and whose class ends });6. Child element filter Selector
<body> <div class="c1"> <span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span> </div> <div class="c1"> <span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span> </div> <div class="c1"> <span>aaaaaaaa</span> </div></body>$(Function () {$ ("div. c1: nth-child (1) ").html (" hello world 1 "); // select the specified index sub-element of the div whose class is equal to c1 $ (" div. c1: nth-child (even) ").html (" hello world 2 "); // select the even sub-element of the div whose class is equal to c1 $ (" div. c1: nth-child (odd) ").html (" hello world 3 "); // select an odd sub-element of the div whose class is equal to c1 $ (" div. c1: first-child ").html (" hello world 4 "); // select the first child element of the div whose class is equal to c1 $ (" div. c1: last-child ").html (" hello world 5 "); // select the last child element of the div whose class is equal to c1 $ (" div. c1: only-child ").html (" hello world 6 "); // select a div whose class is equal to c1 and has only one child element });7. Form Selector
<Body> <form id = "form1" action = "#"> <input type = "button" value = "button1"/> <input type = "text" value =" text1 "/> <input type =" text "value =" text2 "/> <textarea rows =" 8 "cols =" 40 "> </textarea> <br/> <input type = "checkbox" name = "chk"/> basketball <input type = "checkbox" name = "chk"/> football <input type = "password"/> <input type = "hidden"/> <br/> <select multiple = "multiple"> <option selected = "selected"> Wuhan </option> <option selected = "selected"> huanggang </option> <option> Macheng </option> </select> <input id = "n" type = "radio" name = "s"/> male <input type = "radio" name = "s"/> female <br/> <input type = "submit"/> <input type = "reset"/> </form> </ body>$ (Function () {// form Element in the form $ ("# form1: input "). val ("hello world 1"); // The input element in the Form $ ("# form1 input "). val ("hello world 1"); $ (": text "). val ("hello world 2"); $ (": password "). val ("hello world 3"); // The male single button is selected $ (": radio [id = n]"). attr ("checked", true); $ (": checkbox [name = chk]"). length; $ (": submmit "). val ("Submit"); $ (": reset "). val ("reset"); $ (": button "). val ("hello world 4"); $ (": hidden "). val ("hello world 5 ");});8. form object attribute filter Selector
<Body> <form id = "form1" action = "#"> <input type = "text" disabled = "disabled" value = "disabled 1"/> <input type = ""text" value = "enable 1"/> <input type = "text" disabled = "disabled" value = "Disable 2"/> <input type = "text" value = "enable 2"/> <input type = "checkbox" name = "chk" value = "basketball" checked = "checked"/> basketball <input type = "checkbox" name = "chk" value = ""/> football <input type = "checkbox" name = "chk" value = "programming" checked = "checked"/> programming <input type = "checkbox" name = "chk" value = "Tourism" checked = "checked"/> tourism <select multiple = "multiple"> <option selected = "selected"> Wuhan </ option> <option selected = "selected"> Huanggang </option> <option> Macheng </option> </select> </form> </body>$ (Function () {$ ("# form1 input: enabled "). val ("hello world 1"); // select the text box that is not disabled in the form $ ("# form1 input: disabled "). val ("hello world 2"); // select the text box that is not disabled in the form $ ("# form1 input: checked "). attr ("checked", false); // select the check box selected in the form $ ("select option [selected]"). each (function () {alert ($ (this ). val ());});});Note when using Selector<body> <div id="div#1">aaaaaaaaaaa</div> <div class="c[1]">bbbbbbbbb</div> <div class="c1"> <div name="div">ccccccccc</div> <div name="div">ddddddddd</div> <div name="div">eeeeeeeee</div> <div class="c1" name="div">fffffffff</div> </div> <div class="c1" name="div">gggggggg</div> <div class="c1" name="div">hhhhhhhh</div></body>$ (Function () {// sometimes there are some special characters in id or class, such, escape with a backslash $ ("# div \ #1" ).html ("hello world 1"); $ (". c \ [1 \] ").html (" hello world 2 "); // Is there any difference between spaces? // if there is a space, select the div (c d e f) Where the name in the div whose class is equal to c1 is equal to the div $ (". c1 [name = div] ").html (" hello world 3 "); // if there is no space, select the div (f g h) that class equals c1 and name equals div $ (". c1 [name = div] ").html (" hello world 4 ");});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
