Jquery selector is the most basic operation. When we use native javascript, we have to spend nine heads and two tigers to choose an object. With Jquery selector, the food is delicious, good health ......
1. Basic
We know that jquery is the most commonly used selector. Let's take a look at the selector in jqueryAPI-there are five situations: class, id, element, *, and a multi-selector, here we want to write the css style
Css styles also have several situations: 1. Class styles 2. id styles 3. Label styles,
If there is an aa class, we need to write the aa style as. aa {}
If there is a bb id, we need to define the bb style as # bb {}
If tags exist
, Then the style we define is written as p {}
If we want to define all the label styles, We will write it as * {} (of course, this is not a good shorthand)
If we want to define multiple tags, use semicolons to separate them, for example. aa, # bb, p {} defines the style of class aa, id bb, and label p.
We can see the above five if, in comparison with the five basic selectors of jquery
If we want to select an aa class, write it as $ (". aa ")
If you want to select a bb id, write it as $ ("# bb ")
If we want to select the p tag, write it as $ ("p ")
If you want to select all, write $ ("*").
If you want to select multiple objects, write $ (". aa, # bb, p ")
By comparison, it is found that the basic selector is fully operated based on the css syntax. Is it very easy?
2 levels
Now that we know how to write the preceding five selectors, let's consider if we do selector on the hierarchy,
First, let's look at what a layer is. In fact, it is about the html dom structure layer by layer, or the XML structure level.
Then we open the jquery Api and find four levels of selectors.
In summary, it is a space B, a> B, a + B, ~ B, of course, I only want to drop a few words here,
For example, there is a structure as follows:
The Code is as follows:
12
3
4
To select all span nodes under the aa node, use $ ("# aa span ")
Now we want to select the span at the first layer of the node with the id of aa, which is two of the 3 and 4 in the span Chinese text, and use $ ("# aa> span ")
We want to use $ (". bb + span") to get the span following the class as bb, that is, the span whose Chinese base is 3 ")
Now we want to use $ (". bb ~ Span ")
To sum up, the first method is to use spaces to represent elements in a node, just like css.
The second uses> to represent the child node. Unlike spaces, it only acts on the first layer.
The third, fourth, is used to represent the following node, but the difference is that the + sign is used to represent the followed node ~ It indicates that we need to remember all that follow (space> + ~ ) Four symbols.
3 simple
We know the basic selector and hierarchy selector. Sometimes we choose multiple
The Code is as follows:
We want to get the first (first), last (last), base (odd), and even (even) of ul li to match the third (eq (2 )), match is greater than two rows (gt (1) and match is smaller than the third row (lt (2). Here we talk about seven. How can we write this selector, for example, if you match the first $ ("ul li: first") and the third $ ("ul li: eq (2)"), the rest will not be written.
Here we want to write a: hover a: link ...... Is it the same?
Well, we have looked at seven types of APIs. What are the other three types of Apis,
1: not removes all element syntaxes that match the given selector $ ("ul li: not (# aa )") remove the element with id aa in ul li. We can use $ ("ul li") to get four li values. $ ("ul li: not (# aa) ") removes the first li and only gets three
2: The header is only used to select h1 h2 h3 ...... Such a title
3: The animation matches the animation elements.
To sum up, the above are actually filtering the selected items at a time. Built on the basics and layers.
4. Text visibility
Continue to look at the api. There are four functions in the text. Of course, the function filters the selected content again.
The above is the filtering of nodes. Now we want to filter the content
The Code is as follows:
Xxiu
Xxiu zhang
Zhang
Contains the specified text $ ("p: contains (xxiu)"). We want the selected p text to contain the xxiu string.
Match null text $ ("p: empty") if there is nothing under the fourth p node, it will match
Match the element containing a node match the p $ ("p: has (a)") containing a node )")
Match the two of non-empty texts. The opposite is true. $ ("p: parent") matches the first three p
To sum up, text matching mainly involves text (1) and node matching (3), and text node matching is not text or node (2). There are two sentences: is there any text or node?
Then let's take a look at the visibility. The visibility is easy to understand and visible in two cases: Select visible nodes or invisible nodes for hidden: Select invisible nodes for visible. There is nothing to say.
5. Attribute Selector
Let's first look at the most basic attribute selector.
The Code is as follows:
Zhang
Asdf
Xxiu
For the above node, we want to select a node with an id. What should we do if we use the previous method.
With the multi-choice method $ ("# aa, # bb"), we get what we want, but if there are N, isn't it going to be a long one? We are all very lazy, so with the attribute selector $ ("p [id]"), we can get the desired result and select the name $ ("p [name]"). but if we only want to get the name xxiu, we will use $ ("p [name = 'zhang']").
Get $ ("p [name! = 'Zhang '] "), and get $ (" p [name ^ = 'zh'] ") Starting with zh.
$ ("P [name $ = 'zhang']") ending with xxiu, including $ of ang ("p [name * = 'ang ']")
Or $ ("p [id] [name * = 'xxiu ']") with an id and containing xxiu
Okay. After reading the above pair of things, it must be a bit dizzy. To sum up
1. What is [id] equal to [id = 'a'] not equal to [id! = 'A']
2 start with what ^ = end with what $ = match with what * = (is it a regular expression syntax)
3 select $ for multiple attributes ("p [id] [name * = 'xxiu ']")
6 child elements
1. Match the first $ ("ul li: first-child") in the child element to the last $ ("ul li: last-child ")
2 matching is unique in sub-element $ ("ul li: only-child ")
3 matching for elements $ ("ul li: nth-child (2)") and $ ("ul li: eq (1)") are the same, the former is counted from 1, and the latter is counted from 0.
7 Form
Let's take a look at the several forms in the input $ (": text") to get the text form $ (": checkbox") to get the check form, and so on. Let's see what's going on with the API.
We can use the preceding method to write $ ("input [type = 'text']"), but it is better to write a few words less than the size. $ (": text ") is writing like this refreshing?
8. Form attributes
1. enabled and disabled are available.
Find
2. checked and selected
All the APIs have been passed here, And the selector is basically the same. The difference is that you can write a few pieces of code to play. There is no code in this article. I just want to summarize the API. If you want to look at the code, you can read the Jquery document.
