The use of the jquery-$ () function and some commonly used selectors

The common use of the "short form of jquery () functions" of the $ () function

(1) Wrapping DOM elements for ease of operation (jquery selector)

(2) As a namespace prefix for several common utility functions, for example, a utility function that deletes a space before and after a string, and calls the method as follows:

$.trim (str);

(3) Document-Ready handler: Wraps the document instance, then calls the Ready () method, executes the function when the document is prepared for operation

(4) Creating DOM elements, by passing a string containing HTML tags to the $ () function, you can instantly create the appropriate DOM element, such as $ ("<p>hello word</p>")

Ii. jquery Selector

Basic selector:

1. ID Selector Example: $ (#Test) Select an element with ID test

2. Class Selector Example: $ (". Test") Select all elements of class test

3, Element Tag Selector example: $ ("P") Select all the <p> elements.

4. Wildcard Selector Example: $ ("*") selects all the elements.

5. Group Selector Example: $ ("P a.test") Select a element that has a class of test within the P element.

Hierarchy Selector:

Hierarchical selectors are suitable for obtaining specific elements, such as descendant elements, child elements, adjacent elements, and sibling elements, through hierarchical relationships between DOM elements.

1. Descendant Element Selector Example: $ ("div span") Select all <span> elements in <div>.

2, child element Selector Example: $ ("Div>span") Select the element name under the <div> element is a child of <span>.

3, adjacent Element selector Example: $ (". One+div") Select the next <div> sibling element of class one.

4, Brother element Selector example: $ ("#two ~div") Select all the <div> sibling elements that follow the element with ID.

Filter selector:

The filter selector primarily filters out the required DOM elements through a specific filtering rule, which is the same as the pseudo-class selector syntax in CSS, where the selector begins with a colon (:).

Basic Filter Selector:

1: First select the 1th element for example: $ ("Div:first") Select all <div> elements in the 1th <div> element.

2,: Last selected Element for example: $ ("Div:last") Select all <div> elements in the last 1 <div> elements.

3: Not (selector) removes all elements that match the given selector, for example: $ ("Input:not (. myClass)") Select the <input> element for which class is not myClass.

4,: Even select index (starting from 0) is an even number of all elements such as: $ ("Input:even") Select the index is even <input> element.

5,: Odd Select index (starting from 0) is an odd number of all elements such as: $ ("input:odd") The selection index is an odd <input> element.

6: EQ (Index) Select index (starting from 0) equals index element for example: $ ("Input:eq (1)") Select the <input> element with index equal to 1.

7: GT (Index) Select index (starting from 0) elements greater than index for example: $ ("INPUT:GT (1)") Select the <input> element with an index greater than 1.

8,: LT (index) Select index (starting from 0) is less than the element of index (for example: $ ("input:lt (1)") Select the <input> element with index less than 1. (not including 1)

9,: The header selects all the title element, namely

10: Animated Select all elements that are currently performing an animation, for example: $ ("div:animated") Select the <div> element that is performing the animation.

Second, Content filter Selector

1: Contains (text) $ ("Div:contains (' Test ')") Select the <div> element containing the text content as test

2,: Empty Select a blank element that does not contain child elements or text: $ ("Div:empty") Select an empty <div> element that does not contain child elements or text

3,: Has (selector) Select the element containing the element that matches the given selector: $ ("Div:has (. myClass)") Select the <div> element containing the element of class MyClass

4.:p arent Select an element with child elements or text: $ ("div:parent") Select the <div> element that contains the child element or text

Third, Visibility filter selector

1,: Hidden Select all invisible elements such as: $ ("Div:hidden") Select all invisible <div> elements

2,: Visible Select all the invisible elements such as: $ ("div:visible") Select all visible <div> elements

Iv. Attribute Filter Selector

1. [attribute] Select the element that owns this property, for example: $ ("Div[id]") Select the element that owns the property ID

2, [Attribute=value] For example: $ ("div[title=test]") Select the property title is the <div> element of test

3. [Attribute!=value] For example: Select an element for which the value of the attribute is not equal to value

4, [Attribute^=value] The value of the selected attribute begins with the element for value, for example: $ ("div[title^=test]") Select the attribute title begins with test <div> element

5, [Attribute$=value] The value of the selected attribute is the element that ends with value For example: $ ("div[title$=test]") pick attribute title end with test <div> element

6, [Attribute*=value] The value of the selected attribute contains the element of value, for example: $ ("div[title*=test]") pick attribute title contains the <div> element of test

7. [Selector1][selector2]... [Selectorn] Select the element that matches all of the property selectors above for example: $ ("div[id][title*=test]") Select the owning attribute ID, and the attribute title contains the <div> element of test

Five, sub-element filter Selector

1,: Nth-child (index/even/odd/equation) Select the index under each parent element (indexed value is odd/index value is even/index value equals an expression) child element, index starting from 1

For example: $ ("Div:nth-child (1)") Select the first child element in each <div>

2,: First-child Select the 1th child element under each parent element for example: $ ("Div:first-child") Select the first child element under each <div>

3,: Last-child Select the last 1 child elements under each parent element for example: $ ("Div:last-child") Select the last child element under each <div>

4: Only-child The child elements of an element that have only a unique child element, for example: $ ("Div:only-child") select only one child element of the <div> element

Vi. Form object property Filter Selector

1: Enabled Select all available elements such as: $ ("body:enabled") Select all available elements within the page

2,:d isabled Select all the unavailable elements for example: $ ("body:disabled") Select all the unavailable elements in the page

3,: Checked Select all selected elements (Radio box, check box) For example: $ ("input:checked") Select All selected <input> elements

4,: Selected Select all selected option elements (drop-down list) For example: $ ("select:selected") Select All selected option elements

Form Selector

1: Input $ (": input") selects all <input>,<textarea>,<select> and <button> elements.

2.: Text $ (": Text") Select all the single-line text boxes.

3,:p Assword $ (": password") Select all the password boxes.

4,: Radio $ (": Radio") Select all the radio boxes.

5.: CheckBox $ (": CheckBox") Select all check boxes.

6,: Submit $ (": Submit") Select all the Submit button.

7,: Image $ (": Image") Select all the image buttons.

8: Reset $ (": Reset") Select all reset buttons.

9: Button $ (": Button") selects all the buttons.

10,: File $ (": File") Select all the upload domain.

11,: Hidden $ (": Hidden") Select all invisible elements.

The use of the jquery-$ () function and some commonly used selectors