Jquery knowledge point summary-$ () function usage and jquery selector, jquery Selector

Jquery knowledge point summary-$ () function usage and jquery selector, jquery Selector
I. Common usage of $ () function [short form of jquery () function]

(1) wrap DOM elements to facilitate operations (jquery selector)

(2) As the namespace prefix of several common utility functions. For example, to delete the spaces before and after a string, call the function as follows:

$. Trim (str );

(3) Document readiness handler: Wrap the document instance and call the ready () method. when the document is ready for the operation, execute this function.

(4) create a DOM element. by passing a string containing the HTML tag to the $ () function, you can instantly create the corresponding DOM element, for example, $ ("<p> Hello word </p> ")

Ii. jquery Selector

Basic selector:

1. ID selector example: $ (#Test) Select the element whose id is test.

2. class selector example: $ (". test") select all elements whose class is test.

3. Element tag selector example: $ ("p") select all <p> elements.

4. wildcard selector example: $ ("*") selects all elements.

5. Group selector example: $ ("p a. test") selects the element with the class as test in the p element.

Level selector:

The hierarchy selector is suitable for obtaining specific elements through the hierarchical relationship between DOM elements, such as descendant elements, child elements, adjacent elements and sibling elements.

1. Descendant element selector example: $ ("div span") select all <span> elements in <div>.

2. Child element selector example: $ ("div> span") Select the child element whose element name is <span> under <div>.

3. adjacent element selector example: $ (". one + div") Select the next <div> sibling element whose class is one.

4. Brother element selector example: $ ("# two ~ Select all <div> sibling elements after the element whose Id is two.

Filter selector:

The filter selector mainly uses specific filtering rules to filter out the required DOM elements. The filter rules are the same as the pseudo-class selector syntax in CSS, that is, the selector starts with a colon.

I. Basic filter selector:

1. For example, $ ("div: first") selects 1st <div> elements from all <div> elements.

2. last select the last element. For example, $ ("div: last") Select the last <div> element of all <div> elements.

3.: not (selector) removes all elements that match the given selector. For example, $ ("input: not (. myClass)") selects <input> elements whose class is not myClass.

4. All the elements whose even index (starting from 0) is an even number, for example, $ ("input: even") indicates the <input> element whose index is an even number.

5. The odd Selects all the elements whose indexes (starting from 0) are odd. For example, $ ("input: odd") selects <input> elements whose indexes are odd.

6. eq (index): select an index (starting from 0). For example, $ ("input: eq (1 )") select the <input> element whose index is equal to 1.

7.: gt (index) Select an index (starting from 0) element greater than index, for example: $ ("input: gt (1 )") select the <input> element whose index is greater than 1.

8.: lt (index) Select an index (starting from 0) element smaller than index, for example: $ ("input: lt (1 )") select the <input> element whose index is less than 1. (Excluding 1)

9. Select All header elements, that is,

10. animated Selects all the elements of the animation being executed, for example, $ ("div: animated") and <div> elements of the animation being executed.

Ii. Content Filtering Selector

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

2. empty: select an empty element without child elements or text. For example, $ ("div: empty"): select an empty <div> element that does not contain child elements or text.

3. has (selector) selects an element that contains the matching element of the given selector. For example, $ ("div: has (. myClass) ") Select the <div> element that contains the element whose class is myClass.

4. parent: select an element that contains child elements or text. For example, $ ("div: parent") Select the <div> element that contains child elements or text.

3. Visibility filter Selector

1. Select all invisible elements, such as $ ("div: hidden"), and select all invisible <div> elements.

2. Select all invisible elements, for example, $ ("div: visible"), and select all visible <div> elements.

Iv. Attribute filter Selector

1. [attribute] select the element that owns this attribute, for example, $ ("div [id]") Select the element that owns the attribute id.

2. For example, $ ("div [title = test]") selects the <div> element whose property title is test.

3. [attribute! = Value] For example, select an element whose attribute value is not equal to value.

4. [attribute ^ = value] elements whose attribute values start with value, for example, $ ("div [title ^ = test]") select the <div> element whose attribute title starts with test.

5. [attribute $ = value] elements whose attribute value ends with a value, for example, $ ("div [title $ = test]") select the <div> element whose attribute title ends with test.

6. [attribute * = value] Select an element whose attribute value contains value, for example, $ ("div [title * = test]"). select the <div> element with the test property title

7. [selector1] [selector2]... [SelectorN]Select an element that matches all the preceding property selectors. For example, $ ("div [id] [title * = test]") selects an element that owns the property id and the property title contains the <div> element of test.

5. Child element filter Selector

1. nth-child (index/even/odd/equation) selects the index under each parent element (the index value is odd/the index value is even/the index value is equal to a certain expression) sub-element, index starts from 1

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

2. first-child: select the first child element under each parent element. For example, $ ("div: first-child"): select the first child element under each <div>.

3. last-child selects the last child element under each parent element. For example, $ ("div: last-child") selects the last child element under each <div>.

4. only-child: select the child element with only one child element. For example, $ ("div: only-child"): select the <div> element with only one child element.

 

6. form object attribute filter Selector

 

1. enabled Selects all available elements, for example, $ ("body: enabled"), and selects all available elements on the page.

2. disabled: select all unavailable elements, for example, $ ("body: disabled"), and select all unavailable elements on the page.

3. checked Selects all selected elements (single-choice and check boxes), for example, $ ("input: checked"), and selects all selected <input> elements.

4. 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 single-row text boxes.

3. password $ (": password") select all password boxes.

4.: radio $ (": radio") selects all single queues.

5.: checkbox $ (": checkbox") select all check boxes.

6. submit $ (": submit") select all the submit buttons.

7. Select All image buttons for image $ (": image.

8. Select all reset buttons for reset $ (": reset.

9. Select All buttons for button $ (": button.

10.: file $ (": file") selects all upload domains.

11. hidden $ (": hidden") selects all invisible elements.