Jquery gets the description of the selector of instance in CSS

Let's review the difference between elements and nodes before we start writing:

The element is one of the most widely used nodes in the W3C document object model (DOM).

Elements have associated "attributes."

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

So, from the perspective of the XmlElement class, it's easy to see the difference between XmlNode and XmlElement:

The XmlElement class is a node that has only "properties," whereas XmlNode is a node that has not only "properties," but also "children."

So, when we use them, if you want to get or set the innerText or innerXml in the node, then you need to use XmlNode; If you need to get or set the properties (parameters) of the node itself, you need to use XmlElement. Of course, you can also transform XmlNode with (XmlElement).

Now let's get down to business

In javascript, except for the id of the selector is relatively easy to pick some, others are not very easy to pick, jquery in this area is much better than it, provides a lot of methods to get mainly including

1. Basic selector (mainly including label selector, id selector, class selector, general selector, group selector)

$("#divId") gets the element with ID divId
  $("a") gets all < A> The element

$(".bgred ") gets the element of the used CSS class bgRed

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

$("#divId, a,.bgred ") gets three selectors that satisfy the criteria

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

2.1     Child element selector >   =============== ======== select the son element

<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 its usage below

2.2     Descendant selectors are represented directly by Spaces not only for sons but also for grandsons... =============== ======== select descendant elements

 <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       Next to the peer element selector all eligible elements can be selected mainly by selecting the next peer element of the specified element after the parallel element =============== ===========

   <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 peer element selector =============== ========= select all specified peer elements of a specified element

  <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, the form selector mainly selects the form, the time to pay attention to $(":input") note that the colon inside the quotation marks can also choose the type such as $(":button") but not much introduction

4. Basic filters mainly include

The name of the instructions For example, : first Matches the first element found Find the first line of the table :$("tr:first") : the last Matches the last element found Find the last line of the table :$("tr:last") : not selector () Removes all elements that match the given selector Find all unchecked input elements: $("input:not(:checked)") : even Matches all elements with an even index value, counting from 0 Find table 1, 3, 5... Line: $(tr: "even") : odd Matches all elements with an odd index value, counting from 0 Find lines 2, 4, and 6 of the table :$("tr:odd") : eq (index) An element that matches a given index value
Note :index counts from 0 Find line 2 :$("tr:eq(1)") : gt (index) Matches all elements greater than the given index value
Note :index counts from 0 Find the second and third rows, that is, the index values are 1 and 2, which is greater than 0 :$("tr:gt(0)") : lt (index) Select elements with an index less than N in the result set
Note :index counts from 0 Find the first and second rows, that is, the index values are 0 and 1, that is, less than 2 :$("tr:lt(2)") : the header Select all h1,h2, and p header tags. Add a background color to all within the page title: $(" : the header "). The CSS (" background ", "# EEE"); : animated Matches all the elements that are executing the animation Only execute an animation effect on an element that is not animated:

$(" # run "). Click (function () {
  $(" div: not (: animated) "). The animate ({left: "+ = 20"}, 1000);
});

5. Content filter (the children of the master node are text nodes)

The name of the instructions For example, : the contains (text) Matches the element that contains the given text Find all div elements containing "John" :$("div:contains('John')") : the empty Matches all empty elements that do not contain children or text Find all empty elements that do not contain children or text :$("td:empty") : has (the selector) Matches an element that contains the element that the selector matches Add a text class to all div elements that contain p: $("div:has(p)").addclass ("test"); : the parent Matches elements that contain child elements or text Find all td elements with child elements or text :$("td:parent")

6. Visibility filter & filter; The Visibility Filters

: hidden

: the visible

7. Attribute Filters

The name of the instructions For example, [attribute] Matches the element that contains the given attribute Find all div elements with id attributes:
$(" div [id] ") [attribute = value] An element that matches a given attribute with a particular value Find out that all the name attribute is the input element of the newsletter:
$(" input [name = 'newsletter'] "). The attr (" checked ", true); [attribute! = value] An attribute that matches a given attribute is an element that does not contain a particular value Find all the name attributes that are not input elements of the newsletter:
$(" input [name! = 'newsletter'] "). The attr (" checked ", true); [attribute ^ = value] An element that matches a given attribute starting with some value $(" input [name ^ = 'news'] ") [$= value attribute] Matches an element whose given attribute ends with some value Find all input elements whose names end in 'letter' :
$(" input [name $= 'letter'] ") [= value attribute *]

Matches the given attribute to an element that contains certain values

Find all input elements whose names contain 'man' :
$(" input [name * = 'man'] ")

[attributeFilter1] [attributeFilter2] [attributeFilterN] Composite property selector, used when more than one condition needs to be satisfied simultaneously. Find all the id attributes, and its name attribute ends in man:
$(" input [id] [$= 'man' name] ")

Child element filters The Child Filters

The name of the instructions For example, : the NTH - child (index/even/odd/equation)

Matches the NTH child or even element under its parent element

':eq(index)' matches only one element, and this will match children for each parent element. :nth-child starts at 1, and eq() starts at 0!

Can be used:
NTH child (even) -
: the NTH - child (odd)
: the NTH child (3 n) -
Child (2) : the NTH -
: the NTH child (3 n + 1) -
: the NTH - child (3 n + 2)

Find the 2nd li in each ul:
$(" ul li: the NTH - the child (2) ") First - the child

Matches the first child

':first' matches only one element, and this selector matches one child for each parent element

Find the first li in each ul:
$(" ul li: first - the child ") : the last - the child

Matches the last child

':last' matches only one element, and this selector matches one child for each parent element

Find the last li in each ul:
$(" ul li: the last - the child ") : only - child

If an element is the only child of a parent element, it will be matched

If the parent element contains other elements, it will not be matched.

Find li in ul that is a unique child element:
$(" ul li: only - child ")