jquery allows developers to use almost all the selectors from CSS1 to CSS3, as well as jquery's original, sophisticated, and complex selectors. In addition, you can add plug-ins to support the XPath selector, even developers can write their own selector (that is, selector plug-ins, reference to the previous: jquery plug-ins so simple--jquery plug-in mechanism and actual combat). It is jquery's powerful selector feature that makes it easy to get started and attracts a large number of developers, and this article introduces a powerful jquery selector.
jquery Selector Type
The jquery selector is divided into four main categories:
1. Basic Selector
2. Hierarchy Selector
3. Filter Selector
4, the form selector
Because the filter selector content is more, therefore this article only introduces the first two kinds, the next article will introduce the latter two kinds.
A little prep work .
To make it work, create a sample page that contains a variety of <div> and <span> elements and then use the jquery selector to match the elements and adjust their styles.
Sample page code:
Copy Code code as follows:
<! DOCTYPE html>
<title>Demo</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
div,span,p{
width:140px;
height:140px;
margin:5px;
Background: #aaa;
border: #000 1px solid;
Float:left;
font-size:17px;
}
div.mini{
width:55px;
height:55px;
Background-color: #aaa;
font-size:12px;
}
div.hide{
Display:none;
}
</style>
<body>
<div class= "One" id= "one" >
Div with ID One,class as one
<div class= "Mini" >class for mini</div>
</div>
<div class= "One" id= "two" title= "Test" >
Div with ID two,class as test one,title
<div class= "Mini" title= "other" >class Mini,title as Other</div>
<div class= "Mini" title= "test" >class to Mini,title for test</div>
</div>
<div class= "One" >
<div class= "Mini" >class for mini</div>
<div class= "Mini" >class for mini</div>
<div class= "Mini" >class for mini</div>
<div class= "Mini" ></div>
</div>
<div class= "One" >
<div class= "Mini" >class for mini</div>
<div class= "Mini" >class for mini</div>
<div class= "Mini" >class for mini</div>
<div class= "Mini" title= "TESST" >class for Mini,title
</div>
<div style= "Display:none" class= "None" >
Div with style display of none
</div>
<div class= "Hide" >class as Hide div</div>
<div>
div containing input with type hidden
<input type= "hidden" size= "8"/>
</div>
<span id= "Move" > the span element in which the animation is being performed </span>
</body>
Basic Selector
The base selector is the most commonly used selector in jquery and the simplest selector, which looks for DOM elements by element ID, class, and tag name. In a Web page, each ID name can only be used once, and class allows reuse.
The basic selector rules are as follows:
Basic Selector
| Selector |
Description |
Returns |
Example |
| #id |
Matches an element based on the given ID |
A single element |
$ ("#test") select an element with the ID test |
| . class |
Matches the element based on the given class name |
Collection elements |
$ (". Test") Select all elements with test class |
| Element |
Matches the element based on the given element name |
Collection elements |
$ ("P") Select all <p> elements |
| * |
Match all elements |
Collection elements |
$ ("*") Select all elements |
Selector1,selector2,
..., Selectorn |
Match each selector to the meta
To return together after a vegetarian combination |
Collection elements |
$ ("Div,span,p.myclass") Select all <div>,
<span> and owning class for MyClass <p>
A set of elements of a label |
Online Demo Http://demo.jb51.net/js/2012/jquery_demo/jQuery Basic selector example. html
Hierarchy Selector
Hierarchy selectors are a good choice if you want to get specific elements, such as descendant elements, child elements, neighboring elements, and sibling elements, through hierarchical relationships between DOM elements.
The hierarchy selector rules are as follows:
Hierarchy Selector
| Selector |
Description |
Returns |
Example |
| $ ("ancestor descendant") |
Select all of the elements in the ancestor Descendant (descendant) element |
Collection elements |
$ ("div span") Select the <div> in Some <span> elements |
| $ ("Parent>child") |
Select the Child (sub) element under the parent element |
Collection elements |
$ ("Div>span") Select <div> element below Element name is a child element of <span> |
| $ ("Prev+next") |
Select the next element immediately after the Prev element |
Collection elements |
$ (". One+div") Select Class as one Next <div> sibling elements |
| $ ("prev~siblings") |
Select all siblings elements after the Prev element |
Collection elements |
$ ("#two ~div") select element with ID two Back all <div> sibling elements |
Online Demo Http://demo.jb51.net/js/2012/jquery_demo/jQuery Hierarchy selector example. html
In the hierarchy selector, the 1th and 2nd are more commonly used, and the latter two are less likely to be used because they can be replaced in a simpler way in jquery.
You can use the next () method instead of the $ ("Prev+next") selector, that is, $ (". One+div") and $ (". One"). Next ("div") is equivalent.
You can use the Nextall () method instead of the $ ("prev~siblings") selector, that is, $ (". One~div") and $ (". One"). Nextall ("div") is equivalent.
Summary
This article mainly introduces the jquery selector in the basic selector and hierarchy selector, and for each type of selector to give the sample code, hope to be helpful to everyone. I am also a beginner of jquery, welcome everyone to Pat Bricks.
