jquery Learning Note--jquery General Selector

A Simple Selector
When using the JQuery selector, we must first use the "$ ()" function to wrap our CSS rules. and
After the CSS rule is passed inside the jquery object as a parameter, the jquery object that contains the corresponding element in the page is returned.
We can then act on this obtained DOM node.
#box {
CSS rules using the ID selector
color:red;
Turns the element with ID box color red
}
In the JQuery selector, we use the following method to get the same result:
$ (' #box '). CSS (' Color ', ' red ');
Gets the DOM node object and adds the behavior
In addition to the ID selector, there are two basic selectors: the element label signature and the class:
Selector Selector
CSS mode
JQuery mode
Describe
Element name
div {}
$ (' div ')
Gets the DOM object for all DIV elements
Id
#box {}
$ (' #box ')
Gets a DOM object with the ID of the box element
Classes (Class)
. box{}
$ ('. Box ')
Get all DOM objects that are class box
$ (' div '). css (' Color ', ' red ');
Element selector, returning multiple elements
$ (' #box '). CSS (' Color ', ' red ');
ID Selector, returning a single element
$ ('. Box '). CSS (' Color ', ' red ');
Class selector, returning multiple elements
To prove that the ID returns a single element, and that the element signature and class return more than one, we can pick
Use a property length or size () method that comes with the jQuery core to see the number of elements returned.
Alert ($ (' div '). Size ());
3 x
Alert ($ (' #box '). Size ());
1, two blind in the back.
Alert ($ ('. Box '). Size ());
3 x
Similarly, you can also use the JQuery core properties directly:
Alert ($ (' #box '). length);
1, blind at the back.
Warning: There is a particular problem to note that the ID is only allowed on the page once, we generally ask developers to
Abide by and keep this rule. But if you appear in the page three times and use styles in CSS, then these three meta
will also perform the effect. But if you want to do this in jQuery, you're going to have a problem with blindness. So, open
The sender must develop a good adherence to the habit of using only one ID on a single page.
$ (' #box '). CSS (' Color ', ' red ');
Only the first ID turns red, followed by two blind
JQuery selectors are written in much the same ways as CSS selectors, except that they are functionally different. CSS Find Element
After adding a single style, JQuery adds action behavior. The most important point is that the CSS adds a sample
, the advanced selector is incompatible with some browsers, while the JQuery selector adds CSS styles
You don't have to worry about this.
#box > P {
CSS Sub-selectors, IE6 not supported
color:red;
}
$ (' #box > P '). CSS (' Color ', ' red ');
JQuery Sub-selector, compatible with IE6
The JQuery selector supports all the rules of CSS1, CSS2, and supports some practical rules for CSS3, while it also has
A few unique rules. So, for developers who have mastered CSS, learning JQuery selectors is almost 0 cost.
The jquery selector, while acquiring the node object, is not only simple, but also has built-in fault tolerance, so as to avoid JavaScript
So every time the acquisition of the node needs to be effectively judged.
$ (' #pox '). CSS (' Color ', ' red ');
There is no element with ID pox and no error
document.getElementById (' pox '). Style.color = ' red ';
An error.
Because JQuery is internally judged, and the native DOM node acquisition method is not judged, the
A mistake has been made, and the native method can be so judged to solve the problem:
if (document.getElementById (' pox ')) {
First determine if the object exists
document.getElementById (' pox '). Style.color = ' red ';
}
So how do we determine if there are any missing elements that we call with JQuery? Because
Returning a JQuery object for itself may result in the presence or absence of a nonexistent element and will return true.
if ($ (' #pox '). Length > 0) {
Determine the number of elements to be included
$ (' #pox '). CSS (' Color ', ' red ');
}
In addition to this approach, it can be judged by the way it is converted to DOM objects, for example:
if ($ (' #pox '). Get (0)) {} or if ($ (' #pox ') [0]) {}
The DOM object can also be obtained by array subscript
Two Advanced Selector
In the simple selector, we learned about the three most basic selectors: element tag name, ID, and class. So
In addition to the base selector, there are some advanced and sophisticated selectors that allow us to select elements more precisely.
Selector Selector
CSS mode
JQuery mode
Describe
Group Selector
Span,em,.box {}
$ (' Span,em,.box ')
Gets the DOM object for multiple selectors
Descendant Selector
Ul Li a {}
$ (' ul Li a ')
Get multiple DOM objects that go back
A wildcard selector
* {}
$ (' * ')
Gets the DOM object for all element labels
Group Selector
span, em,. Box {
Multiple selectors add red font
color:red;
}
$ (' span, em,. Box '). CSS (' Color ', ' red ');
Group Selector JQuery Mode
Descendant Selector
UL Li a {
Add a red font to the elements traced back to the layer
color:red;
}
$ (' ul Li a '). css (' Color ', ' red ');
Group Selector JQuery Mode
A wildcard selector
* {
Add red font to all elements of the page
color:red;
}
$ (' * '). CSS (' Color ', ' red ');
A wildcard selector
At present, six kinds of selectors, in practical applications, we can be flexible collocation, so that the selector more accurate
and quick:
$ (' #box p, ul li * '). CSS (' Color ', ' red ');
Multiple selectors are combined
Warning: In actual use, the wildcard selector is generally not used much, especially in the chase match, such as: $ (' * '),
This method of use is inefficient, affects performance, and suggests that it may be less useful.
There is also a selector that can indicate an element prefix in the ID and Class (classes), such as:
$ (' Div.box ');
The qualification must be. box element get must be div
$ (' P#box div.side ');
Ditto
Class has a special pattern, that is, the same DOM node can declare multiple classes (class). So for this
Format, we have multiple class selectors that can be used, but be aware of the difference between the class group selector and.
. box.pox {
Dual class selector, IE6 exception occurred
color:red;
}
$ ('. Box.pox '). CSS (' Color ', ' red ');
Compatible with IE6, resolves exceptions
Multi-class selectors are required to have a DOM node with multiple classes at the same time, using these classes for precise qualification.
The group class selector is just a selection of multiple classes.
$ ('. box,. Pox '). CSS (' Color ', ' red ');
Add a comma, experience the difference
Warning: When constructing selectors, there is a general optimization principle: only the necessary certainty is pursued. When selector filters
The more complex it is, the longer it takes for the selector engine within jQuery to process strings. Like what:
$ (' Div#box ul Li A#link ');
Let JQuery internally handle unnecessary strings
$ (' #link ');
The ID is unique, the accuracy is constant, the performance is improved
Three Advanced Selector
In the front we learn six of the most conventional selectors, generally through these six kinds of selectors can basically solve all
Problem with DOM node object selection. But on many special elements, such as the elements of a parent-child relationship, the meta-
Elements, special attributes, and so on. In the early use of CSS, because IE6 and other low-version browsers are not supported, so
The use of these advanced selectors is also not universal, but as JQuery is compatible, these selectors are used more often
to the higher.
Hierarchy Selector
In the hierarchy selector, in addition to the descendant selector, the other three advanced selectors do not support IE6, and JQuery
is compatible with IE6.
Descendant Selector
$ (' #box p '). CSS (' Color ', ' red ');
Fully compatible
JQuery provides an equivalent find () method for descendant selectors
$ (' #box '). Find (' P '). CSS (' Color ', ' red ');
Equivalent to the descendant selector
Child selector, after grandson blindness
#box > P {
IE6 not supported
color:red;
}
$ (' #box > P '). CSS (' Color ', ' red ');
Compatible with IE6
JQuery provides an equivalent children () method for a sub-selector:
$ (' #box '). Children (' P '). CSS (' Color ', ' red ');
and sub-selectors equivalent
Selector Selector
CSS mode
JQuery mode
Describe
Descendant Selector
Ul Li a {}
$ (' ul Li a ')
Get multiple DOM objects that go back
Child Selector
div > P {}
$ (' div p ')
Get only multiple DOM objects for a child class node
Next Selector
div + P {}
$ (' div + P ')
Gets only one sibling DOM object after a node
Nextall Selector
div ~ P {}
$ (' div ~ p ')
Get all sibling DOM objects after a node
Next selector (next sibling node)
#box + P {
IE6 not supported
color:red;
}
$ (' #box +p '). CSS (' Color ', ' red ');
Compatible with IE6
JQuery provides an equivalent method for next selector next ():
$ (' #box '). Next (' P '). CSS (' Color ', ' red ');
Equivalent to the next selector
Nextall selector (all subsequent sibling nodes)
#box ~ P {
IE6 not supported
color:red;
}
$ (' #box ~ P '). CSS (' Color ', ' red ');
Compatible with IE6
JQuery provides an equivalent method for the Nextall selector Nextall ():
$ (' #box '). Nextall (' P '). CSS (' Color ', ' red ');
Equivalent to the Nextall selector
Hierarchy selectors are required for the hierarchy of nodes, such as sub-selectors, only child nodes can be selected,
Neither grandson node nor the heavy grandson node can be selected. Next and Nextall selectors, must be the same level of the latter one
And the latter N, not at the same level can not be selected.
In the four methods of Find (), Next (), Nextall (), and children (), if you do not pass a parameter, it is equivalent to passing
"*", that is, any node, we do not recommend this, not only to affect performance, but also because of poor accuracy may be in the complex
HTML structure produces weird results.
$ (' #box '). Next ();
Equivalent to $ (' #box '). Next (' * ');
To complement these three modes of the advanced selector, JQuery also provides a richer way to select elements:
$ (' #box '). Prev (' P '). CSS (' Color ', ' red ');
Sibling previous Element
$ (' #box '). Prevall (' P '). CSS (' Color ', ' red ');
Sibling all the above elements
The Nextuntil () and Prevunitl () methods are all nodes below or above the selected sibling, selecting all non-specified
element to stop selection once it encounters the specified element.
$ (' #box '). Prevuntil (' P '). CSS (' Color ', ' red ');
The non-specified element is selected on the sibling, and is stopped when encountered
$ (' #box '). Nextuntil (' P '). CSS (' Color ', ' red ');
The non-specified element is selected at the same sibling, and is stopped when encountered
The siblings () method integrates exactly the effects of the Prevall () and Nextall () two functions, and all the elements that are adjacent to each other
To select:
$ (' #box '). Siblings (' P '). CSS (' Color ', ' red ');
All elements in the same sibling are selected
Equivalent to the following:
$ (' #box '). Prevall (' P '). CSS (' Color ', ' red ');
All elements on a sibling are selected
$ (' #box '). Nextall (' P '). CSS (' Color ', ' red ');
All elements under sibling selection
Warning: Must not be written as "$ (' #box '). Prevall (' P '). Nextall (' P '). CSS (' Color ', ' red ');" This form, because
Prevall (' P ') returns all specified elements that are already above, and then Nextall (' P ') to select all the specified element below, which
The sample must be wrong.
In theory, JQuery provides methods for find (), Next (), Nextall (), and children () to run faster than the
Use the advanced selector. Because the algorithms they implement are different, the advanced selector is to parse the string to get the node pair
, and JQuery provides a method that is generally a single selector and can be obtained directly. But this difference in speed,
There is not much practicality for client-side scripting, and the difference in speed depends on the browser and the selected elements
Capacity. For example, if the IE6/7 does not support the Queryselectorall () method, the "Sizzle" engine will be used and the speed will be slow.
Other browsers will be fast. Interested to know this method and this engine.
Selector Speed Analysis:
This is the quickest, using native getElementById, ByName, Bytagname and Queryselectorall ()
$ (' #box '). Find (' P ');
JQuery automatically turns this statement into $ (' #box '). Find (' P '), which results in a certain performance penalty. It's faster than the fastest
The form was slow 5%-10%
$ (' P ', ' #box ');
Within JQuery, this statement uses the $.sibling () and JavaScript nextSibling () methods, one after the other
Calendar node. It's about 50% slower than the fastest form.
$ (' #box '). Children (' P ');
JQuery internally uses the Sizzle engine to handle a variety of selectors. The Sizzle engine is selected from right to left,
So the statement is to select P first and then filter out the parent element #box, which causes it to be about slower than the fastest form
70%
$ (' #box > P ');
This statement is the same as the previous one. However, the previous bar selects only the immediate child element, which can be
Select a multilevel sub-element, so it's slower, probably 77% slower than the fastest form.
$ (' #box p ');
Within JQuery, this statement is converted to $ (' #box '). Find (' P '), 23% slower than the fastest form.
$ (' P ', $ (' #parent '));
In all, the quickest is the find () method, and the slowest is the advanced selector of $ (' #box p '). If you start to
$ (' #box ') for assignment, then jQuery caches its variables, and the speed is further increased.
var box = $ (' #box ');
var p = box.find (' P ');
Note: Which option should we recommend? In fact, the use of which is similar. Here, we recommend the use of
The method provided by JQuery. Because the method is faster than the advanced selector, and its flexibility and expansion
Higher than the advanced selector. Use "+" or "~" literally without Next and nextall more semantically, more clearly
The method of JQuery is richer, providing relative prev and prevall. After all, JQuery is a programming language that requires
Flexibility to split and combine selectors, while using CSS mode is too inflexible. So, if JQuery provides a separate
method to replace the functionality of some selectors, we recommend that you use a separate method first.
Property Selector
CSS mode
JQuery mode
Describe
A[title]
$ (' a[title] ')
Gets the DOM object that has this property
A[TITLE=NUM1]
$ (' a[title=num1] ')
Gets the DOM pair with this property = value of this property
Like
A[title^=num]
$ (' a[title^=num] ')
That has this property and the beginning property value matches.
DOM Object
A[title|=num]
$ (' a[title|=num] ')
That has this attribute and is equal to the property value or the beginning of the genus
The sex value matches the DOM object followed by a "-" sign
A[title$=num]
$ (' a[title$=num] ')
That has this property and the End property value match.
DOM Object
A[title!=num]
$ (' a[title!=num] ')
That has this property and does not equal the value of the property.
DOM Object
A[title~=num]
$ (' a[title~=num] ')
Gets the attribute with this property and the property value is a space
A segmented list of DOM pairs that contain property values
Like
A[title*=num]
$ (' a[title*=num] ')
Gets a property that has this property and that the attribute value contains a specified
A string of DOM objects
A[BBB][TITLE=NUM1]
$ (' a[bbb][title=num1] ')
Gets the DOM that has this property and the property value matches
Object
The property selector also does not support IE6, so it is also non-mainstream if the CSS interface is to be compatible with the lower version. But JQuery
But you don't have to think about it.
This property is selected
A[title] {
IE6 not supported
color:red;
}
$ (' a[title] '). CSS (' Color ', ' red ');
Compatible with IE6
With this attribute = The value of this property.
A[TITLE=NUM1] {
IE6 not supported
color:red;
}
$ (' a[title=num1] '). CSS (' Color ', ' red ');
Compatible with IE6
Selected with this attribute and the beginning property value match
A[title^=num] {
IE6 not supported
color:red;
}
$ (' a[title=^num] '). CSS (' Color ', ' red ');
Compatible with IE6
Select with this attribute and equal to the property value or Start property value match followed by a "-" sign
A[title|=num] {
IE6 not supported
color:red;
}
$ (' a[title|= ' num "]). CSS (' Color ', ' red ');
Compatible with IE6
Selected with this attribute and the End property value match
A[title$=num] {
IE6 not supported
color:red;
}
$ (' a[title$=num] '). CSS (' Color ', ' red ');
Compatible with IE6
Select the property with this attribute and the property value do not want to wait
A[TITLE!=NUM1] {
This CSS selector is not supported
color:red;
}
$ (' a[title!=num1] '). CSS (' Color ', ' red ');
JQuery supports this notation
Select a list that has this property and the attribute value is separated by a space that contains the value of the property
A[title~=num] {
IE6 not supported
color:red;
}
$ (' a[title~=num1] '). CSS (' Color ', ' red ');
Compatible with IE6
That has this attribute and the attribute value contains a specified string.
A[title*=num] {
IE6 not supported
color:red;
}
$ (' a[title*=num] '). CSS (' Color ', ' red ');
Compatible with IE6
With multiple attributes selected and the property value matches successfully
A[BBB][TITLE=NUM1] {
IE6 not supported
color:red;
}
$ (' a[bbb][title=num1] '). CSS (' Color ', ' red ');
Compatible with IE6