Jquery selector Summary

1. Introduction to Jquery Selector

(1) The selector in Jquery completely inherits the CSS style. Using the Jquery selector, you can easily and quickly find specific Dom elements and then add corresponding behaviors to them, without worrying about whether the browser supports this selector, learning to use the selector is the basis for learning Jqeury. Jquery's behavior rules must take effect only after obtaining elements.

2. Advantages of jquery Selector

(1) concise writing, $ () function

(2) Support CSS1 to CSS3 Selector

(3) Sound Processing Mechanism

3. The following describes all the selectors in Jquery.

(1) Basic selector: searches for Dom elements by element id, class, and tag signature.

1) $ ("# id") matches an element based on the given ID, returns a single element $ ("# name") Select an element with Id as test

2) $ (". class") returns the set element based on the given class name Matching Element $ (". class") selects all elements whose class is class.

3) $ ("element") matches the element based on the given element name and returns the set element $ ("input") to select all input elements.

4) $ ("*") matches all elements, returns the collection element, and $ ("*") selects all elements.

5) $ ("selector1, selector2 ,..., selectorN) merges the elements matched by each selector and returns the collection elements, $ ("div, span, p. myClass) select all <div>, <span>, and a group of elements that have the <p> label whose class is myClass.

(2) level selector: If you want to obtain specific elements through the hierarchical relationship between Dom elements, such as descendant elements, child elements, adjacent elements and peer elements

1) $ ("ancestor descendant") obtain all the descendant (descendant) elements in the ancestor element, $ ("div span") select all <span> elements in <div>

2) $ ("parent> child") Select the child (child) element under the parent element and return the collection element $ ("div span ") select a child element named <span> under <div>.

Note: Unlike $ ("ancestor descendant"), $ ("ancestor descendant") selects descendant elements.

3) $ ("prev + next") selects the next element next to the prev element and returns the set element, $ (". one + div ") Select the next <div> peer element whose class is one.

4) $ ("prev ~ Siblings ") select all the siblings elements after the prev element, $ (" # two ~ Div ") select all <div> peer elements after the element whose Id is two.

Note: You can use the next () method to replace $ ('prev + next') selector $ (". one "). next ("div"); you can use the nextAll () method to replace $ ("prev ~ Siblings ") selector $ (" # two "). nextAll (div)

(3) filter selector: It mainly uses specific filtering rules to filter out the required Dom elements. According to different filtering rules, the filter selector can be divided into basic filtering, content filtering, and visibility filtering, attribute filtering, child element filtering, and form object attribute filtering Selector

1) Basic filter Selector

1) $ (": first") selects the first element, $ ("div: first") selects the first <div> element in all <div> elements.

2) $ (": last") selects the last element, $ ("div: last") selects the last <div> element of all <div> elements.

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

4) $ (": even") select all the elements with an even index starting from 0. $ ("input: even") Select the <input> element with an even index.

5) $ (": odd") select all the elements with an odd index. The index starts from 0. $ ("input: odd") Select the <input> element with an odd index.

6) $ (": eq (index)") Select the element whose index is equal to index (index starts from 0), $ ("input: eq (1 )") select the <input> element whose index is equal to 1.

7) $ (": gt (index)") Select the element whose index is greater than index (index starts from 0), $ ("input: gt (1 )") select the <input> element whose index is greater than 1 (greater than 1, excluding 1)

8) $ (": lt (index)") Select the element whose index is smaller than the index (index starts from 0), $ ("input: lt (1 )") select the <input> element with the index less than 1 (less than 1, excluding 1)

9) $ (": header") select all title elements, such as h1, h2, h3, etc. $ (": header") select all

10) $ (": animated") select all the elements of the animation being executed, $ ("div: animated") Select the <div> element of the animation being executed.

11) $ (": focus") Select the element that gets the focus currently, $ (": focus") Select the element that gets the focus currently

2) content filtering selector: mainly reflected in the child elements or text content contained in the file.

1) $ (": contains (text)") Select an element containing "text", $ ("div: contains ('me ')") select the <div> element containing the text "I"

2) $ (": empty") Select an empty element that does not contain child elements or text, $ ("div: empty") Select do not contain child elements (including text elements) <div> Empty Element

3) $ (": has (selector)") Select an element containing the element matched by the selector, $ ("div: has (p )") select the <div> element containing <p> Elements

4) $ (": parent") selects elements that contain child elements or text, $ ("div: parent") selects <div> elements that have child elements (including text elements)

3) Visibility filter selector: selects the corresponding element based on the visible and invisible states of the element.

1) $ (": hidden") selects all invisible elements, $ (": hidden") selects all invisible elements, including <input type = "hidden"/>,

<Div style = "display: none;"> and <div style = "visibility: hidden;">. If you only want to select the <input> element, you can use $ ("input: hidden ")

2) $ (": visible") select all visible elements, $ ("div: visible") select all visible <div> Elements

4) attribute filter selector: obtains the corresponding element through the attribute of the element.

1) $ ("[attribute]") selects the element that owns this attribute, $ ("div [id]") selects the <idv> element that owns the attribute Id.

2) $ ("[attribute = value]") Select an element whose attribute value is value, $ ("div [title = test]") select the <div> element whose property title is "test"

3) $ ("[attribute! = Value] ") Select an element whose attribute value is not equal to value, $ (" div [title! = Test] ") Select the <div> element whose property title is not equal to" test "(Note: The <div> element without the property title will also be selected)

4) $ ("[attribute ^ = value]") Select an element whose attributes start with value, $ ("div [title ^ = test]") select the <div> element whose attribute title starts with "test ".

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

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

7) $ ("[attribute | = value]") Select an element whose attribute is equal to a given string or prefixed with a string (followed by a hyphen, $ ("div [title | =" en "]") Select an element whose property title is equal to en or whose name is prefixed with en (followed by "-").

8) $ ("[attribute ~ = Value] ") Select the attribute to contain a given value element separated by spaces, $ (" div [title ~ = 'Uk '] ") Select the element that contains the English character in the space-separated value of the attribute title.

9) $ ("[attribute1] [attribute2] [attribute3]") combine the attribute selector into a composite attribute selector to meet multiple conditions. Each time you select a property selector, the range is reduced once.

$ ("Div [id] [title $ = 'test']") Select the <div> element with the property id ending with "test ".

5) child element filter Selector

Note: The filtering rules of the child element filter selector are slightly more complex than those of other selectors. It is quite easy to use as long as the parent and child elements of the element are clearly distinguished.

1) $ (": nth-child (idenx/even/odd/equation)") Select the index child element or parity element under each parent element (idnex starts from 1)

: Eq (index) matches only one element, while nth-child matches child elements for each parent element, and the index of nth-child (index) starts from 1,

However, eq (index) starts from 0.

2) $ (": first-child") selects the first child element of each parent element.: first returns only a single element, while: the first-child selector matches the first element for each parent element.

Child element, for example: $ ("ul li: first-child"); select one <li> element in each <ul>

3) $ (": last-child") selects the last child element of each parent element. Like above,: last returns only one element while: the last-child separator is always

The element matches the last child element, for example, $ ("ul li: first-child"). Select the last <li> element in each <ul>.

4) $ (": only-child") if an element is the only child element in its parent element, it will be matched. If the parent element contains other elements, this will not be matched

$ ("Ul li: only-child") Select the <li> element that is the only child element in <ul>.

5): The nth-child () selector is a very common sub-element filter. The detailed functions are as follows:

1) $ (: nth-child (even) can select an element with an even index value under each parent Element

2) $ (: nth-child (odd) can select an element with an odd index value under each parent Element

3) $ (: nth-child (2) Select an element with an index value equal to 2 under each parent element.

4) $ (: nth-child (3n) elements whose index values under each parent element are multiples of 3 (n starts from 1)

5) $ (: nth-child (3n + 1) Select the element whose index value is (3n + 1) under each parent element (n starts from 1)

6) form object filtering selector: filters the selected form.

1) $ (: enabled) select all available elements, $ ("# form: enabled"); select all available elements in the form with id "form"

2) $ (: disabled) select all the unavailable elements, $ ("# form: enabled"); select all the unavailable elements in the form with id "form"

3) $ (: checked) select all selected elements (single checked, check box), $ ("input: checked") select all selected <input> Elements

4) $ (: selected) select all selected option elements (drop-down list), $ ("select option: selected") select all selected option Elements

(4) form selector: it is convenient to obtain one or more elements of a form.

1) $ (": input") select all <input>, <textarea>, <select>, <button> Elements

2) $ (": text") select all single row text boxes

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

4) $ (": radio") select all single partitions

5) $ (": checkbox") select all multiple selection boxes

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

7) $ (": image") select all image buttons

8) $ (": reset") select all reset buttons

9) $ (": button") select all buttons

10) $ (": file") Select All upload Domains

11) $ (": hidden") select all invisible elements

4. Precautions In the selector

(1) considerations when the selector contains special symbols

1) the selector contains special characters such as ".", "#", "(", "]", etc.

According to w3c, attributes do not contain these special characters, but sometimes expressions in actual projects contain "#",". "and other special characters, if you follow the normal method to handle it, there may be errors. To solve such errors, use the escape character to escape.

For example, <div id = "id # B"> Han Yinglong </div> <div id = "id [1]"> Han Yinglong </div>, the method is as follows: $ ("# id \ # B"), $ ("# id \ [1 \]")

2) @ symbol of the attribute Selector

In the process of upgrading the version of Jquery, jquery completely abandons the @ symbol left by version 1.1.0 in version 1.3.1 and adds it to Version 1.3.1 or later,

You do not need to add the @ symbol before the attribute, for example:

$ ("Div [@ title = 'test']"). The correct method is to remove the @ symbol. $ (div [title = 'test'])

(2) considerations when the selector contains spaces

The space in the selector cannot be ignored. An extra space or one less space may produce different results.