JQuery learning notes get jQuery object_jquery-js tutorial

To completely separate the Web layer from the presentation layer and behavior layer, you should not directly define styles or events on HTML tags. This means that to set an element on the page, you must first select this element. The selector is the technology used to solve this problem. The jQuery selector selects a page element to generate a jQuery object, the syntax is quite simple: $ (selector ). Merge (). Similarly, to determine whether a DOM object exists, it cannot be written as if ($ (selector), but if ($ (selector). length> 0 ).

Of course, jQuery objects and DOM objects can be converted to each other. As shown in the preceding example, the jQuery object can be considered as an array of DOM objects. Therefore, you can use the get (index) method or [index] to convert a DOM object to obtain the subscript. On the contrary, to convert a DOM object to a jQuery object, you only need to use $ (document. getElementById ("id.

Although the method for getting an object is simple $ (selector), there are many types of selector parameters. Here is a brief description:

Filter selector: Appended to all selectors. Some elements are filtered out by specific filter rules, such as $ (selector: first ). If used separately, $ (: first) is equivalent to $ (*: first );

Hierarchical selector: gets a specific element through the hierarchical relationship between DOM elements, which is composed of two selectors. The selection process first selects the element according to the first selector, then determines the descendant element, child element, or sibling element based on the symbol, and finally selects the final element within the range of these elements according to the second selector;

The following is a description of the various selector tables-it took me one morning, it really hurts!

Basic Selector

Selector	Description	Return
*	Select all elements	Set Element
Element	Select element based on Tag Name	Set Element
# Id	Select an element based on the id property value	Single element
. Class	Select elements based on class attribute values	Set Element
Selector1, selector2,..., SelectorN	Merges the elements selected by each selector into one result, which is mainly used to select different elements.	Set Element

Basic filter Selector

Selector	Description	Return
: First	Select the first element	Single element
: Last	Select the last element	Single element
: Even	Select all elements whose index values are even. The index starts from 0.	Set Element
: Odd	Select all elements whose index values are odd, and the index starts from 0.	Set Element
: Eq (index)	Select the element whose index value is equal to index, and the index starts from 0.	Single element
: Gt (index)	Select the element whose index value is greater than index, and the index starts from 0.	Set Element
: Lt (index)	Select the element whose index value is smaller than the index value. The index starts from 0.	Set Element
: Not (selector)	Select an element other than the selector	Set Element
: Header	Select All title Elements	Set Element
: Animated	Select all elements of the animation being executed	Set Element

Child element filter Selector

Selector	Description	Return
: First-child	Select the first child element of each parent element.	Set Element
: Last-child	Select the last child element of each parent element.	Set Element
: Only-child	If an element is a unique child element of the parent element	Set Element
: Nth-child (odd)	Select a child element with an odd index value under each parent element.	Set Element
: Nth-child (even)	Select a child element with an even index value under each parent element.	Set Element
: Nth-child (index)	Select the child element whose index value is equal to index under each parent element.	Set Element
: Nth-child (equation)	Select the sub-element whose index value matches equation under each parent element.	Set Element

Content Filter Selector

Selector	Description	Return
: Contains (text)	Select text elements	Set Element
: Has (selector)	Select an element with the descendant element as selector	Set Element
: Parent	Select elements that contain descendant elements or text	Set Element
: Empty	Select an empty element that does not contain descendant elements or text	Set Element

Visibility filter Selector

Selector	Description	Return
: Hidden	Select all invisible elements	Set Element
: Visible	Select all visible elements	Set Element

Attribute filter Selector

Selector	Description	Return
[Attr]	Select an element with the attr attribute	Set Element
[Attr = value]	Select an element whose attr attribute value is value	Set Element
[Attr! = Value]	Select an element whose attr attribute value is not a value	Set Element
[Attr ^ = value]	Select the element whose attr attribute value starts with value.	Set Element
[Attr $ = value]	Select the element whose attribute value ends with a value.	Set Element
[Attr * = value]	Select the element whose attr attribute value contains the value	Set Element
[Attr ~ = Value]	The attr attribute values are separated by spaces. One element is value.	Set Element
[Selector1] [selector2]... [SelectorN]	Select the elements that meet all attribute filter selectors.	Set Element

Level Selector

Selector	Description	Return
Selector1 selector2	Select selector2 from the descendant element of selector1	Set Element
Selector1> selector2	Select selector2 from the sub-element of selector1	Set Element
Selector1 + selector2	Select selector2 from the first sibling element after selector1	Set Element
Selector1 ~ Selector2	Select selector2 from all the sibling elements after selector1	Set Element

Form Selector

Selector	Description	Return
: Input	SelectElement	Set Element
: Text	SelectElement	Set Element
: Password	SelectElement	Set Element
: Radio	SelectElement	Set Element
: Checkbox	SelectElement	Set Element
: Image	SelectElement	Set Element
: File	SelectElement	Set Element
: Button	SelectAndElement	Set Element
: Submit	SelectElement	Set Element
: Reset	SelectElement	Set Element
: Hidden	Select all invisible elements	Set Element

Form filter Selector

Selector	Description	Return
: Enable	Select all available form elements	Set Element
: Disable	Select all unavailable form elements	Set Element
: Checked	Select the selectedElements (single-digit, check box)	Set Element
: Selected	Select the selectedElement	Set Element