Jquery CSS basic Selector

* Matches any element .(Match any element)

Statement $ ("*")

E Matches all element with Tag name E .( Matches all elements whose tag name is E. )

Declaration $ ("input ")

E F Matches all elements with Tag name f that are descendents of E .( If the tag name is F Descendant Node All elements )

Statement $ ("ul ")

Corresponding HTML:

<UlClass = "mylist">
<Li> <AHref = "http://jquery.com"> jquery supports </a>
<Ul>
<Li> <a href = "css1"> css1 </a> </LI>
<Li> <a href = "css2"> css2 </a> </LI>
<Li> <a href = "css3"> css3 </a> </LI>
<Li> basic XPath </LI>
</Ul>
</LI>
<Li> jquery also supports
<Ul>
<Li> Custom selectors </LI>
<Li> form selectors </LI>
</Ul>
</LI>
</Ul>

E> F matches all elements with Tag name f that are direct children of E .(If the tag name is FDirect subnodeAll elements)

Statement $ ("Ul> li ")

Note that $ ("Ul> A") is incorrect because a is not a direct subnode of ul.

Corresponding HTML:

<UlClass = "mylist">
<Li> <A href = "http://jquery.com"> jquery supports </a>
<Ul>
<Li> <a href = "css1"> css1 </a> </LI>
<Li> <a href = "css2"> css2 </a> </LI>
<Li> <a href = "css3"> css3 </a> </LI>
<Li> basic XPath </LI>
</Ul>
</LI>
<Li> jquery also supports
<Ul>
<Li> Custom selectors </LI>
<Li> form selectors </LI>
</Ul>
</LI>
</Ul>

E + F matches all elements F immediately preceded by sibling E .(Match all the f elements following the E element --- E and F)

Declaration $ ("label + input ") 

Note that it must be a closed Tag Element (the Blue annotation below), and all f elements must be obtained.

Incorrect understanding$ ("Div + label") is incorrect

Because the corresponding HTML is not closely related to the child-parent relationship

Html<Div> <label> some images: </label> </div>

 

Corresponding HTML:

<Div>
<Label> Radio group:</Label>
<InputType = "radio" name = "radiogroup" id = "Radioa" value = ""/>A
<Input type = "radio" name = "radiogroup" id = "radiob" value = "B"/> B
<Input type = "radio" name = "radiogroup" id = "radioc" value = "C"/> C
</Div>

E ~ FMatches all elements F preceded by any sibling E .(All f elements after matching E elements ---- E and FNoNext)

Declare $ ("Div ~ Button ")

Or$ ("Div ~ Tabel ")

Note that it must be a closed Tag Element (the Blue annotation below), and all f elements must be obtained.

Corresponding HTML:

<Div>
<Label> radio group: </label>
<Input type = "radio" name = "radiogroup" id = "Radioa" value = "A"/>
<Input type = "radio" name = "radiogroup" id = "radiob" value = "B"/> B
<Input type = "radio" name = "radiogroup" id = "radioc" value = "C"/> C
</Div>
<Tabel>

<Tr> <TD> </tr>

<Tr> <TD> </tr>

</Tabel>
<ButtonType = "Submit" id = "submitbutton"> submit </button>

E: Has (f) matches all elements with Tag name e that have at least one descendent with Tag name f.

(Matches all the elements of the child node whose Tag Name Is E and at least one tag name is F.)

Declaration $ ("Div: Has (IMG )")

Or$ ("Ul: Has (UL )")

Note that if there is has, there will be not;Therefore, the relationship indicating not can be declared

$ ("Div: Not (: IMG )")

Has diagram $ ("Div: Has (IMG )")

Not graph $ ("Div: Not (: IMG )")

Corresponding HTML:

<Div>
<IMGSrc = "images/image.1.jpg" id = "hibiscuz" alt = "hibiscuz"/>





</Div>

E. c matches all elements e with class name c. Omitting e is the same as *. C .(Matches all Element E with class name C, which is equivalent to *. C.)

Declaration $ ("Ul. mylist ")

Or$ ("*. Mylist ")

Note that the class name is the attribute name of the HTML class or the cssclass attribute name of the Aspx.

Corresponding HTML:

<UlClass = "mylist">
...

</Ul>

E # I matches Element E with ID of I. Omitting e is the same as * # I .(The unique e that matches the ID property value as I; # I is equivalent to * # I)

Declaration $ ("Div # somediv ")

 

Corresponding HTML:

<DivId = "somediv">

This is a & lt; Div & gt; with an ID of <tt> somediv </tt>

</Div>

E [a] matches all elements e with attribute a of any value. (match all elements e with attribute a, regardless of the value of attribute)

Declare $ ("Div [title]") or $ ("input [type]")

Corresponding HTML:

<DivTitle = "mytitle1"> <Span> Hello </span> </div>
<Div Title = "mytitle2"> <span> goodbye </span> </div>

E [A = V] matches all elements e with attribute a whose value is exactly v.(Matching all Element E, the value of attribute a is V)

Declaration $ ("input [type = radio]")

Corresponding HTML:

<InputType = "radio"Name = "radiogroup" id = "Radioa" value = "A"/>
<Input type = "radio" name = "radiogroup" id = "radiob" value = "B"/> B
<Input type = "radio" name = "radiogroup" id = "radioc" value = "C"/> C

E [A ^ = V] matches all elements e with attribute a whose value begins with v.(Matching all Element E, the value of attribute a starts with V)

Declaration $ ("input [type ^ = rad]")

Corresponding HTML:

<InputType = "radio"Name = "radiogroup" id = "Radioa" value = "A"/>
<Input type = "radio" name = "radiogroup" id = "radiob" value = "B"/> B
<Input type = "radio" name = "radiogroup" id = "radioc" value = "C"/> C

E [A $ = V] matches all elements e with attribute a whose value ends with v.(Matching all Element E, the value of attribute a ends with V)

Declare $ ("input [type $ = ox]") or $ ("a[href$=.pdf]")

Corresponding HTML:

<InputType = "checkbox"Name = "checkboxes" id = "checkbox1" value = "1"/> 1
<Input type = "checkbox" name = "checkboxes" id = "checkbox2" value = "2"/> 2
<Input type = "checkbox" name = "checkboxes" id = "checkbox3" value = "3"/> 3
<Input type = "checkbox" name = "checkboxes" id = "checkbox4" value = "4"/> 4

E [A * = V] matches all elements e with attribute a whose value contains v.(Matching all Element E, the value of attribute a contains V)

Declaration $ ("input [type * = Eck]")

Corresponding HTML:

<InputType = "checkbox"Name = "checkboxes" id = "checkbox1" value = "1"/> 1
<Input type = "checkbox" name = "checkboxes" id = "checkbox2" value = "2"/> 2
<Input type = "checkbox" name = "checkboxes" id = "checkbox3" value = "3"/> 3
<Input type = "checkbox" name = "checkboxes" id = "checkbox4" value = "4"/> 4