Abstract: Today I would like to share with you the five selectors of JQuery in detail.
This article is from huawei cloud community “[JQuery framework] five selectors” family bucket “details!! , original author: Little Grey Ape.
How to use JQuery’s five selectors Functionally, it can filter element tags with similar characteristics, which is very useful when we want to centralize or unify operations on elements with similar characteristics.
Selector basic operation
First we need to understand the basic operation used by the selector, which can be divided into three steps:
1. Event binding
The use of the selector requires the binding of events, generally we can bind the event to a button, click the button to trigger the corresponding event response.
2. Entry function
In jQuery, the event binding is done in an entry function. The syntax for creating an entry function is as follows:
$(function(){
});
Copy the code
Details are as follows:
Window.onload can only be defined once, and if it is defined more than once, the later one overwrites the previous one
The $(function) method can be defined more than once without overwriting the previous one
3. Style control
After we bind the event of the selector, we can control the style of the element through the selector, which is usually represented by CSS methods that modify the style of the element.
Take a look at an example of a basic operation:
<script type="text/javascript"> $(function () {$("#b2").click(function f() { $("div").css("backgroundColor","yellow"); }); }); </script>Copy the code
Basic selector
1. Label selector
Tag selectors, also known as element selectors,
Syntax: $(” HTML tag name “)
Gets all elements that match the tag element name
Id ="b1" $("#b1").click(function f() {$("div").css("backgroundColor","yellow"); });Copy the code2. Id selector
Syntax: $(” #id attribute value “)
Gets the element that matches the specified id attribute value
Id ="b2" $("#b2").click(function () {$("#one").css("backgroundColor","pink"); });Copy the codeClass selector
Syntax: $(“.class property selector “)
Gets the element that matches the specified class attribute value
Id ="b3" $("#b3").click(function () {$(".mini").css("backgroundColor","red"); });Copy the code4. Union selector
Syntax: $(” selector 1, selector 2….” )
Gets all elements selected by multiple selectors
Id ="b4" $("#b4").click(function () { $("span,#two").css("backgroundColor","blue"); });Copy the codeLevel selector
1. Descendant selector
Syntax: $(” A B “)
Action: Select all B elements inside element A
/ / descendant selectors / / change the < body > all < div > the background color to red id = "b1" $(" # b1 "). Click (function () {$(" body div "). The CSS (" backgroundColor ", "pink"); });Copy the code2. Child selector
Syntax: $(” A > B “)
Function: Selects all B child elements inside element A
/ / child selector / / change the < body > wife < div > the background color to red id = "b2" $(" # b2 "). Click (function () {$(" body > div "). The CSS (" backgroundColor ", "red"); });Copy the code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < HTML > <head> <title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src=".. /jquery-3.3.1.min.js"></script> <style type="text/ CSS "> div,span{width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> <script type="text/javascript"> $(function () {// descendant selector // change the background color of all <div> in <body> to red $("#b1").click(function () { $("body div").css("backgroundColor","pink"); }); $("#b2").click(function () {$("body > div").css("backgroundColor","red"); }); }); </script> </head> <body> <input type="button" value=" save "class="mini" name="ok" class="mini" /> <input type="button" Id ="b1"/> <input type="button" value=" id="b2"/> < H1 > There is a miracle called persistence </h1> < H2 > Confidence comes from hard work </ H2 > <div id="one"> ID is one </div> <div id="two" class="mini" > ID is two class is mini <div Class ="mini" > is mini</div> </div> <div class="one" >class is one <div class="mini" >class is mini</div> <div Class ="mini" > is mini</div> </div> <div class="one"> class is one <div class="mini01" >class is mini01</div> <div Class ="mini" >class is mini</div> <span class="spanone"> span </span> </body> </ HTML >Copy the codeProperty selector
1. Property name selector
Syntax: $(” A[attribute name] “)
Action: Contains a selector for the specified property
Id ="b1" $("#b1").click(function () {$("div[title]").css("backgroundColor","pink"); });Copy the code2. Property selector
Syntax: $(” A[attribute name = ‘value’] “)
Action: contains a selector for the specified property equal to the specified value,
/ / title attribute values is equal to the test of div element background color to red "id =" b2 "$(" # b2"). Click (function () {$(" div [title = 'test'] "). The CSS (" backgroundColor ", "red"); });Copy the codeIn this selector, we can expand it according to its functions. For example, we can add:
“=” into “! = “is the selector that specifies that the attribute name is not equal to the specified value
"Id ="b3" $("#b3").click(function () { $("div[title!='test']").css("backgroundColor","red"); });Copy the codeAccording to the rules for using regular expressions:
Replacing “=” with “^=” specifies the selector whose attribute name begins with the specified value
/ / title attribute values begin with te div elements of the background color to red "id =" b4 "$(" # b4"). Click (function () {$(" div [title ^ = 'te'] "). The CSS (" backgroundColor ", "red"); });Copy the codeReplacing “=” with “$=” specifies the selector whose attribute name ends in the specified value
"Id ="b5" $("#b5").click(function () { $("div[title$='est']").css("backgroundColor","red"); });Copy the codeReplacing “=” with “*=” specifies the selector that contains the specified value in the property name
/ / title attribute values contain es div element background color to red "id =" b6 "$(" # b6). Click (function () {$(" div [title * = 'es']"). The CSS (" backgroundColor ", "red"); });Copy the code3. Compound property selector
Syntax: $(” A[attribute name = ‘value’][]…” )
Action: A selector that contains multiple attribute conditions
// Select the div element with the attribute ID, "Id ="b7" $("#b7").click(function () { $("div[id][title*='es']").css("backgroundColor","red"); });Copy the codeFour, filter selector
1. First element selector
Grammar: $(” A: “first)
Gets the first element of the selected element
Function () {$("div:first").css("backgroundColor","red"); // change the backgroundColor of the first div element to red. });Copy the code2. Tail element selector
Grammar: $(” A: the last “)
Gets the last element of the selected element
// change the backgroundColor of the last div element to red" id="b2" $("#b2"). Click (function () {$("div:last"). });Copy the codeNon-element selectors
Grammar: $(” not “(the selector))
Action: Does not include the element with the specified content
// change the background color of all div elements whose class is not one to red "id="b3 $("#b3").click(function () { $("div:not(.one)").css("backgroundColor","red"); });Copy the code4. Even selector
Grammar: $(” A: even “)
Returns the selected elements with an even index, counting from 0
// change the backgroundColor of div elements to red" id="b4" $("#b4").click(function () {$("div:even").css("backgroundColor","red"); });Copy the code5. Odd number selector
Grammar: $(” A: odd “)
Returns the selected elements with an odd index, counting from 0
"Id ="b5" $("#b5").click(function () {$("div:odd").css("backgroundColor","red"); });Copy the code6, equal to index selector
Grammar: $(” A: eq (index) “)
Gets the element of the selected element with the specified index
"Id ="b7" $("#b7").click(function () {$("div:eq(3)").css("backgroundColor","red"); });Copy the codeGreater than index selector
Grammar: $(” A: gt (index) “)
Gets the selected element that is greater than the specified index
$("div:gt(3)").click(function () {$("div:gt(3)").css("backgroundColor","red"); });Copy the code8. Less than the index selector
Grammar: $(” A: lt (index) “)
Returns the selected element that is smaller than the specified index
$("div:lt(3)").click(function () {$("div:lt(3)").css("backgroundColor","red"); });Copy the code9. Title picker
Grammar: $(” : the header “)
Function: Get the title (H1 ~ H6) element, fixed writing method
/ / change the background color of the title of all elements to the red "id =" b9 "$(" # b9"). Click (function () {$(" : the header "). The CSS (" backgroundColor ", "red"); });Copy the codeForm filter selector
1. Available element selectors
Grammar: $(” A: enabled “)
Gets available elements from the selected element
$("#b1").click(function () {// Use the val() method to change the value of the available <input> element in the form. $("input[type='text']:enabled").val("aaa"); });Copy the codeElement selectors are not available
Grammar: $(” A: disabled “)
Gets an unavailable element from a selected element
$("#b2").click(function () {// Use val() to change the value of the <input> element "id="b2" $("#b2"). $("input[type='text']:disabled").val("bbb"); });Copy the code3. Select the selector
Grammar: $(” A: checked “)
Gets radio/checkbox selected elements
$("#b3").click(function () {var lengths = lengths $("input[type='checkbox']:checked").length; alert(lengths); });Copy the code4. Select the selector (drop down box)
Grammar: $(” A: selected “)
Gets the element selected in the drop – down box
Id ="b4" $("#b4"). Click (function () {var selects = $("#job > option:selected").length; alert(selects) });Copy the codeOne thing to note here: The role of the above two selected selector object is different, the role of the first selected selector is radio/check box, and the role of the second selector selected object is a drop-down box, at the same time for the second selector, the role of its content is included in a drop-down box options, so when use should use “>” to specify, For details, see the following example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < HTML > <head> <title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src=".. /js/jquery-3.3.1.min.js"></script> <style type="text/ CSS "> #job{margin: 20px; } #edu{ margin-top:-70px; } </style> <script type="text/javascript"> $(function () { $("#b3").click(function () { var lengths = $("input[type='checkbox']:checked").length; alert(lengths); }); Id ="b4" $("#b4"). Click (function () {var selects = $("#job > option:selected").length; alert(selects) }); }); </script> </head> <body> <input type="button" value=" save "class="mini" name="ok" class="mini" /> <input type="button" Id ="b3"/> <input type="button" value=" jQuery length" Id ="b4"/> <br><br> <br><br> <br><br> <input type="checkbox" name="items" value=" Value ="IT" >IT <input type="checkbox" name="items" value=" finance "> Finance <input type="checkbox" name="items" value=" Management" > Management <br><br> <input type="radio" name="sex" value=" male "> male <br><br> <select Name ="job" id="job" multiple="multiple" size=4> <option> programmer </option> <option> Intermediate programmer </option> <option> Advanced programmer </option> <option> System analyst </option> </select> <select name="edu" id="edu"> <option> Undergraduate </option> < Option > Doctor </option> Master of < option > < option > < option > college < option > < / select > < br / > < / body > < / HTML >Copy the codeClick to follow, the first time to learn about Huawei cloud fresh technology ~