Basic selector usage in jquery learning tutorial _jquery

A Simple Selector
when using the jquery selector, you must use the $ () function to wrap the CSS rules. The CSS rules are passed inside the jquery object as parameters, and then the jquery object that contains the corresponding elements in the page is returned. The resulting DOM node can then be manipulated to behave.

#box {/// 
 
 color:red;//the element font color with ID box to red} using the ID selector's CSS 
 
rule 

In the jquery selector, we get the same result using the following methods:

$ (' #box '). CSS (' Color ', ' red ');//Get the DOM node object and add the behavior 

In addition to the ID selector, there are two basic selectors: element signature signatures and classes (class):

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 an ID box element
Classes (Class)	. box{}	$ ('. Box ')	Get all DOM objects with class box

$ (' #box '). CSS (' Color ', ' red ');//Get the DOM node object and add the behavior 
 
$ (' div '). css (' Color ', ' red ');//element selector, return multiple element 
 
$ (' #box '). CSS (' Color ', ' red '); ID Selector, which returns a single element of 
 
$ ('. Box '). CSS (' Color ', ' red ');//class selector, return multiple elements 

To prove that the ID returns a single element, and that the element signature and Class (class) return multiple, you can view the number of elements returned by using a property length or size () method that comes with the jquery core itself.

Alert ($ (' div '). Size ());//3 
 
alert ($ (' #box '). Size ());//1, rear two blind 
 
alert ($ ('. Box '). Size ());//3 

In the same vein, you can use the jquery core properties directly:

Alert ($ (' #box '). length);//1, the back is blind. 

Warning: There is a particular problem to note that IDs are allowed only once on the page, and generally require the developer to follow and maintain this rule. But if you appear on the page three times and use styles in CSS, the three elements will also perform an effect. But if you want to do this in jquery, you're going to have a problem with blindness. So, developers must develop good compliance habits, using only one ID on a single page.

$ (' #box '). CSS (' Color ', ' red ');//Only the first ID turns red, the back two are blind 

The jQuery selector is very similar to the CSS selector, except that it is functionally different. When CSS finds elements, it adds a single style, while jquery adds action behavior. The most important point is that when CSS is added, the advanced selector is not compatible with some browsers, while the jquery selector does not have to worry about adding CSS styles.

#box > P {//css child selector, IE6 does not support 
 
 color:red; 
 
} 
 
$ (' #box > P '). CSS (' Color ', ' red '); JQuery Selector, compatible with IE6 

The JQuery selector supports all the rules of CSS1, CSS2, and supports the CSS3 part of the practical rules, while it also has a few unique rules. So, for developers who already have CSS, learning the jquery selector is almost 0 cost. The jquery selector, while acquiring node objects, is not only simple, but also has built-in fault-tolerant capabilities, thus avoiding the need for efficient judgment of node acquisition every time like JavaScript.

$ (' #pox '). CSS (' Color ', ' red ');//no element with ID pox and no error 
 
document.getElementById (' pox '). Style.color = ' red '; 

Because of the internal determination of jquery, and the native DOM node acquisition method is not judged, resulting in an error, the native method can be so judged to solve this problem:

if (document.getElementById (' pox ')) {//First determine if the object exists 
 
 document.getElementById (' pox '). Style.color = ' red '; 
 
 

So how do you determine if there are any missing elements that you use jquery to call? Because the jquery object is returned by itself, it can result in the existence of no element, and returns True.

if ($ (' #pox '). Length > 0) {//Judge element contains quantity can be 
 
 $ (' #pox '). CSS (' Color ', ' red '); 
 
 

In addition to this approach, you can also use the method of converting to a DOM object to determine, for example:

if ($ (' #pox '). Get (0)) {} or if ($ (' #pox ') [0]) {}//The DOM object can also be obtained through an array subscript 

Two Advanced Selector
in the simple selector, you learned about the three most basic selectors: element tag name, ID, and class. Then, in the base selector, there are advanced and high-level selectors that make it easier to select elements.

Selector	CSS mode	JQuery mode	Describe
Group Selector	Span,em,.box {}	$ (' Span,em,.box ')	Get DOM objects for multiple selectors
Descendant Selector	Ul Li a {}	$ (' ul Li a ')	Get multiple Dom objects traced back to
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 {//layer trace element to add red font 
 
 color:red; 
 
} 
 
$ (' ul Li a '). css (' Color ', ' red ');//Group selector jquery mode// 
 
wildcard Selector 
* {//page all elements add red font 
 
color:red; 
 
} 
 

Currently introduced six kinds of selectors, in practical applications, can be flexible collocation, making the selector more accurate and fast:

$ (' #box p, ul li * '). CSS (' Color ', ' red ');//combination of various selectors 

Warning: In practice, the use of the general selector is not much, especially in the chase matching, such as: $ (' * '), the use of the method is very inefficient, affecting performance, the proposal may be less use. There is also a selector that can indicate an element prefix in the ID and Class (class), for example:

$ (' div.box ');//qualification must be. Box element fetch must be div 
 
$ (' P#box div.side ');/ibid. 

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 to use, but be aware of the difference from the class group selector.

. box.pox {//Double class selector, IE6 exception 
 
 color:red; 
 
} 
 
$ ('. Box.pox '). CSS (' Color ', ' red ');//compatible IE6, resolve the exception 

A multiple class selector is a DOM node that must have more than one class at the same time, with these multiple classes for precise qualification. The group class selector, however, is just a selection of multiple class classes.

$ ('. box,. Pox '). CSS (' Color ', ' red ');/+ comma, to see the difference 

Warning: When constructing selectors, there is a general optimization principle: only the necessary certainty is pursued. The more complex The selector filter is, the longer the selector engine inside the jQuery process the string. Like what:

$ (' Div#box ul Li A#link '); let jquery internally process the unnecessary string 
 
$ (' #link ');//id is unique, accuracy unchanged, performance improvement 

three. Advanced Selector
in the first six most conventional selectors, it is generally possible to solve the problem of all DOM node object selection through these six selectors. But on many special elements, such as the elements of parent-child relationships, the elements of brotherhood, the elements of special attributes, and so on. The use of these advanced selectors is not universal with the use of early CSS, but with jquery compatibility, the use of these selectors is also more frequent, due to the lack of support from IE6 and other low version browsers.
The higher you come.

Hierarchy Selector

Selector	CSS mode	JQuery mode	Describe
Descendant Selector	Ul Li a {}	$ (' ul Li a ')	Get multiple Dom objects traced back to
Child Selector	div > P {}	$ (' div p ')	To get more than one Dom object 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 ')	Gets all sibling DOM objects after a node

In the hierarchy selector, other than the descendant selector, three advanced selectors do not support IE6, while jquery is compatible with IE6.

Descendant selector
$ (' #box p '). CSS (' Color ', ' red ');/full compatibility 

JQuery provides an equivalent find () method for descendant selectors

$ (' #box '). Find (' P '). CSS (' Color ', ' red ');//and Descendant selector equivalent 

//child selector, grandson after blindness

#box > P {//ie6 does not support 
 
 color:red; 
 
} 
 
$ (' #box > P '). CSS (' Color ', ' red '); Compatible IE6 

JQuery provides an equivalent children () method for the selector:

$ (' #box '). Children (' P '). CSS (' Color ', ' red ');//and the child selector equivalent 

//next selector (next sibling node) 
#box + p {//IE6 does not support 
 
 color: red; 
 
} 
 
$ (' #box +p '). CSS (' Color ', ' red ');//Compatible IE6 

JQuery provides an equivalent method for the next selector next ():

$ (' #box '). Next (' P '). CSS (' Color ', ' red ');//Next selector equivalent 

//nextall selector (all subsequent sibling nodes)

#box ~ p {//IE6 not supported 
 
color:red; 
 
} 
 
$ (' #box ~ P '). CSS (' Color ', ' red ');//Compatible IE6 

JQuery provides an equivalent method for the Nextall selector Nextall ():

$ (' #box '). Nextall (' P '). CSS (' Color ', ' red ');//and Nextall selector equivalent 

Hierarchy selector to the level of the node are required, such as the child selector, only the child nodes can be selected, grandson node and the heavy grandson node cannot choose. Next and the Nextall selector, must be the same level of the latter and the second N, not at the same level can not be selected. In Find (), next (), the four methods of Nextall () and children (), if not passed, are equivalent to passing "*", that is, any node that does not recommend this, not only affects performance, but is likely to produce bizarre results in complex HTML structures due to poor accuracy.

$ (' #box '). Next ()//equals $ (' #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 ');//An element 
 
$ (' #box ') on the sibling. Prevall (' P '). CSS (' Color ', ' red '); 

The Nextuntil () and Prevunitl () methods are all nodes below or above the selected sibling, select all elements that are not specified, and stop the selection once the specified element is encountered.

$ (' #box '). Prevuntil (' P '). CSS (' Color ', ' red ');//The specified element on the sibling is selected, and the 
 
$ (' #box ') is encountered. Nextuntil (' P '). CSS (' Color ', ' red ') ;//Sibling not specified element selected, stopped 

The siblings () method integrates the effects of the Prevall () and Nextall () two functions, and selects all elements adjacent to the top and bottom:

$ (' #box '). Siblings (' P '). CSS (' Color ', ' red ');//All elements of the sibling are selected 
 
//equivalent to the following: 
 
$ (' #box '). Prevall (' P '). CSS (' Color ', ' Red ');//All elements on the sibling are selected 
 
$ (' #box '). Nextall (' P '). CSS (' Color ', ' red ');//all elements of the same sibling selected 

Warning: Must not write "$ (' #box '). Prevall (' P '). Nextall (' P '). CSS (' Color ', ' red ');" This form, because Prevall (' P ') returns all the specified elements above, and then Nextall (' P ') selects all the specified elements below, there is a certain error. In theory, JQuery provides methods such as find (), Next (), Nextall (), and children () that run faster than using advanced selectors. Because they implement different algorithms, the advanced selector is to parse the string to get the node object, and jquery provides the method is generally a single selector, can be directly obtained. But this difference in speed is not much practical for client script, and the difference in velocity depends on the browser and the element content of the selection. For example, if the Queryselectorall () method is not supported in Ie6/7, the "Sizzle" engine will be used, and the speed will be slow while other browsers will be quick. Interested in being able to understand this method and this engine. Selector Speed Analysis:

The fastest way to do this is to use native getElementById, byname, Bytagname, and Queryselectorall ()

$ (' #box '). Find (' P '); 

JQuery automatically turns this statement into $ (' #box '). Find (' P '), which can result in a certain performance loss. It is slower than the fastest form 5%-10%

$ (' P ', ' #box '); 

Within jquery, this statement iterates through the nodes using the $.sibling () and JavaScript nextsibling () methods. It is slower than the fastest form about 50%

$ (' #box '). Children (' P '); 

JQuery uses the sizzle engine internally to handle various selectors. The Sizzle engine's selection sequence is right-to-left, so this statement selects P first and then filters out the parent element #box, which causes it to be approximately slower than the fastest form 70%

$ (' #box > P '); 

This statement is the same as the previous one. However, the previous one selects only the direct child element, which can be used to select a multilevel child element, so it is slower, probably 77% slower than the fastest form.

$ (' #box p '); 

Within JQuery, the statement is converted to $ (' #box '). Find (' P '), 23% slower than the fastest form.

$ (' P ', $ (' #parent ')); 

In comprehensive, the fastest is the find () method, the slowest is the $ (' #box p ') This kind of advanced selector. If you start by assigning $ (' #box '), then jquery caches its variables, and the speed increases further.

var box = $ (' #box '); 
 
var p = box.find (' P '); 

Note: What kind of scheme to use? In fact, the use of which is almost the same. Here, it is recommended to use the method provided by jquery. Because not only is the method faster than the advanced selector, it is more flexible and scalable than the advanced selector. Using "+" or "~" literally without Next and nextall more semantically, clearer, JQuery's approach is richer, providing relative prev and prevall. After all, jquery is a programming language that needs
The flexibility to split and combine selectors, and the use of CSS patterns is too rigid. Therefore, if jquery provides a separate way to replace the functionality of some selectors, it is recommended that you prioritize the use of independent methods.

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 that has this attribute = the 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] ')	Gets the attribute that is equal to the property value or the beginning 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 matches. DOM Object
A[title!=num]	$ (' a[title!=num] ')	That has this property and is not equal to the property value. DOM Object
A[title~=num]	$ (' a[title~=num] ')	Gets this property and the property value is a space A partitioned list of Dom pairs that contains the value of a property Like
A[title*=num]	$ (' a[title*=num] ')	Gets an attribute with this property and the property value contains a specified A DOM object for a string
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 you want to be compatible with a lower version in the CSS world. But jquery doesn't have to think about it.

A[title of this property is selected] {//IE6 does not support color:red; 
 
} $ (' a[title] '). CSS (' Color ', ' red ');//compatible IE6//select a[title=num1 with this attribute = This attribute value] {//IE6 does not support color:red; 
 
} $ (' a[title=num1] '). CSS (' Color ', ' red ');//compatible IE6//The selected A[title^=num with this property and the beginning property value matching) {//IE6 does not support color:red; } $ (' a[title=^num] '). CSS (' Color ', ' red '); 
 
Compatible IE6//The selected has this property and is equal to the property value or the Beginning property value match followed by a "-" number A[title|=num] {//IE6 does not support color:red; 
 
} $ (' a[title|= ' num] '). CSS (' Color ', ' red ');//compatible IE6//select A[title$=num with this property and end property value matching] {//IE6 does not support color:red; } $ (' a[title$=num] '). CSS (' Color ', ' red '); 
 
Compatible IE6//select A[TITLE!=NUM1 with this property and the property value does not want to wait] {//does not support this CSS selector color:red;  
 
 } $ (' a[title!=num1] '). CSS (' Color ', ' red ');//jquery support this type of writing//Select a list with this property and the property value is separated by a space, which contains the a[title~=num of the property value] {//IE6 does not support 
 
color:red; } $ (' a[title~=num1] '). CSS (' Color ', ' red '); 
 
Compatible IE6//select A[title*=num with this property and attribute value containing a specified string] {//IE6 does not support color:red; } $ (' a[title*=num] '). CSS (' Color ', ' red ');//compatible IE6//Selected with multiple properties and property values matchA[bbb][title=num1 of work] {//IE6 does not support color:red; 
 } $ (' a[bbb][title=num1] '). CSS (' Color ', ' red ');/compatible IE6