Home > Developer > Web Develop
Disclaimer: The first time to learn jquery selector only remember a few and CSS selector similar to several, here is listed in the book written on the various selector to facilitate future queries and the current learning
All the examples are from the book
Test screen:
First, the basic selector
#id, $ ("#test") Select the element with ID test (unique)
. Class $ (". Test") selects all elements of class test
Element $ ("P") selects all the <P> elements
* $ ("*") Select all the elements
Selector1,selector2,...., Selectorn $ ("Div,span,p.myclass") Select all <div>,<span> and have <p with class MyClass A set of elements for a > tag
demo1: Changing the background color of an element with ID one
Demo2: Change the background color of all elements of class mini
Demo3: Changing the element name is the background color of all elements of <div>
Demo4: Changing the background color of all elements
demo5: Change the background color of all <span> elements and the element ID is
Second, level selector
Get specific elements through hierarchical relationships between DOM elements, such as: descendant elements, child elements, neighboring elements, and sibling elements
$ ("ancestor descendant") $ ("div span") Select all <span> elements in <div>
$ ("Parent > Child") $ ("div > span") selection <div> element under element name is a sub-element of <span>
The difference is that the former retrieves all descendants, the latter just retrieves the son
$ ("prev + Next") $ (". One + div") Select the next <div> sibling element of class one
$ ("prev~siblings") $ ("#two ~div") selects all <div> sibling elements that follow the element with ID "a"
demo1: Change the background color of all <div> in <body>
Demo2: Change the background color of <body> inside <div> elements
Demo3: Change the background color of the next <div> sibling element of class one
Demo4: Change the background color of all <div> sibling elements behind an element with ID of.
There are more convenient ways to replace the following two selectors:
$ (". One + div") = = $ (". One"). Next ("Div") $ ("#prev ~div") ==$ ("#prev"). Nextall ("div");
The difference between $ ("prev~siblings") and the siblings () method is that the former only matches the siblings <div> elements behind the "prev" element. The latter is independent of location as long as the node of the peers can.
Third, filter selector
1) Basic Filter Selector
: First $ ("Div:first") selects all <div> elements in the initial <div> element
: Last $ ("Div:last") Select all <div> elements in the final <div> element
: Not (selector) $ ("Input:not (MyClass)") Pick <input> element with class not MyClass
: Even $ ("Input:even") Select index is even <input> element 0 count even
: Odd $ ("input:odd") Select index is odd <input> element
: EQ (Index) $ ("Input:eq (1)") pick <input> element with index equal to 1
: GT (Indfex) $ ("INPUT:GT (1)") Select <input> element with index greater than 1
: LT (Index) $ ("Input:lt (1)") Select <input> element with index less than 1
: Header $ (": Header") Select all the
: Animated $ ("div:animated") Select the <div> element that is performing the animation
: Focus $ (": Focus") pick the element that currently gets focus
demo1: Change the background color of the first <div> element
Demo2: Change the background color of the last <div> element
Demo3: Change the background color of the <div> element of the class not being one
Demo4: Change the background color of the <div> element with an even index value
Demo5: Change the background color of the <div> element with an odd index value
Demo5: Change the background color of <div> elements with index value equal to 3
Demo6: Change the background color of <div> elements with index values greater than 3
Demo7: Change the background color of the <div> element with index value I less than 3
2) Content Filter Selector
: Contains (text) $ ("Div:contains (" I ")") Select the <div> element that contains the text "I"
: Empty $ ("Div:empty") Select <div> empty elements that do not contain child elements (including text elements)
: Has (selector) $ ("Div:has (P)") selects <div> elements containing <p> elements
:p arent $ ("div:parent") Select the <div> element that has child elements (including text elements)
demo1: Change the background color of the <div element that contains the text "Di"
Demo2: Change the background color of <div> empty elements that do not contain child elements
Demo3: Change the background color of <div> elements containing class mini elements
Demo4: Changing the background color of <div> elements that contain child elements (including text elements)
3) Visibility Filter Selector
: Hidden $ (": Hidden") selects all elements that are not visible. including <input type= "hidden"/>,<div style= "Display:none;" > and <div style= "Visibility:hidden;" If you want to select only the <input> element, you can use $ ("Input:hidden");
: Visible $ ("div:visible") selects all visible <div> elements
demo1: Change the background color of all visible <div> elements
Demo2: Show hidden <div> elements
4) Attribute Filter Selector
[Attribute] $ ("div[id]") Select the element that owns the property ID
[Attribute=value] $ ("div[title=test]") Select the <div> element with the property title "Test"
[Attribute!=value] $ ("div[title!=test]") select attribute title not equal to ' test ' <div> element (the <div> element with no attribute title will also be selected)
[Attribute^=value] $ ("div[title^=test]") pick attribute title starting with "test" <div> element
[Attribute$=value] $ ("div[title$=test]") pick attribute title end with "test" <div> element
[Attribute*=value] $ ("div[title*=test]") pick attribute title contains ' test ' <div> element
[Attribute|=value] $ ("div[title|= ' en ')") select attribute title equals en or prefixed with en (the string followed by a hyphen '-') of the <div> element
[Attribute~=value] $ ("div[title~= ' UK ')") select attribute title space-delimited value contains the character of the UK <div> element
[Attribute1] [Attribute2] ... [Attributen] $ ("div[id][title$= ' Test ']") Select a <div> element that has an attribute ID and the property title ends with "test"
demo1: Change the background color of the <div> element that contains the attribute title
Demo2: Change the background color of the <div> element with the title value equal to "test"
Demo3: Change the background color of the <div> element for which the attribute value is not equal to "test"
Demo4: Change the background color of the <div> element with the attribute value starting with "TE"
demo5: Change attribute value title "est" end of the background color of the <div> element
demo6: Change the background color of the <div> element with the title "Es"
Dmeo7: Change the background color of the <div> element that contains the attribute ID and the attribute title contains "es"
Test screen
demo8: Change the background color of an element with the title equal to En or prefixed with en (the string followed by a hyphen '-')
demo9: Change attribute title space-delimited value contains the background color of the element in UK
5) Sub-element filter Selector
: Nth-child:eq (Index) matches only one element, while: Nth-child will match child elements for each parent element, and: Nth-child (Index) has index starting at 1, and EQ (index) is starting from 0
: Nth-child (even) can select an element with an even number of index values under each parent element
: Nth-child (odd) can select an element that has an odd index value under each parent element
: Nth-child (2) can select an element with an index value equal to 2 under each parent element
: Nth-child (3n) can select an element that has a multiple of 3 of the index value under each parent element (n starts from 1)
: Nth-child (3n+1)) can select the element under each parent element that is 3n+1 (n starts from 1)
: First-child:first only returns a single element, while the First-child selector matches the first child element for each parent element, such as $ ("ul li:first-child"); Select the first <li> in each <ul> Elements
: Last-child: Similarly,: Last returns only a single element, whereas: The Last-child selector matches the last child element for each parent element, such as $ ("ul Li:last-child") and selects the final <li of each <ul> > Elements
: Only-child $ ("ul Li:only-child") in <ul> Select is the only child element of the <li> element
demo1: Change the background color of the 2nd child element under the parent element of each class for one <div>
Demo2: Change the background color of the 1th child element under each class of <div> parent element of one
Demo3: Change the background color of the last child element under the <div> parent element of each class
Demo4: If class is the only child element under the <div> parent element of one, then the background color of the child element is changed
6) Form object property Filter Selector
: Enabled $ ("#form1: Enabled") selects elements that are available for all elements in a form with the id "Form1"
:d isabled $ ("#form2:d isabled") selects all the unavailable elements in a form with the id "Form2"
: Checked $ ("input:checked") Select All selected <input> elements (radio box, check box)
: Selected $ ("Select Option:selected") selects all selected option elements (drop-down list)
Test screen
demo1: Change the values of the <input> elements available in the form
Demo2: Changing the value of an unavailable <input> element in a form
Demo3: Gets the number of checkboxes selected
$ ("input:checked"). length
Demo4: Gets the contents of the drop-down box selected
$ ("select:selected"). Text ();
Four, form selector
: Input $ (": Input") Select all <input>, <textarea>, <select>, <button>
: Text $ (": Text") selects all single-line text boxes
:p Assword $ (":p assword") Select all the password boxes
: Radio $ (": Radio") Select all the radio boxes
: CheckBox $ (": CheckBox") Select all check boxes
: Submit $ (": Submit") Select all submitted buttons
: Image $ (": Image") Select all the image buttons
: Reset $ (": Reset") Select all reset Buttons
: Button $ ("button") selects all buttons
: File $ (": File") Select all upload Domains
: Hidden $ (": Hidden") selects all invisible elements
A bit late, the following example will not write!!!
The sharp jquery Series (iii)------All the way selector big party
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
