Summary of the jquery selector

jquery Selector

The jquery selector is the exact selection of the element you want to apply.

jquery's element selector and property selector allow you to select HTML elements by tag name, property name, or content.

jquery element Selector table

Selector Selector	Instance	Select
*	$("*")	All elements
#ID	$ ("#lastname")	id= elements of "LastName"
. class	$ (". Intro")	All elements of class= "Intro"
Element	$ ("P")	All <p> elements
. class. class	$ (". Intro.demo")	All class= "Intro" and Class= "demo" Elements
: First	$ ("P:first")	First <p> Element
: Last	$ ("P:last")	Last <p> Element
: Even	$ ("Tr:even")	All even <tr> elements
: Odd	$ ("tr:odd")	All odd <tr> elements
: eq (index)	$ ("UL Li:eq (3)")	Fourth element in the list (index starting from 0)
: GT (no)	$ ("UL li:gt (3)")	List elements with index greater than 3
: LT (no)	$ ("UL Li:lt (3)")	List elements with index less than 3
: Not (selector)	$ ("Input:not (: Empty)")	All input elements that are not empty
: Header	$ (": Header")	All heading elements
: Animated		All animated elements
: Contains (text)	$ (": Contains (' W3school ')")	All elements containing the specified string
: Empty	$ (": Empty")	All elements with No child (element) nodes
: Hidden	$ ("P:hidden")	All hidden <p> elements
: Visible	$ ("table:visible")	All the visible tables
S1,s2,s3	$ ("Th,td,.intro")	All elements with a matching selection
[attribute]	$ ("[href]")	All elements with an HREF attribute
[attribute=value]	$ ("[href= ' # ']")	The value of all href attributes equals "#" elements
[attribute! =value]	$ ("[href!= ' # ']")	The value of all HREF attributes is not equal to the "#" element
[attribute$=value]	$ ("[href$= '. jpg ']")	The value of all HREF attributes contains elements ending with ". jpg"
: input	$ (": input")	All <input> elements
: Text	$ (": Text")	All <input> elements of type= "text"
:p Assword	$ (":p Assword")	All <input> elements of type= "password"
: Radio	$ (": Radio")	All <input> elements of type= "Radio"
: checkbox	$ (": checkbox")	All <input> elements of the type= "checkbox"
: Submit	$ (": Submit")	All <input> elements of type= "submit"
: RESET	$ (": Reset")	All <input> elements of type= "reset"
: button	$ (": Button")	All <input> elements of type= "button"
: Image	$ (": Image")	All <input> elements of type= "image"
: File	$ (": File")	All <input> elements of type= "file"
: Enabled	$ (": Enabled")	All the active input elements
:d isabled	$ (":d isabled")	All disabled input elements
: Selected	$ (": Selected")	All selected input elements
: Checked	$ (": Checked")	All selected input elements

jquery Basic selector:

$ (document). Ready (function () {

ID Selector: The specified ID name

$ (' #div1 '). CSS (' background ', ' #000 ');

Class Selector: Traversing class

$ ('. Div1 '). CSS (' background ', ' #000 ');

Element selector: Traversing HTML elements

$ (' div '). css (' background ', ' #000 ');

* Selector: Traverse all elements

$ (' * '). CSS (' background ', ' #000 ');

Parallel selector:

$ (' P,div '). CSS (' background ', ' #000 ');

})

jquery Hierarchy Selector:

$ (document). Ready (function () {

">" Immediate child element

$ (' div>p '). CSS (' background ', ' #000 ');

"+" the next sibling element equals the div

$ (' div+table '). CSS (' background ', ' #000 ');

All sibling elements of the "~" div, equivalent to the Nextall () method

$ (' div~p '). CSS (' background ', ' #000 ');

})

jquery Filter Selector:

$ (document). Ready (function () {

One: Basic filter Selector

: First and last to get one or the final element

$ (' Li:first '). CSS (' background ', ' #000 ');

$ (' Li:last '). CSS (' background ', ' #000 ');

: not get non-element

$ (' Li:not '). CSS (' background ', ' #000 ');

: Even and odd get an even or odd index element, the index is zero-based, even represents an even number, odd represents an odd number

$ (' Li:even '). CSS (' background ', ' #000 ');

$ (' li:odd '). CSS (' background ', ' #000 ');

: eq (x) gets the specified index element

$ (' Li:eq (2) '). CSS (' background ', ' #000 ');

: GT (x) and: LT (x) gets greater than x index or less than the element you want to index

$ (' Li:gt (2) '). CSS (' background ', ' #000 ');

$ (' Li:lt (3) '). CSS (' background ', ' #000 ');

: Header gets H1~h6 header element

$ (' Li:header '). CSS (' background ', ' #000 ');

Two Content Filter selectors

: Contains (text) gets the element that contains text

$ (' Li:contains (text) '). CSS (' background ', ' #000 ');

: Empty gets an element that contains no child elements or empty text

$ (' Li:empty '). CSS (' background ', ' #000 ');

: Has (selector) gets the element that the selector matches

$ (' Li:has (selector) '). CSS (' background ', ' #000 ');

: Parent Gets the element that contains the child element or text

$ (' ul li:parent '). CSS (' background ', ' #000 ');

Three-visibility Filter Selector

: Hidden Gets an invisible element

jquery to 1.3.2: The hidden selector matches only display:none or <input type= "hidden"/> elements and does not match Visibility:hidden or opacity:0 elements

: Visible Capture Element

})

Case reference

<! DOCTYPE html>

<meta charset= "UTF-8" >
<title>Document</title>
<style>
. subcategorybox{
width:800px;
border:1px solid #ccc;
Overflow:hidden;
font-size:16px;
}
. Subcategorybox li{
Float:left;
width:240px;
List-style:none;
}
. showmore{
Clear:both;
Text-align:center;
padding:5px 0 5px;
}
. ShowMore a{
Display:inline-block;
border:1px solid Green;
padding:5px;
}
. ShowMore a:hover{
Background-color:light-green;
}
</style>
<script src= "Http://code.jquery.com/jquery-1.8.3.min.js" ></script>
<body>
<div class= "Subcategorybox" >
<ul>
<li><a href= "#" > Canon </a><i> (30440) </i></li>
<li><a href= "#" > Sony </a><i> (27220) </i></li>
<li><a href= "#" > Samsung </a><i> (20808) </i></li>
<li><a href= "#" > Nikon </a><i> (17821) </i></li>
<li><a href= "#" > Panasonic </a><i> (12289) </i></li>
<li><a href= "#" > Casio </a><i> (8242) </i></li>
<li><a href= "#" > Fuji </a><i> (14894) </i></li>
<li><a href= "#" > Kodak </a><i> (9520) </i></li>
<li><a href= "#" > Pentax </a><i> (2195) </i></li>
<li><a href= "#" > Ricoh </a><i> (4114) </i></li>
<li><a href= "#" > Olympus </a><i> (12205) </i></li>
<li><a href= "#" > BenQ </a><i> (1466) </i></li>
<li><a href= "#" > Patriot </a><i> (3091) </i></li>
<li><a href= "#" > Other brand Cameras </a><i> (7275) </i></li>
</ul>
<div class= "ShowMore" >
<a href= "more.html" ><span> Show All brands </span></a>
</div>
</div>
</body>
<script>
$ (function () {//wait for DOM to finish loading
var $category = $ (". Subcategorybox LI:GT (4): Not (: last) "); Get a branded collection object with an index value greater than 4 (except for the last one)
$category. Hide (); Hide matching elements
var $toggleBtn = $ ("Div.showmore>a"); Get the Show All Brands button
$toggleBtn. Toggle (function () {
Element display
$category. Show (); Show $category
$ (this). FIND ("span"). Text ("Thin display brand"); Change button text
$(". Subcategorybox Li ")
. Filter (": Contains (' Canon '),: Contains (' Nikon '),: Contains (' Olympus ')")
. addclass ("promoted"); Recommended Brand Highlighting
return false; Hyperlinks do not jump
},
function () {
Element hiding
$category. Hide (); Hide matching elements
$ (this). FIND ("span"). Text ("Show All Brands"); Change button text
$(". Subcategorybox li "). Removeclass (" promoted "); All elements removed "promoted"
return false; Hyperlinks do not jump
});
});
</script>
Summary of the jquery selector