With the choice of jquery, eat rice rice incense, body times great ...
1. Basic
We know that the most common use of jquery is the selector, we look at the selector in Jqueryapi-basically there are 5 kinds of situations class, ID, Element, *, and there is a multiple selector, here we think about the CSS style
CSS styles also have several conditions: 1. Class style 2.id style 3. Label style,
If there is a class of a AA, then we define the style of AA to be written as. aa{}
If there is a BB ID, then we define the BB style will be written #bb {}
If there is a label <div></div>, then the style we define is written as div{}
If we're going to define all the tag styles, we'll write *{} (which, of course, is not a good shorthand).
If we want to define more than one label, and so on, separate the semicolon for example. AA, #bb, div{} defines class for Aa,id as BB, labeled div style.
We see the top 5 if, in contrast to the 5 basic selectors of jquery
If we want to select a class of a AA, write $ (". AA")
If we want to select a BB ID, write $ ("#bb")
If we want to select the div tag, write $ ("div")
If we're going to choose all that is written as $ ("*")
If we want to select multiple objects, write $ (". AA, #bb, div")
In contrast, found that the basic selector is completely in the CSS syntax in operation, is not very easy?
2 Levels
Now that we know how to write the top 5 selectors, now we're going to consider that if you make a selector of the hierarchy,
First think about what is the hierarchy, in fact, that is the HTML DOM structure of a layer, or the structure of XML hierarchy
So let's open the jquery API and find 4 levels of selectors.
Summed up is a space b,a>b, a+b,a~b of course I'm here just to make a few words,
For example, there is a structure as follows
Copy Code code as follows:
<div>
<div class= "BB" >
<span>1<span><span>2<span>
</div>
<span>3<span>
<div class= "CC" ></div>
<span>4<span>
</div>
We now want to select all span nodes under the AA node with $ ("#aa span")
We now want to select the span of the first layer under the ID AA node is the two 3,4 of text in span, with $ ("#aa >span")
The span that we now want to follow with class BB is the one with 3 text in span, with $ (". Bb+span")
Now we want to use $ (". Bb~span") for all spans after class is BB
To sum up: the first one is the same as the CSS style. Use spaces to represent elements under nodes
The second one uses the > to represent the child nodes, which, unlike the spaces, only function on the first floor.
The third fourth is used to represent the following nodes, except that the + number is used to indicate that all following we need to remember (Space > + ~) Four symbols on it.
3 Simple
We know the basics of selectors and levels of selectors, and sometimes we choose more than one
Copy Code code as follows:
<ul>
<li id= ' AA ' >1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
We want UL Li's first, final (last), cardinality row (odd), even line (even) matching third (EQ (2)), matching greater than 2 rows (GT (1)), matching less than the third row (LT (2)), There are 7 of them. So how do we write this selector, such as matching the first $ ("ul Li:first"), matching the third $ ("UL Li:eq (2)"), the other is not written
Here we think about a link in CSS in several styles of the writing a:hover a:link ... Is it the same?
Okay, so we've seen 7 of these, and we're looking at 3 kinds of APIs,
1:not removes any element syntax that matches a given selector $ ("ul Li:not (#aa)") means to remove the inside of the UL Li containing ID as the element element of AA we use $ ("ul Li") to get 4 Li with $ ("ul Li:not (#aa)") to remove the The first Li only got three
2:header is only used to select H1 H2 H3 ... Such a title
3:animated matches the element that executes the animation
Or to sum up, above these several actually is to have chosen to do at once the screening. Based on the foundation and level.
4 Text Visibility
Continue to look at the API, there are 4 functions in the text, of course, the function is still select the content to do again filter
The above is a filter on the node, now we want to filter the content
Copy Code code as follows:
<div><a>xxiu</a> </div>
<div>xxiu Zhang </div>
<div>zhang </div>
<div></div>
Contains the specified text $ ("Div:contains (Xxiu)") We want the text of the div we selected to contain Xxiu this string
Match empty text $ ("Div:empty") the fourth Div node has nothing under it.
Match the element containing a node matching div $ ("Div:has (A)") with a node
Match is not empty text and 2 exactly the opposite $ ("div:parent") matches the first three Div
To sum up, text matching is mainly done with text (1) and node matching (3), and matching text nodes (4) with no text or nodes (2), two sentences: There is no text or node, what text and nodes
And then we look at the visibility, and the visibility is easy to understand. Visible in two situations: hidden select visible nodes or not visible: visible select invisible nodes, nothing to say
5 Property Selector
Let's take a look at the basic attribute selector first.
Copy Code code as follows:
<div id= "AA" Name= "Zhang" >zhang </div>
<div name= "Zhangxxiu" >asdf</div>
<div id= "BB" name= "Xxiu" >xxiu </div>
As the above node, we want to select the node that contains the ID, if we use the previous method to do it.
With multiple options $ ("#aa, #bb") got what we wanted, but if there are N, that is not to follow very long, we are very lazy, so we have a property selector $ ("Div[id]") to get the result we want, the name of the choice $ ("div[name]") But we just want to get name for Xxiu so we'll use $ ("Div[name = ' Zhang ']")
Get not for Zhang's $ ("Div[name!") = ' Zhang '] ", Get $ (" div[name ^= ' en ') starting with zh ")
At the end of Xxiu $ ("div[name $= ' Zhang ')"), containing the $ ("Div[name *= ' Ang ') of Ang")
Or has an ID and contains Xxiu $ ("Div[id][name *= ' Xxiu ')")
OK, look at the above pair of things, must be a little dizzy, sum up
1 what [id] equals [id= ' AA '] is not equal to what [id!= ' AA ']
2 with what start ^= with what end $= match what *= (exactly the syntax of a regular expression)
3 multiple attribute Selection $ ("Div[id][name *= ' Xxiu ')")
6 child elements
1 match the first $ in the child element ("UL Li:first-child") The Last $ ("ul Li:last-child")
2 matches are unique in child elements $ ("ul Li:only-child")
3 Match for the element $ ("ul Li:nth-child (2)") and $ ("UL Li:eq (1)"), the former is counted starting from 1, the latter is counting from 0
7 Forms
Just look at it. Several forms in input $ (": Text") get a text form $ (": checkbox") Get a check form wait, look at the API and see what's going on.
We can use the previous choice to write $ ("input[type= ' text ')") but it's better to make fewer words than a few, $ (": Text") is it more refreshing to write this way?
8 Form Properties
1 available enabled and unavailable disabled
Find
2 Selected checked and select selected
Good to here all the APIs are over, the selector is basically almost, the poor is to write a few code to play. There is no code in this article, just a summary of the API, if you want to see the code, look at the jquery document
