The second of jquery learning notes--General Selector

The core part of JQuery is the selector engine. It inherits the syntax of CSS, can make a quick and accurate selection of the tag name, attribute name, state, etc. of the DOM element, and does not have to worry about the compatibility of the browser.

Simple Selector
#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

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

The JQuery core comes with a property length or size () method 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.

$ (' #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 child selector, IE6 not supported
color:red;
}
$ (' #box > P '). CSS (' Color ', ' red '); JQuery Sub-selector, compatible with IE6

The jQuery selector is not only simple when acquiring a node object, 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 this 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) {//Judgment element contains quantity
$ (' #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]) {}//array subscript can also get DOM object

The second of jquery learning notes--General Selector