Home > Developer > Web Develop
1. #id: Select an element based on the given ID, return a single element , such as $ ("#test"), select the element with ID test
2. Class: Returns the collection element, $ (". Test"), and selects all elements of class test based on the given class name matching element
3. Element: More given element name matching element, return collection element, $ ("P"), select all P elements
4. *: Match all elements, $ ("*"), select all elements
5. Selector1,selector2...selectorn, match each selector to the element after merging returns $ ("Div,span,p.myclass") Select All <div>,<span> And a set of elements that have class MyClass <p>
Two: Hierarchy SelectorAll returned are collection elements.
<body> <divclass=" One"Id=" One">div with id one,class as one</div> <divclass=" One"Id=" Both"title="Test">div with ID one,class as test two,title<divclass="Mini"title=" Other">class to Mini,title for other</div> <divclass="Mini"title="Test">class to Mini,title for test</div> </div> <divclass=" One"> <divclass="Mini">classFor mini</div> <divclass="Mini">classFor mini</div> <divclass="Mini">classFor mini</div> <divclass="Mini"title="TESST">classFor Mini,title tesst</div> </div> <div style="Display:none;" class="None"The display of >style is the div</div> of none <divclass="Hide">class for"Hide"The div</div> <div> contains the type of input"Hide"The Div<input type="Hidden"Size="8"/></div> <span id="Mover"> is taking action to draw the span element </span></body>
1. $ ("ancestor descendant"), select all the descendant (descendants) elements in the ancestor element $ ("div span") Select all <span> elements in <div>
$ ("body div"). CSS ("background"#bbffaa ");2. $ ("Parent>child") selects the child element under the parent element, which differs from $ ("ancestor descendant"), and $ ("ancestor descendant") selects the descendant element
$ ("Div>span" selection <div> elements under element names are child elements of <span>)
$ ("body >div"). CSS ("background""#bbffaa ");Visible $ ("Parent>child") is the child element that selects the first level of the parent
3.$ (' Prev+next ') selects the next element ('. One+div ') immediately following the Prev element to select the next <div> element of class one
Next () method to replace the $ (' prev+next ') selector
$ (". One+div") ==$ (". One"). Next ("div")
4.$ (' prev~siblings ') selects all siblings elements after the Prev element $ (' #two ~div ') selects the <div> sibling element after the element with the ID of one---Select sibling elements
Nextall () method to replace $ (' prev~siblings ')
$ ("#prev ~div") ==$ ("#prev"). Nextall ("div")
3 and 4 are less used
Three: Filter Selector
Filter selector: Filters the required DOM elements primarily through a specific filter selector rule
1.: First SELECT Element $ ("Div:first") Select the first element in all Div
2.: Last Select Final element $ ("Div:last") Select the last element in all Div
3.: Not (selector) removes all elements matching the given selector $ ("Input:not (. MyClass)") Select Class not MyClass <input> element
4.: Even selects all elements with an even number, index from 0 to $ ("Input:even") Select index is even <input>
5.: Odd Select index is an odd number of all elements, index starting from 0 $ ("input:odd") Select index odd <input>
Content Filter Selector1.: Contains (text) Select the element containing the text content as "text" $ ("div:contains (' Test ')") Select the <div> element containing the text test
2.: Empty select No child element or null element of text $ ("div:empty")----do not understand
Visibility Filter Selector1.: Hidden Select all invisible Elements $ (": hidden") Pick all invisible elements
2.: Visible Select all visible elements $ ("div:visable") Select all visible <div> elements
Note: The selector (": Hidden) contains not only elements of the style property display as" None ", but also text-hidden fields <input type=" hidden ">
Attribute Filter SelectorA property filter Selector is a property of an element that gets the corresponding element
1.[attribute] Select the element that owns this attribute $ ("div[" id "]") Select the element that owns the property ID
2.[attribute=value] Select element with attribute value = value $ ("div[titile=test]") select attribute title to test div element
2.[attribute! =value] Select the attribute value is not an element of value $ ("div[titile! =test] ") Select attribute title is not a test div element
Form object property Filter Selector1.: Enable Select all available elements $ ("#form1: Enable") Select all available elements in a form with id "Form1"
2.:d isable Select all unavailable elements $ ("#form1:d isable") Select all the unavailable elements in the form with the id "Form1"
3.: Checked Select all check box selected element $ ("input:checked") Select all selected elements in input
4.: Selected Select All drop-down list selected element $ ("select:selected") Select All selected element options
Four: Form selectorThe jquery selector
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
