Jquery getting the selector in css (example) _ jquery-js tutorial

This article mainly introduces how to use jquery to obtain the selector in css. If you need it, you can refer to it and hope to help you. Before writing, review the differences between elements and nodes:

Element is one of the most widely used nodes in the W3C Document Object Model (DOM.

The element has an associated "attribute ".

The XmlElement class has many methods to access its "attributes" (GetAttribute, SetAttribute, RemoveAttribute, GetAttributeNode, and so on ).

You can also use the Attributes attribute to return an XML Attribute Set that supports "name" or "Serial Number" access ".

From the explanation of the XmlElement class, we can easily understand the differences between the XmlNode and XmlElement classes:

XmlElement class is a node with only "attributes", while XmlNode is a node with not only "attributes" but also "subnodes.

Therefore, when using them, if you need to obtain or set innerText or innerXml in the node, you need to use XmlNode; if you need to obtain or set the node attributes (parameters), you need to use XmlElement. Of course, you can also use XmlElement to convert the XmlNode.

Start to enter the subject

In javascript, except for the id selector, it is better to take the IDs, but others are not very good. jquery is much better than it in this field, providing many methods to obtain the IDS.

1. Basic selector (mainly including tag selector, id selector, class selector, General selector, and group selector)

$ ("# PId") gets the element with the ID as pId
$ ("A") Get all elements

$ (". BgRed") gets the elements whose CSS class is bgRed.

$ ("*") Get all elements of the page

$ ("# PId, a,. bgRed") obtain three qualified selectors.

2. Hierarchical selector (mainly including child element selector, descendant element selector, adjacent peer element selector, and adjacent peer element selector)

2.1 Child element selector ======================== select a child element

The Code is as follows:

• Item 1


• Item 2
  
  • Nested item 1
  • Nested item 2
  • Nested item 3
  
  


• Item 3

Script $ ("ul. topnav> li" ).css ("border", "3px double red"); script

This is the official code. You can refer to the following usage:

2.2 The descendant selector uses a space to represent not only the child, but also the child... ====================== select the descendant element.

The Code is as follows:

Sibling to form:
Script $ ("form input" example .css ("border", "2px dotted blue"); script

2.3 peer element selector all matching conditions can be selected. The main option is to select a parallel element after an element ==========================select to specify next Generation Element of an element

The Code is as follows:

Script $ ("label + input" ).css ("color", "blue"). val ("Labeled! ") Script

2.4 adjacent peer element selector ====================== select all the specified peer elements of the specified element, you can separate several unspecified Elements

The Code is as follows:

P (doesn't match since before # prev)

Span # prev

P sibling

P sibling

P niece

Span sibling (not p)

P sibling

Script $ ("# prev ~ P "developer.css (" border "," 3px groove blue "); script

3. The form selector mainly selects the form and the time used. Pay attention to $ (": input"). Note that the colon in the quotation marks can also select the type, for example, $ (": button ").

4. Basic filters mainly include

Name	Description	Example
: First	Match the first element found	Find the first row of the table: $ ("tr: first ")
: Last	Match the last element found	Find the last row of the table: $ ("tr: last ")
: Not (selector)	Removes all elements that match the given selector.	Find all unselected input elements: $ ("input: not (: checked )")
: Even	Matches all elements with an even index value and starts counting from 0.	Search for rows 1, 3, 5... of a table: $ ("tr: even ")
: Odd	Matches all elements with odd index values and starts counting from 0.	Search for rows 2, 4, and 6 of a table: $ ("tr: odd ")
: Eq (index)	Matches an element with a given index value. Note: index starts counting from 0.	Find the second row: $ ("tr: eq (1 )")
: Gt (index)	Match All elements greater than the given index value Note: index starts counting from 0.	Find the third row, that is, the index value is 1 and 2, which is greater than 0: $ ("tr: gt (0 )")
: Lt (index)	Select elements whose index is less than N in the result set. Note: index starts counting from 0.	Find the first and second rows, that is, the index values are 0 and 1, which is smaller than 2: $ ("tr: lt (2 )")
: Header	Select All header labels of Type h1, h2, and p.	Add the background color to all titles on the page: $ (": header" ).css ("background", "# EEE ");
: Animated	Match all the elements that are executing the animation effect	Only one animation effect is executed for elements that do not execute the animation effect: $ ("# Run"). click (function (){ $ ("P: not (: animated)"). animate ({left: "+ = 20"}, 1000 ); });

5. Content Filter (the subnode of the master node is a text node)

Name	Description	Example
: Contains (text)	Match the elements that contain the given text	Find all p elements containing "John": $ ("p: contains ('john ')")
: Empty	Match All null elements that do not contain child elements or text	Find all empty elements that do not contain child elements or text: $ ("td: empty ")
: Has (selector)	Matches the element containing the element matched by the selector.	Add a text class to all p elements that contain p: $ ("p: has (p)"). addClass ("test ");
: Parent	Match an element containing child elements or text	Find all td elements containing child elements or text: $ ("td: parent ")

6. Visibility filter Visibility Filters

: Hidden

: Visible

7. Attribute filter Attribute Filters

Name	Description	Example
[Attribute]	Matches the element containing the given attribute.	Find all the p elements containing the id attribute: $ ("P [id]")
[Attribute = value]	Matching a given attribute is an element of a specific value	Find all the input elements whose name attribute is newsletter: $ ("Input [name = 'newsletter ']"). attr ("checked", true );
[Attribute! = Value]	Matching a given attribute is an element that does not contain a specific value	Find all input elements whose name attribute is not newsletter: $ ("Input [name! = 'Newsletter '] "). attr (" checked ", true );
[Attribute ^ = value]	Matching a given attribute is an element starting with some values	$ ("Input [name ^ = 'News']")
[Attribute $ = value]	Matches the given attribute with elements ending with some values.	Find all input elements whose names end with 'letter: $ ("Input [name $ = 'Letter ']")
[Attribute * = value]	Matching a given property is an element that contains certain values	Find all input elements whose names contain 'man: $ ("Input [name * = 'man']")
[AttributeFilter1] [attributeFilter2] [attributeFilterN]	Composite attribute selector, which must meet multiple conditions at the same time.	Find all the attributes with id and whose name attributes end with man: $ ("Input [id] [name $ = 'man']")

8. Child element filterChild Filters

Name	Description	Example
: Nth-child (index/even/odd/equation)	Match the nth child or parity element under the parent Element ': Eq (index)' matches only one element, and this matches the child element for each parent element. : Nth-child starts from 1, while: eq () is counted from 0! You can use: Nth-child (even) : Nth-child (odd) : Nth-child (3n) : Nth-child (2) : Nth-child (3n + 1) : Nth-child (3n + 2)	Search for 2nd li entries in each ul: $ ("Ul li: nth-child (2 )")
: First-child	Match the first child element ': First' matches only one element, and this selector matches one child element for each parent element.	Find the first li in each ul: $ ("Ul li: first-child ")
: Last-child	Match the last child element ': La' matches only one element, and this selector matches one child element for each parent element.	Find the last li in each ul: $ ("Ul li: last-child ")
: Only-child	If an element is the only child element in the parent element, it will be matched. If the parent element contains other elements, it will not be matched.	In ul, find the li that is the only sub-element: $ ("Ul li: only-child ")