jquery Gets the selector in the CSS (example tutorial) _jquery

Before you start writing, review the differences between elements and nodes:

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

Element has an associated "property".

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

You can also use the "Attributes" property to return an "XML attribute set" that supports "first name" or "ordinal" access.

So, from the interpretation of the XmlElement class, it's easy to know the difference between XmlNode and XmlElement classes:

The XmlElement class is a node that has only "properties", and XmlNode is a node that has not only "properties" but also "child nodes."

So, when we use them, if you need to get or set the innertext or InnerXml in the node, then you need to use XmlNode, and if you need to get or set the attributes (parameters) of the node itself, you need to use the XmlElement , of course, you can also use (XmlElement) to convert to XmlNode.

Now let's get to the point.

In JavaScript, in addition to the ID of the selector is better to take some, the other is not very good to take, jquery in this piece is much better than it, provides a lot of access methods mainly include

1. Base selector (mainly including tag Selector, ID selector, class selector, universal selector, group selector)

$ ("#divId") get the element with ID divID
$ ("a") get all <a> elements

$ (". Bgred") gets the element that the CSS class used is bgred

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

$ ("#divId, A,. bgred") gets three selectors that meet the criteria

2, the level selector (mainly includes child element selector, descendant element selector, next to sibling element selector, neighbor sibling element selector)

2.1 child element Selector > =============== Select son element

Copy Code code as follows:

<ul class= "Topnav" >
<li>item 1</li>
<li>item 2
<ul><li>nested Item 1</li><li>nested Item 2</li><li>nested Item 3</li>< /ul>
</li>
<li>item 3</li>
</ul>

<script> $ ("Ul.topnav > Li"). CSS ("Border", "3px double red");</script>

This is the official code, you can refer to the following usage

2.2 Descendant selectors are expressed in spaces that include not only sons but also grandchildren ... =============== select descendant elements

Copy Code code as follows:

<form>
<div>form is surrounded by the green outline</div>
<label>Child:</label>
<input name= "Name"/>

<fieldset>
<label>Grandchild:</label>
<input name= "Newsletter"/>
</fieldset>

</form>
Sibling to form: <input name= "None"/>
<script> $ ("form input"). CSS ("Border", "2px dotted blue");</script>

2.3 Adjacent to the sibling element selector all eligible can be selected to be a parallel element after selecting an element =============== Select the next peace element for the specified element

Copy Code code as follows:

<form>

<label>Name:</label>
<input name= "Name"/>
<fieldset>
<label>Newsletter:</label>

<input name= "Newsletter"/>
</fieldset>
</form>
<input name= "None"/>
<script>$ ("label + Input"). CSS ("Color", "Blue"). Val ("labeled!") </script>

2.4 Adjacent sibling element selector =============== selects all the specified peace elements of the specified element, and can be separated by several elements that are not specified

Copy Code code as follows:

<div>div (doesn ' t match since before #prev) </div>
<span id= "prev" >span#prev</span>
<div>div sibling</div>

<div>div sibling <div id= "small" >div niece</div></div>
<span>span sibling (not div) </span>
<div>div sibling</div>
<script>$ ("#prev ~ div"). CSS ("Border", "3px Groove Blue");</script>

3, form selector mainly select the form, the time to pay attention to $ (": input") Note the colon inside the quotation marks can also select a type such as $ (": Button") but more about

4, the basic filter mainly includes

Name	Description	Example
: A	Matches the first element found	Find the first row of a table: $ ("Tr:first")
: Last	Match the last element found	Find the last line in the table: $ ("Tr:last")
: Not (selector)	Removes all elements that match a given selector	Find all unselected input elements: $ ("Input:not (: Checked)")
: Even	Matches all elements with an even number of index values, counting starting from 0	Find table 1, 3, 5 ... line: $ ("Tr:even")
: Odd	Matches all elements with an odd index value starting at 0 counting	Find 2, 4, 6 rows of a table: $ ("tr:odd")
: EQ (Index)	An element that matches a given index value Note: Index starts counting from 0	Find the second row: $ ("Tr:eq (1)")
: GT (Index)	Matches all elements that are greater than the given index value Note: Index starts counting from 0	Find the second third row, where the index value is 1 and 2, which is greater than 0: $ ("tr:gt (0)")
: LT (Index)	Select elements with less than N in the result set index Note: Index starts counting from 0	Find the first second row, where the index value is 0 and 1, which is smaller than 2: $ ("Tr:lt (2)")
: Header	Select header labels for all h1,h2,p categories.	Add background color to all headings in the page: $ (": Header"). CSS ("Background", "#EEE");
: Animated	Match all elements that are performing an animation effect	Only one animation effect is performed on an element that is not performing an animation: $ ("#run"). Click (function () { $ ("Div:not (: Animated)"). Animate ({left: "+=20"}, 1000); });

5, Content filter (the child node of the primary node is a text node)

Name	Description	Example
: Contains (text)	Matches the element that contains the given text	Find all DIV elements containing "John": $ ("Div:contains (' John ')")
: Empty	Matches all empty elements that do not contain child elements or text	Finds all empty elements that do not contain child elements or text: $ ("Td:empty")
: Has (selector)	Matches elements that contain the matching elements of the selector	Add a text class to all DIV elements that contain p elements: $ ("Div:has (P)"). AddClass ("test");
:p arent	Matches elements that contain child elements or text	Find all TD elements that contain child elements or text: $ ("td:parent")

6, the visibility of the filter Visibility Filters

: Hidden

: Visible

7, Attribute filter attributes Filters

Name	Description	Example
[Attribute]	Matches the element that contains the given property	Find all DIV elements that contain ID attributes: $ ("Div[id]")
[Attribute=value]	Match the given property is an element of a particular value	Finds the input element for which all name properties are newsletter: $ ("input[name= ' newsletter ']"). attr ("Checked", true);
[Attribute!=value]	Match the given property is an element that does not contain a specific value	Find the INPUT element for which all name properties are not newsletter: $ ("input[name!= ' newsletter ']"). attr ("Checked", true);
[Attribute^=value]	Matches the given property as an element starting with some value	$ ("input[name^= ' News ']")
[Attribute$=value]	Matches a given property as an element that ends with some value	Find all input elements with the end of ' letter ' in Name: $ ("input[name$= ' letter ']")
[Attribute*=value]	Matches the given property to be an element that contains some values	Find all input elements that name contains ' man ': $ ("input[name*= ' Man ']")
[AttributeFilter1] [AttributeFilter2] [Attributefiltern]	A composite property selector that needs to be used when multiple conditions are met.	All of the ID attributes are found, and its Name property ends with a man: $ ("input[id][name$= ' Man ']")

8. Sub-element filter child Filters

Name	Description	Example
: Nth-child (Index/even/odd/equation)	Matches the nth child or parity element under its parent element ': EQ (index) ' matches only one element, and this will match the child elements for each parent element. : Nth-child starting from 1, and: Eq () is 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)	Find the 2nd Li in each UL: $ ("UL Li:nth-child (2)")
: First-child	Match first child element ': A ' 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 ': Last ' 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.	Find in UL is the only child element of Li: $ ("ul Li:only-child")