Jquery learning Notes use jquery to select DOM elements

ArticleDirectory

• 1. CSS Selector
• 2. Custom Selector
• 3. Dom traversal (filtering) Method
• 4. Access DOM elements

Jquery provides us with a powerful way to get Dom elements, which can simplify the task of selecting elements in the Dom, such as CSS selector and custom selector, by using these delimiters, we can quickly and easily obtain elements or element sets in the Dom, and we should know that the method is concatenated$ ()When a factory function is followed, the elements encapsulated in the jquery object are automatically and implicitly traversed cyclically.

1. CSS Selector

BaseThe options include Tag Name, ID, and Class. The following are their expressions in CSS and jquery:

<1.1> child element composite (<)

Syntax:Parent> child

Purpose:Match All child elements under a given parent Element

Example:

1$ ('# Selected-plays> Li'). Addclass ('Horizontal');
 

The function is to add a class named "horizontal" to the Li tag of all child elements (excluding child elements) under the "selected-plays" element.

 

<1.2> negative pseudo-class selector <: Not (selector)>

Syntax: Not (selector)

Purpose: Remove all elements that match the given selector.

Example:

 
1$ ('# Selected-plays Li: Not (. Horizontal)'). Addclass ('Sub-Level');
 

The ID is: "None of the applications under the selected-plays element". add a class named "Sub-Level" to the Li label of the child element of the horizontal "Class (including the child element of the child element.

 

<1.3> attribute Selector

Attribute SelectorIt is a type of selector that is particularly useful in CSS selection. As the name suggests, the attribute selector selects an element through the attribute of the HTML element, such as the linkTitleAttribute or imageALTAttribute.

Syntax:

[Attribute] ---- match the elements that contain the given attribute.

[Attribute = value] ---- matching a given attribute is an element of a specific value

[Attribute! = Value] ---- match all elements that do not contain specified attributes or that do not equal to a specific value.

[Attribute ^ = value] ----Matching a given attribute is an element starting with some values

[Attribute $ = value] ---- match an element whose given attribute ends with some values

[Attribute * = value] ---- matching a given attribute is an element that contains certain values.

For exampleALTFor all image elements of the attribute, you can use the followingCode:

1$ ('IMG [alt]')
 

For example,To add a class for all email links, use the following code:

 
1$ ('A [href ^ = "mailto:"]'). Addclass ('Mailto');
 

 

2. Custom Selector

In addition to the preceding CSS selector, jquery also adds a unique custom selector. These custom delimiters further enhance the CSS delimiters that are already very powerful, providing us with a new way to select elements on the page.

Tip: the User-Defined selector is inefficient.The browser's native DOM selector engine is highly efficient.

 A custom selector is usually followed by a CSS selector and searches for elements based on the position of the selected element set. The syntax of the custom selector andPseudo classSelectorThe syntax is the same (:.

 

& Lt; 2.1 & gt;: eq (INDEX)

Syntax:

: Eq (INDEX) index starts counting from 0

Purpose:Matches an element with a given index value.

Example:

 
1$ ("TR: eq (1)")
 

The role is to find the second row.

 

& Lt; 2.2 & gt;: Nth-child

Syntax:

: Nth-child (INDEX) index starts counting from 1 (odd and even can be used)

Purpose:Match the nth child or parity element under the parent Element

Example:

HTML code

View code

1<Ul>2<Li> JOHN </LI>3<Li> Karl </LI>4<Li> Brandon </LI>5</Ul>6<Ul>7<Li> Glen </LI>8<Li> Tane </LI>9<Li> Ralph </LI>10</Ul>
 

Jquery code:

 
1$ ("Ul Li: Nth-child (2)")
 

Result:

1[<Li> Karl </LI>, <li> Tane </LI>]
 

 

& Lt; 2.3 & gt; : Odd And : Even

Syntax:

: Odd -- match all index valuesOddFrom 0.

: Even -- match all index valuesEvenFrom 0.

Example:

HTML code:

1<Table>2<Tr> <TD> Header1</TD> </tr>3<Tr> <TD> Value1</TD> </tr>4<Tr> <TD> Value2</TD> </tr>5</Table>
 

Jquery code:

 
1$ ("TR: odd")
 

Result:

 
1[<Tr> <TD> Value1</TD> </tr>]
 

 

<2.4>: Contains (text)

Syntax:

: Contains (text) Text: a string to be searched,The selection operator is case sensitive.

Example:

HTML code:

 
1<Div> JOHN resig </div>2<Div> George Martin </div>3<Div> Malcom John Sinclair </div>4<Div> J. ohn </div>
 

 

Jquery code:

 
1$ ("Div: Contains ('john ')")
 

Result:

 
[<Div> JOHN resig </div>, <div> Malcom John Sinclair </div>]
 

 

<2.5> form-based delimiters

The custom selector is not limited to element-based location selection. For example, jquery's custom selector and the later supplemented css3 selector can also simplify the task of selecting elements.

Below isForm selection character:

Selector	Matching
: Input	Input field, partition, selection list, And button Element
: Button	The button element or the type attribute value is the input element of the button.
: Enabled	Enabled form elements
: Disabled	Disabled form elements
: Checked	Select a single button or check box
: Selected	Selected option Element

 

 

 

 

 

 

 

We can combine the form selector to provide more powerful expression capabilities:

 
1$ ('Input [type = "radio"]: checked')//Select All selected radio buttons
 

 
1$ ('Input [type = "password", input [type = "text"]: Disabled')//Select all password input fields and disabled text input fields.
 

 

3. Dom traversal (filtering) Method

Retrieving the parent or ancestor element of an element is a basic operation, and here is where jquery's Dom Traversal method is needed. With these methods, we can easily walk up and down the DOM tree.

<3.1>. Filter (expr | OBJ | ele | Fn)

Syntax: queryfilter (expr | OBJ | ele | Fn)

Definition: filters out a set of elements that match the specified expression. This method is used to narrow the matching range. Multiple Expressions separated by commas

Example:

HTML code:

 
1<P> Hello </P> <p> hello again </P> <pClass="Selected"> And again </P>
 

Jquery code:

 
1$ ("P"). Filter (". Selected")
 

Result:

1[<PClass="Selected"> And again </P>]
 

For more details, see the specific API

 

<3.2>. Next () and. nextall

Syntax: Next ([expr]) nextall ([expr])

Definition:Obtains the Element Set of the Peer element next to each element in a matched element set. This function only returns the next peer element, instead of all peer elements (nextall can be used ). You can use an optional expression for filtering.

Example:

HTML code:

 
1<P> Hello </P> <p> hello again </P> <div> <span> and again </span> </div>
 

Jquery code:

1$ ("P"). Next ()
 

Result:

 
1[<P> hello again </P>, <div> <span> and again </span> </div>]
 

 

<3.3>. Prev () and. prevall

Syntax: Prev ([expr]) prevall ([expr])

Definition:Obtains the Element Set of the first peer element next to each element in a matched element set. You can use an optional expression for filtering. Only the adjacent peer elements will be matched, rather than all the previous peer elements (prevall ).

Example:

HTML code:

 
1<P> Hello </P> <div> <span> hello again </span> </div> <p> and again </P>
 

Jquery code:

1$ ("P"). Prev ()
 

Result:

 
1[<Div> <span> hello again </span> </div>]
 

 

<3.4>. siblings ()

Syntax: siblings ([expr])

Definition: gets a set of all unique peer elements of each element in a matched element set. AvailableOptional.

Example:

HTML code:

 
1<Div> <span> Hello </span> </div> <pClass="Selected"> Hello again </P> <p> and again </P>
 

Jquery code:

1$ ("Div"). Siblings (". Selected")
 

Result:

 
1[<PClass="Selected"> Hello again </P>]
 

 

<3.5>. andself ()

Syntax: andself ()

Definition: adds the previously selected elements to the current element. It is useful for filtering or searching elements to add the previously selected elements.

Example: (select all Div and internal P and add the border class)

HTML code:

 
1<Div> <p> first paragraph </P> <p> second paragraph </P> </div>
 

Jquery code:

 
1$ ("Div"). Find ("P"). Andself (). addclass ("Border");
 

Result:

1<DivClass="Border">2<PClass="Border"> First paragraph </P>3<PClass="Border"> Second paragraph </P>4</Div>
 

 

<3.6>. Parent ([expr]) and. Children ([expr])

Definition:

Parents () searches for all ancestor elements, while children () only considers child elements, not all descendant elements.

. Parent ([expr]) -- obtains a set of elements that contain a unique parent element that matches all elements. (Optional expressions can be used for filtering .)

. Children ([expr]) -- obtains a set of elements that contain all child elements of each element in a matched element set. (Optional expressions can be used for filtering .)

Example 1: (find the parent element of each paragraph)

HTML code:

 
1<Div> <p> Hello </P> </div>
 

Jquery code:

 
1$ ("P"). Parent ()
 

Result:

 
1[<Div> <p> Hello </P> </div>]
 

 

Example 2: Find each child element in the div .)

HTML code:

1<P> Hello </P> <div> <span> hello again </span> </div> <p> and again </P>
 

Jquery code:

 
1$ ("Div"). Children ()
 

Result:

 
1[<Span> hello again </span>]
 

 

4. Access DOM elements

Sometimes weYou may need to directly access the DOM element (get (INDEX) in the Code, for example, getId = "My-element"Label name of the attribute Element:

 
1 VaRMytag = $ ('# My-Element')[0]. Tagname;
 

 

References:

Basic jquery tutorial (Third edition)

Jquery 1.8.0 API documentation (click to download)