jquery Learning Notes-Filter selectors

1. Match elements According to a filter rule, which begins with the ":" sign, and is typically used to find a single element of a position in a collection element.

$ ("Li:first") the first one

$ ("Li:last") Last

2. If you want to flexibly select any one of the tag elements from a set of tag element arrays, we can use: EQ (index)

Where the parameter index represents the index number (that is, an integer), which starts at 0.

If the value of index is 3, it means that the 4th element is selected: $ ("Li:eq (3)")

3. To find one or more elements according to the text content, it is more convenient to use the: contains (text) selector

Its function is to select all elements that contain the specified string, which is typically used in conjunction with other elements to get all the element objects containing the contents of the "text" string.

Where the text of the parameter represents the text in the page. $ ("Li:contains (' JQuery ')")

<ol>

<li> powerful "JQuery" </li>

<li> "JavaScript" is also very useful </li>

<li> "JQuery" front end must learn </li>

<li> "Java" is a development language </li>

<li> Front-end tool-"JQuery" </li>

</ol>

The function of the 4.:has (selector) filter selector is to get all the elements in the selector that contain the specified element name.

Where the selector parameter is the contained element name and is the contained element.

$ ("Li:has (' P ')") selector code, gets all <li> elements containing <p> elements

The function of the 5.:hidden filter selector is to get all the elements that are not visible, including elements of the type attribute value hidden.

$ ("P:hidden") code get hidden <p> elements

The 6.:visible filter selector gets all the visible elements, which means that, as long as the display property value of the element is not set to "none",

Then, it can be obtained through the selector. $ ("p:visible") selector code to get that visible <p> element

7. Attributes are an important feature of DOM elements, and can also be used in selectors, with element properties to get selectors for elements,

The function of the [Attribute=value] property selector is to get all the elements that are exactly the same as the property name and property value, where [] is a brace character dedicated to the property selector, the parameter attribute represents the property name, and the value parameter represents the property value.

$ ("li[title= ' My Favorites ')") property selector code to get the specified <li> element

The function of the 8.[attribute!=value] property selector is to get all elements that do not contain the property name, or that are not the same as the property name and the property value.

Where [] is a brace character that is dedicated to the property selector, the parameter attribute represents the property name, and the value parameter represents the property values.

$ ("li[title!= ' My Favorite ')") property selector code, gets the specified <li> element, which has no Title property name, and has the title attribute value not equal to "my favorite"

9. A more powerful property selector [Attribute*=value], which can get all the elements in the property value that contain the specified content.

Where [] is a brace character dedicated to the property selector, the parameter attribute represents the property name, and the value parameter represents the corresponding property value.

$ ("li[title*= '") property selector code, gets the specified <li> element, which contains the "most" character in the value of the title property

10. Using: First-child child element Filter selector You can get the first child element returned in each parent element, which is a collection that is often selected for multiple collection data.

<ol>

<li> Celery </li>

<li> Eggplant </li>

<li> Radish </li>

<li> Chinese cabbage </li>

<li> Tomatoes </li>

</ol>

<ol>

<li> oranges </li>

<li> Banana </li>

<li> Grapes </li>

<li> Apple </li>

<li> Watermelon </li>

</ol>

<script type= "Text/javascript" >

$ ("Li:first-child"). CSS ("Background-color", "green");

</script>

The function of the 11.:last-child sub-element filter selector is to get the last child element returned in each parent element, which is also a collection that is commonly used for selection processing of multiple collection data.

$ ("Li:last-child"). CSS ("Background-color", "Blue");

This article is from the "theYllwRvrNo98" blog, make sure to keep this source http://yellowriver.blog.51cto.com/8753974/1673565

jquery Learning Notes-Filter selectors