jquery Tutorial 2.jquery Filter Selector

1. : First filter: $ ("Li:last"). CSS ("Background-color", "Red") Gets the last child node of the LI element .

   $ ("Li:last") <==>$ ("Li"). Last (); Note: These two effects are the same, but the latter is faster and the latter is recommended

   $ ("Li:first") <==>$ ("Li"). First ();

   $ ("Li"). First (). Next (); The next element of the method chain, first ()

   $ ("Li"). First (). Next (). Prev (); Prev () previous element

   $ ("Li"). First (). parent (); Find Li's parent element
   

   
   

   $ ("div span") <==>$ ("div"). Find ("span");

   $ ("div span") <==>$ ("div"). Children ("span")

2.:EQ (Index) Selector: If you want to flexibly select any one of the label elements from a set of tag element arrays

$ ("Li:eq (2)"). CSS ("Background-color", "#60F"), select a third element from a set of LI elements, starting with 0

3.:contains (text) selector: Sometimes we might want to find one or more elements according to the text content, which is the function of selecting all elements of the specified string, which is often used in conjunction with other elements

$ ("Li:contains (' JQuery ')"). CSS ("Background", "green"); Find text in a set of LI elements is an element of the jquery keyword

4.:has (Select) Selector: gets all the elements in the selector that contain the specified element name, where selector The parameter is the contained element name, which is the contained element.

$ ("Li:has (' label ')"). CSS ("Background-color", "Blue"); Look up a group of LI elements with a LABEL element

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

var $strHTML = $ ("input:hidden"). Val (); Find the INPUT element for type= "hidden"

6.:visible selector: with :hiddenfilter selector instead,:visibleThe 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", it can be obtained through the selector.

<li style= "Display:none" > Orange </li><li style= "Display:block" > Banana </li><li style= "Display:" > Grape </li>$ ("li:visible"). CSS ("Background-color", "Blue");//Get Elements of Display:none

7.[attribute=value],[attribute!=value],[attribute*=value] Selector: The function is to get all the elements that are exactly the same as the property name and the property value, where [] is the bracket character dedicated to the property selector, The parameter attribute represents the property name, and the value parameter represents the property values. [Attribute!=value] means the opposite, while [Attribute*=value] is the entire element that gets the specified content in the property value .

<li title= "Vegetables" > Eggplant </li><li title= "fruit" > Banana </li><li title= "vegetables" > celery </li><li title = "Fruit" > Apple </li><li title= "fruit" > Watermelon </li>$ ("li[title= ' vegetables"). CSS ("Background-color", "green"); $ (" Input[type= ' Radio ']:checked "). Removeattr (" checked "); Gets the input of the property type= "Radio" and checks whether the

8.:first-child,:last-child selector: use the :first-child child element filter selector to get the first child element returned in each parent element, which is a collection, Selection processing of common multiple collection data

Exercises:

Title: in the page, add a <ul> element with multiple (at least 7) <li> elements in it, and add a <a> element.

Task:

Initially, only 5 <li> elements are displayed in the:<ul> element, which contains the "more" characters that are also included in the last <li> element,<a> element.

When you click on the "more" link, your content becomes "simplified" while all the <li> elements are displayed in the,<ul> element.

When you click on the "Simplify" link, your content becomes "more", while the,<ul> element only shows 5 elements that contain the last <li> element.

Code Answer:

<! doctype html>

jquery Tutorial 2.jquery Filter Selector