Learn Jquery with Jquery API Selector_jquery-JS Tutorial-php.cn

With Jquery's selector, you can eat well and feel better...
1. Basics
We know that the most commonly used selector in jquery is the selector. Let's take a look at the selection in jqueryAPI - There are basically 5 situations: class, id, element, *, and a multi-selector. Here we think about how to write css styles
There are also several situations in css styles: 1. Class style 2. ID style 3 .Tag style,
If there is an aa class, then the style we define aa must be written as .aa{}
If there is an id of bb, then the style we define bb must be written #bb{}
If there is a tag

, then the style we define is written as div{}
If we want to define all tag styles, then we write it as *{} (of course, this is not abbreviated Great)
If we want to define multiple tags, use semicolons to separate them. For example, .aa,#bb,div{} will define the style with class as aa, id as bb, and tag as div.
We see the above 5 ifs, compare them with the 5 basic selectors of jquery
If we want to select an aa class, write it as $(".aa")
If we want to select The id of a bb is written as $("#bb")
If we want to select the tag of the div, it is written as $("div")
If we want to select all, it is written as $("*")
If we want to select multiple objects, we can write it as $ (".aa, #bb,div")
By comparison, we find that the basic selector is completely operated according to the syntax of CSS. Isn’t it very easy?
2 levels
Now that we know how to write the above 5 selectors, let’s consider how to make selectors for levels.
First think about what level is, which is actually HTML. The DOM structure is layer by layer, or the structure level of XML
Then we open jquery's Api and find that there are 4 selectors about levels.
To summarize, it is a space b, a>b, a b, a~b. Of course, I am just here to save a few words.
For example, there is the following structure

Copy code The code is as follows:

< span>12

We now want to select all span nodes under the node with id aa, just use $("#aa span")
We now want to select the span with the ID of the first layer under the aa node, which is the span with the text 3 and 4, so use $("#aa >span")
We now want to get The span following class bb is the one with the text 3 in the span, so use $(“.bb span”)
Now if we want to get all the spans after class bb, use $(“.bb~span ”)
To summarize: the first one is written in the same way as the CSS style, using spaces to represent the elements under the node
The second one uses > to represent child nodes. The difference with spaces is that it only works on the first The third and fourth layers of
are used to represent following nodes, but the difference is that the symbol is used to represent the following node, and ~ is used to represent all following nodes. We need to remember (space>~) four symbols That’s it
3 Simple
We know the basic selectors and hierarchical selectors. Sometimes we select multiple ones, such as

Copy code The code is as follows:

We want to get the first (first), last (last), base row (odd), even row (even) of ul li to match the third (eq(2)), match more than 2 rows (gt( 1)), matches less than the third line (lt(2)), there are 7 mentioned here. So how do we write this selector, such as matching the first $("ul li:first"), matching the third $("ul li:eq(2)"), and I won't write the rest
Here we think about several styles of writing a link in css a:hover a:link...are they the same?
Okay, here we have looked at 7 types. Let’s take a look at the API and what are the other 3 types.
1 :not removes all elements matching the given selector. The syntax is the same $(“ul li:not( #aa)") means to remove the elements with ID aa in ul li. We can use $("ul li") to get 4 li. Use $("ul li:not(#aa)") to remove them. The first li only got three
2:header, which is just used to select h1 h2 h3... Such a title
3:animated matches the elements that execute animation
Let’s summarize the above. In fact, it is to screen the ones that have been selected at once. Built on foundations and layers.
4 Text Visibility
Continue to look down at the API. There are 4 functions in the text. Of course, the function is to filter the selected content again
The above is for the nodes. Filter, now we need to filter the content

Copy the code The code is as follows:

xxiu

xxiu zhang

zhang

< /div>

Contains the specified text $("div:contains(xxiu)") We hope that the text of the div we selected contains the string xxiu
Matches empty text $(" div:empty") There is nothing under the fourth div node, so it matches it
Matches the element containing a certain node. Matches the div containing the a node $("div:has(a)")
Matches The non-empty text is just the opposite of 2. $("div:parent") matches the first three divs
To summarize, text matching mainly does text (1) and node matching (3), and matches no text. Or node (2) matches text node (4), two sentences: Is there any text or node, what text and node are there?
Then we look at the visibility. Visibility is easy to understand. It can be seen in two situations: hidden selects visible nodes or invisible: visible selects invisible nodes, nothing to say
5 Attribute Selector
Let’s first look at the most basic attribute selector

Copy code The code is as follows:

zhang 
asdf

xxiu 

Like the node above, we want to select the node containing the id. What should we do if we use the previous method. 
Using the multi-selection method $("#aa,#bb") we got what we want, but if there are N, wouldn't it take a long time? We are all very lazy, so we have attributes. The selector $("div[id]") will get the result we want, select name $("div[name]") But we only want to get the name xxiu, then we use $("div[ name ='zhang']") 
Get $("div[name !='zhang']") that is not zhang, get $("div[name ^='zh']") starting with zh 
$ that ends with xxiu ("div[name $='zhang']"), $ that contains ang ("div[name *='ang']") 
or it has an id and contains xxiu $("div[id][name *='xxiu']") 
Okay, after reading the above pair of things, I must be a little dizzy. Let me summarize 
1 What [id] is equal to [id ='aa'] is not equal to what [id!='aa'] 
2 What starts with ^= What does it end with $= What does it match *= (Is it completely the syntax of regular expressions) 
3 Multiple attributes Select $("div[id][name *='xxiu']") 
6 child elements 
1 match the first $("ul li:first-child") the last $ in the child elements ("ul li:last-child") 
2 matches the only element in the child element $("ul li:only-child") 
3 matches the element $("ul li:nth-child (2)") is the same as $("ul li:eq(1)"). The former starts counting from 1, and the latter starts counting from 0
7 form
Look at it and you will know the number in the input Kind of form $(":text") Get text form$(":checkbox") Get check form Wait and see the API to know what's going on
We can write like this $( using the previous selection method "input[type='text']") But it is better to type less words than to type more words. Isn’t it much more refreshing to write $(":text") like this?
8 Form attributes
1 Available enabled and unavailable disabled 
 Find out 
 2 checked and selected 
 It’s good that all the APIs have been gone through here, and the selector is basically the same. The only difference is to write a few by yourself. Play with the sentence code. There is no code in this article, just a summary of the API. If you want to see the code, just read the Jquery documentation.

Related labels：

jquery Selector

source：php.cn

Previous article：Implementation method of automatically filling in forms in javascript_form effects Next article：Getting Started with Extjs: Dynamic Loading Tree Code_extjs

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn