Let's say we want to get all the text boxes in the page form, that is:
<input type= "Text" >
You can use two selectors:
The code is as follows:
| The code is as follows | Copy Code |
| $ (' input[type= ' text '] ') $ (' Input:text ') |
|
The first selector is the standard CSS property selector, and the second selector is a custom selector. According to the previous analysis of the sizzle engine, in most modern browsers (browsers that support native Queryselectorall () methods), the first selector is much faster than the second.
Let me give you one more example. Suppose you have the following two jquery queries:
Copy code code as follows:
| The code is as follows | Copy Code |
| $ (' input '). EQ (1) $ (' Input:eq (1) ') |
|
Instance
| code is as follows | copy code |
| <script type=" Text/javascript "src="/ Jquery/jquery.js "></script> <body>
|
The first query finds all the input elements through a standard CSS element selector, and then calls jquery's Eq () method to get the second element in the matching result (the EQ () method has the index parameter calculated from 0). The second query uses a custom pseudo class selector: eq (). By testing, we can see that the first method is much faster than the second method.
JQuery element Selector
JQuery uses the CSS selector to select HTML elements.
$ ("P") select <p> element.
$ ("P.intro") selects all <p> elements of the class= "Intro".
$ ("P#demo") Select the first <p> element of id= "demo".
JQuery Property Selector
JQuery uses an XPath expression to select an element with the given property.
$ ("[href]") selects all elements with the href attribute.
$ ("[href= ' # ']") selects all elements with an HREF value equal to "#".
$ ("[href!= ' # ']") selects all elements with an HREF value that is not equal to "#".
$ ("[href$= '. jpg ']") selects elements with all href values ending with ". jpg".
JQuery CSS Selector
The JQuery CSS selector can be used to change the CSS properties of HTML elements.
The following example changes the background color of all p elements to red:
Instance
$ ("P"). CSS ("Background-color", "Red");
| Grammar | Description |
|---|---|
| $ (This) | Current HTML Element |
| $ ("P") | All <p> elements |
| $ ("P.intro") | <p> Elements of all class= "Intro" |
| $ (". Intro") | All elements of the class= "Intro" |
| $ ("#intro") | Id= the first element of "intro" |
| $ ("ul Li:first") | The first <li> element of each <ul> |
| $ ("[href$= '. jpg ']") | All href attributes with attribute values ending with ". jpg" |
| $ ("Div#intro. Head") | id= Elements of all class= "Head" in the <div> element of "Intro" |
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
