JQuery selector in my life, jQuery selector in my life
Jquery selector 1. Introduction to Jquery Selector
JavaScript is just a piece of code that runs on the client and can be parsed by the client browser. It has nothing to do with java. JavaScript is short for JS. JQuery is an encapsulation of JS. More than one JS Code is encapsulated on the market.
Ii. Advantages of jquery Selector
1. Simple syntax, $ () function
2. Supports CSS1.0 to CSS3.0 Selector
3. Sound Processing Mechanism
Iii. jquery selector details 3.1 basic selector:The Jquery selector is basically the same as the css selector. It inherits the syntax and functions of the CSS selector and consists of element tag names, classes, IDs, and multiple selectors, you can use the basic selector to find most page elements,
The basic selector includes the tag selector, class selector, ID selector, Union selector, intersection selector, and global selector. This type of selector is also the most frequently used in Jquery.
1. ID selector:Jquery can use the CSS selector to operate tag elements in a webpage. If you want to search for an element by using an ID, you can use the selector in the following format: $ ("# myid ");
Returned value: single element
<Body> <div id = "mydiv"> div content </div> </body>
Set the background color for the div whose id is mydiv:
$("#myid").css("background","red");
2. Tag Selector
Match elements by Tag Name
Returned value: Element Set
<Body> <p> I am a p tag </p> </body>
Add background color to the p tag
$("p").css("background","blue");3. class selector
Matches the element based on the given class.
Find all elements whose classes are "myClass.
Returned value: Element Set
<body><div class="notMe">div class="notMe"</div><div class="myClass">div class="myClass"</div><span class="myClass">span class="myClass"</span></body>
Change the background color of the. myclass element.$(".myClass").css("background","blue");4. Union Selector
Selector1, selector2,... selectorN combines the elements matched by each selector and returns the results together.
Returned value Element Set
<Body> <p> I am a p tag </p> <span id = "myspan"> </span>Select All p tags and elements whose IDs are myspan and h1 tags.
$ ("P, # myspan, h1 "); // return <p> my tags </p> <span id = "myspan"> </span> 5. Intersection selector:
Element. class or element # id matches a certain element or element set of a specified class or id (if the element returns an id specified on the same page, it must be a single element; if the element of the class is specified, it can be a single element or a set of elements)
Returned value: a single element or a set of elements.
<Body> <p> I am a p tag.<Span id = "myid"> I am a span </span></p> </body>Select the element whose id is myid in the p tag.
$ ("P # myid"); Return Value: <span id = "myspan"> </span>
6. Global SelectorMatch All elements
Return Value: Set Element
<Body> <p> I am a p tag </p> <span id = "myspan"> </span>Change the background color of all elements
$ ("* Background .css (" background "," blue ");
3.2 Level selector:There are four levels of selectors in Jquery: descendant selector, sub-selector, adjacent selector and peer selector. The most common ones are descendant selector and sub-selector.
1. Descendant SelectorIn actual application development, multiple elements are often nested together to form a complex hierarchy. Through the hierarchy selector, you can quickly locate one or more elements at a level, the ance desc selector is one of them. Its calling format is as follows:
$ ("Ance desc ")
The ance desc parameter is a space-separated parameter. The ance parameter (abbreviated as the ancestor) indicates the parent element. The desc parameter (abbreviated as the descendant) indicates the child element, including the Child element and the sun element. Both parameters can be obtained by selector. For example, if the family surname "div" exists in several generations and the family name contains "span", you can use the ance desc selector to locate these people.
1. $ ("ancestor descendant ")Change the background color of all <div> in <body>:
<! -- Compile JQuery code --> <script type = "text/javascript" >$ ("document "). ready (function () {$ ("body div" ).css ("background-color", "# bbffaa "); // change the background color of <body> all <div>.}) </script>2. $ ("parent> child ")Change the background color of the <body> Inner <div> element:
$ ("Body> div" ).css ("background-color", "# bbffaa"); // you can change the background color of the <body> Inner <div> element.3. $ ("prev + next ")Change class to the background color of the next <div> peer element of one :(!!! Next peer element, equivalent to the next () method)
$ (". One + div" ).css ("background-color", "# bbffaa"); // change the background color of the next <div> peer element whose class is one.It can also be written as follows:
$(".one").next("div").css("background-color","#bbffaa");4. $ ("prev ~ Siblings ")Change the background color of all <div> peer elements following the element whose id is two :(!!! All later peer elements, equivalent to the nextAll () method)
$("#two ~ div").css("background-color","#bbffaa");Equivalent:
$("#two").nextAll("div").css("background-color","#bbffaa");3.3 filter SelectorThe filter selector mainly uses specific filtering rules to filter out the required DOM elements.Pseudo-class selectorThe syntax is the same, that is, the selector starts with a colon.
1: eg:
Change the background color of the first and last <div> Elements
<script type="text/javascript"> $("document").ready(function(){ $("div:first").css("background-color","#bbffaa"); $("div:last").css("background-color","#bbffaa"); }) </script>(2) Change the background color of the <div> element whose class is not one.
$("div:not(.one)").css("background-color","#bbffaa");(3) change the background color based on the index (!! Index value starts from 0 !!)
$ ("Document "). ready (function () {$ ("div: eq (3)" ground .css ("background-color", "# bbffaa "); // change the background color of the <div> element whose index value is equal to 3 $ ("div: gt (3)" ).css ("background-color", "red "); // change the background color of the <div> element whose index value is less than 3 $ ("div: lt (3)" ..css ("background-color", "blue "); // change the background color of the <div> element whose index value is greater than 3 })(4) change the background color of the element being animated
$ (": Animated" ).css ("background-color", "# bbffaa"); // Changes the background color of the element being animated.(5) change the background color of the element currently obtaining the focus
<! DOCTYPE html> 2. Content Filtering Selector(1) change the background color of the <div> element with the class as the mini element.
<Script type = "text/javascript"> $ ("document "). ready (function () {$ ("div: has ('. mini ') ").css (" background-color "," # bbffaa "); // change the background color of the <div> element containing the class mini element}) </script>(2) Change the background color of the <div> element containing child elements (including text elements)
$ ("Div: parent" ).css ("background-color", "# bbffaa"); // Changes the background color of the <div> element containing child elements (including text elements ).3. Visibility filter SelectorIn the visibility selector, you must note that the selector: hiddden includes not only elements whose style attribute display is "none, it also includes elements such as <input type = "hidden"/> and visibility: hidden.
4. Attribute filter SelectorEg:
(1) change the background color of the <div> element containing the title attribute.
$ ("Div [title]" ).css ("background-color", "# bbffaa"); // Changes the background color of the <div> element containing the attribute title.
(2) Change the background color of the <div> element whose property title value is equal to "test"
$ ("Div [title = test]" ).css ("background-color", "# bbffaa "); // change the background color of the <div> element whose attribute title value is equal to "test"
(3) change the background color of the <div> element whose attribute title value is not equal to "test"
$ ("Div [title! = Test] "background .css (" background-color "," # bbffaa "); // change the background color of the <div> element whose title value is not equal to" test"
(4) change the background color of the <div> element whose attribute title value starts with te
$ ("Div [title ^ = te]" ).css ("background-color", "# bbffaa "); // change the background color of the <div> element whose attribute title value starts with te
(5) change the background color of the <div> element whose attribute title value ends with est.
$ ("Div [title $ = est]" ground .css ("background-color", "# bbffaa "); // change the background color of the <div> element whose attribute title value ends with est
(6) change the background color of the <div> element whose attribute title value contains "es"
$ ("Div [title * = es]" background .css ("background-color", "# bbffaa "); // change the background color of the <div> element whose attribute title value contains "es"
(7) change the background color of the <div> element containing the property id and the property title value containing "es"
$ ("Div [id] [title * = es]" ).css ("background-color", "# bbffaa"); // change the property id, and the attribute title value contains the background color of the <div> element of "es ".5. Child element filter Selector
Note: The index starts from 1.
: Nth-child () selector is a commonly used child element filter selector. The detailed functions are as follows:
(1): nth-child (even): select an element with an even index value under each parent element.
(2): nth-child (odd): select an element with an odd index value under each parent element.
(3): nth-child (2): select the element whose index value is 2 under each parent element.
(4): nth-child (3n): select the element whose index value under each parent element is a multiple of 3 (n starts from 1)
(5): nth-child (3n + 1): select the element whose index value is (3n + 1) for each parent element (n starts from 1)
6. form object attribute filter SelectorHTML code:
<! DOCTYPE html>Eg:
(1) change the value of the <input> element available in the form.
1 <script type = "text/javascript"> 2 $ ("document "). ready (function () {3 $ ("input: enabled "). val ("changed here !!! "); 4}) 5 </script>(2) obtain the number of selected multiple selection boxes.
<Script type = "text/javascript"> $ ("document "). ready (function () {$ (": checkbox "). click (countChecked); // the related knowledge points here are described in section 4 function countChecked () {var n = $ ("input: checked "). length; // obtain the number of selected multiple boxes $ ("div" ).eq(0).html ("<strong>" + n + "selected! </Strong> "); // enter the result at the first div} countChecked (); // call it when you enter the page.}) </script>Effect:
(3) obtain the selected content from the drop-down list.
<Script type = "text/javascript"> $ ("document "). ready (function () {$ ("select "). change (function () {var str = ""; $ ("select: selected "). each (function () {str + = $ (this ). text () + "," ;}); $ ("div" ).eq(1).html ("<strong> you selected: "+ str +" </strong> ");}). trigger ('change'); // trigger ('change') indicates that onchange is executed immediately after the select statement is loaded. // It can also be used. change () instead .}) </script>Now, let's talk about jQuery selector. If you have any suggestions, please leave me a message. If you have any questions about jQuery, please add my QQ number: 1615871508. We can discuss it together. Thank you for reading.
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
