JavaScript jQuery-2 jquery selector (jquery selector, basic selector, hierarchy selector, filter selector, form selector)

One, jQuery selector

Introduction to the JQuery Selector

-JQuery selector is similar to CSS selection (positioning elements, applying styles), enabling positioning elements, imposing behavior

-Use the JQuery selector to separate content from behavior

-Learn to use selectors is the basis of learning JQuery

The advantages of the JQuery selector

-Concise wording:

-$ () factory functions are used as a selector function in many JavaScript class libraries

-Support CSS1 to CSS3 selector

-JQuery selector supports CSS1, CSS2, and CSS3 selectors with a few unique selector usages

-No need to consider whether the browser supports these selectors when using the JQuery selector

-Perfect processing mechanism

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/6B/wKiom1b-QxiSJdydAAAmouzK0gQ133.png "title=" Web.png "alt=" Wkiom1b-qxisjdydaaamouzk0gq133.png "/>

Factory function $ ()

-in JQuery, regardless of which type of selector you use, start with a dollar sign $ and a pair of parentheses: $ ()

-All selectors that can be used in the style sheet can be placed in the quotation marks in the parentheses

Second, the basic selector

ID Selector

-Features: Fastest, try to use ID Selector

-function: Returns all elements that match the id attribute value

-Usage: $ ("#myDiv")

-Description: Returns all elements of the HTML page with ID mydiv

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/67/wKioL1b-RI6C1rJ-AABAYflfur0555.png "title=" Web.png "alt=" Wkiol1b-ri6c1rj-aabayflfur0555.png "/>

Class Selector

-function: Returns all elements that match the class attribute value

-Usage: $ (". ClassName")

-Description: Returns all elements of class classname in the HTML page

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/67/wKioL1b-RSfCGa-dAABDpTOju2c875.png "title=" Web.png "alt=" Wkiol1b-rsfcga-daabdptoju2c875.png "/>

Element Selector

-function: Returns all elements that match the element name

-Usage: $ ("elementname")

-Description: Returns all elements in an HTML page that are named ElementName

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/68/wKioL1b-Rhywq79tAABC7Yd4XD0760.png "title=" Web.png "alt=" Wkiol1b-rhywq79taabc7yd4xd0760.png "/>

Wildcard Selector

-function: Returns all elements of the current HTML page

-Usage: $ ("*")

-Description: Returns all elements in an HTML page

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/68/wKioL1b-RwLRelP8AAA8RJDVZBs550.png "title=" Web.png "alt=" Wkiol1b-rwlrelp8aaa8rjdvzbs550.png "/>

Merge selectors

-merge selectors. That is, the collection of all selectors

-merge the elements that match each selector back together

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/6C/wKiom1b-RpzSUOOuAABLTF4XGgQ546.png "title=" Web.png "alt=" Wkiom1b-rpzsuoouaabltf4xggq546.png "/>

Third, hierarchy selector

Select1 Space Select2

-After finding the node according to Select1, find the node in the child node that conforms to Select2 (important)

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7E/6C/wKiom1b-Rwegnxu_AABGCiLjFY0461.png "title=" Web.png "alt=" Wkiom1b-rwegnxu_aabgciljfy0461.png "/>

Select1 > Select2

-Only direct child nodes are found, no indirect child nodes are found

-Differs from $ (select1 space Select2) Selector, $ (Select1 > Select2) selector is to find descendant elements

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/68/wKioL1b-SBWgk2NOAABKAw9AEbg232.png "title=" Web.png "alt=" Wkiol1b-sbwgk2noaabkaw9aebg232.png "/>

Select1 + Select2

-Select the Select2 element immediately after the Select1 element

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7E/6C/wKiom1b-R7rj3p8DAABK2F5iMVU259.png "title=" Web.png "alt=" Wkiom1b-r7rj3p8daabk2f5imvu259.png "/>

Select1 ~ SELECT2

-Selects all SELECT2 elements after the Select1 element

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/68/wKioL1b-SJLQOAMMAABMc1byggw751.png "title=" Web.png "alt=" Wkiol1b-sjlqoammaabmc1byggw751.png "/>

Iv. Filter Selector

Introduction to filter selector:

-Filter selectors primarily filter out the required DOM elements through specific filtering rules

-The filter selector is characterized by a ":" Start

-Filter selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering and form filter selectors according to different filtering rules.

Basic Filter Selector:

-Filter selector to start with ":" or "[]"

-: First ONE element

-: Last Element

-: Not (selector) excludes selector

-: Even pick even rows

-: Odd pick odd lines

-: The EQ (index) subscript equals the element of index

-: The GT (index) subscript is larger than the element of index

-: The LT index subscript is less than the element of index

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/68/wKioL1b-Snqj4cHXAAAuA2wCOQE311.png "title=" Web.png "alt=" Wkiol1b-snqj4chxaaaua2wcoqe311.png "/>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/6C/wKiom1b-Se7TISuEAAHOXk5GS2Q467.png "title=" Web.png "alt=" Wkiom1b-se7tisueaahoxk5gs2q467.png "/>650" this.width=650; "src=" http://s5.51cto.com/wyfs02/M01/ 7e/6c/wkiom1b-sgehz_0raahiek61ng4073.png "title=" Web.png "alt=" Wkiom1b-sgehz_0raahiek61ng4073.png "/>650" this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/6C/wKiom1b-SlXQLb6OAAEyQQmDiTI116.png "title=" Web.png " alt= "Wkiom1b-slxqlb6oaaeyqqmditi116.png"/>

-The Content filter Selector contains:

-: Contains (text)

-: Empty

-: Has (selector)

-:p Arent

This article from the "Flying Ants" blog, declined to reprint!

JavaScript jQuery-2 jquery selector (jquery selector, basic selector, hierarchy selector, filter selector, form selector)