A comprehensive introduction to jquery's common selectors, filters, and methods _jquery

1. jquery object converted to DOM object

A.

var $CR = $ ("#cr"); jquery objects

var cr= $cr [0]; Dom Object

alert (cr.checked); Detect if a checkbox is selected

B.

var $cr =$ ("#cr"); jquery objects

var cr= $cr. Get (0); Dom Object

alert (cr.checked); Detect if a checkbox is selected

2.DOM object converted to jquery object

var Cr=document.getelementbyid ("Cr"); Dom Object

var $cr =$ (CR); jquery objects

Note: The most commonly used jquery objects are created by the $ () function, and the $ () function is a manufacturing facility for a jquery object

3.jQuery Selector

a.$ ("#test") select an element with the ID test

b.$ (". Test") selects all elements with the class test

c.$ ("P") Select all <p> elements

d.$ ("*") Select all elements

e.$ ("div span") Select all span elements in <div>

f.$ ("Div>span") Select the element name under <div> element is a child element of <span>

G.$ (". One+div") Select the next <div> element of class one

h.$ ("#two ~div") selects all the <div> sibling element ===$ ("#two") after the element with ID two. Nextall ("div") ===$ ("#two"). Siblings ("div") Select all sibling div with ID two element, regardless of position

4.jQuery Filter

a.$ ("Div:first") selects the first <div> element in all <div> elements

b.$ ("Div:last") selects the last <div> element in all <div> elements

c.$ ("Input:not (. myClass)") Select the class is not a myClass <input> element '

e.$ ("Input:even") select an even <input> element for an index

f.$ ("input:odd") Select index is odd <input> element

g.$ ("Input:eq (1)") Select <input> element with index equal to 1

h.$ ("INPUT:GT (1)") Select <input> element with index greater than 1 (note: Greater than 1, excluding 1)

i.$ ("Input:lt (1)") Select <input> element with index less than 1 (note: Less than 1, excluding 1)

j.$ (": Header") Select All

k.$ ("div:animated") Select the <div> element in which the animation is being executed

5. Content Filter Selector

a.$ ("Div:contains (' I ')") Select the <div> element that contains the text ' I '

b.$ ("Div:empty") Select a <div> empty element that does not contain child elements (including text elements)

c.$ ("Div:has (P)") Select the <div> element that contains the <p> element

d.$ ("Div:parent") Select the <div> element that owns the child element (containing the text element)

6. Visibility Filter

a.$ (": Hidden") selects all elements that are not visible, including <input type= "hidden"/>, <div style= "Display:none" ></div> and <div Style= "Visibility:hidden" ></div> element b.$ ("div:visible") Select all visible <div> elements

7. Attribute Filter Selector

a.$ ("Div[id]") Select the element that owns the property ID

b.$ ("div[title=test]") Select the <div> element with the property title "Test"

c.$ ("div[title!=test]") Select the attribute title is not equal to the <div> element of "test" (note: the <div> element with no attribute title is also selected)

d.$ ("div[title^test]") Select the <div> element that starts with the property title "Test"

e.$ ("div[title$=test]") Select the <div> element with the property title ending with "test"

f.$ ("div[title*=test]") Select the <div> element containing "test" in the property title

g.$ ("div[id][title$= ' Test ')" selects the <div> element that owns the property ID and the property title is closed with "test"

8. Child element Filter Selector

A.:nth-child (index/even/odd) selects the index child element or parity element under each parent element: EQ (index) matches only one element and is total 0, whereas: Nth-child will match child elements for each parent element, and: The index of Nth-child (index) is starting from 1.

B.:first-child only returns a single element, and: The First-child selector matches the first element, such as $ ("ul Li:first-child"), for each parent element; Select the first <li> element in each <ul>

C.:last-child selects the last child element of each parent element, as well: Last returns only a single element, and: The Last-child selector matches each parent element with the final child element such as $ ("UL li:last-child") Select each <ul The last <li> element in >

D.:o Nly-child If an element is the only child element in its parent element, it will be matched and will not be matched if the parent element contains other elements.

For example: $ ("ul Li:only-child") in <ul> Select is a unique child element of the <li> element: Nth-child () selector is a very common child element filter selector, detailed features are as follows:

A.:nth-child (even) can select elements with an even number of index values under each parent element

B.:nth-child (odd) can select an odd number of index values under each parent element

C.:nth-child (2) can select elements with an index value equal to 2 under each parent element

D.:nth-child (3n) can select an element with a multiple of 3 for the index value under each parent element, (n starting from 0)

E.:nth-child (3n+1) can select the element that is (3n+1) for the index value under each parent element.

(n starting from 0) for example:

a.$ (' Div.one:nth-child (2) '). CSS ("Background", "red") indicates the background color of the second child element under the <div> parent element of each class one.

b.$ (' Div.one:first-child '). CSS ("Background", "red") indicates the background color of the first child element under the <div> parent element of each class one.

c.$ (' Div.one:last-child '). CSS ("Background", "red") represents the background color of the last child element of a <div> parent element that changes each class one

d.$ (' Div.one:only-child '). CSS ("Background", "red") means to change the background color of this child element if there is only one child element under the <div> parent element of Class I

9. Form Object Properties Filter Selector

a.$ ("#form1: Enabled") Select all available elements in the form with ID "Form1"

b.$ ("#form2:d isabled") Select all unavailable elements in the form with ID "Form2"

c.$ ("input:checked") selects all selected <input> elements

d.$ ("select:selected") selects all option elements that are counted

e.$ (": Input") Select all <input><textarea><select><button> elements

f.$ (": Text") Select all Single-line text boxes

g.$ (":p assword") Select all Password boxes

H.$ (": Radio") Select all the radio boxes

i.$ (": CheckBox") Select all check boxes

j.$ (": Submit") Select all Submit Buttons

k.$ (": Image") Select all the image buttons

l.$ (": Reset") Select all the reset buttons

m.$ (": Button") Select All buttons

n.$ (": File") Select all the upload fields

o.$ (": Hidden") selects all invisible elements

$ (document). Ready (function{}) indicates that the DOM is ready to start window.onload= only one method can be registered, and it must be triggered after all content on the page has been loaded (picture, Css,js loaded)

11. Node Traversal next () Nextall () prev () Prevall () siblings () End () andself () parent () Children ()

12. Set Styles css () set the Style property attr ("Class", "C1") of the inline Style settings tab to set all the style addclass ("MyClass") of the label for the Class property assignment (no other styles are affected) class= "C1 C2" Removeclass ("MyClass") Remove style Toggleclass ("MyClass") if a style exists, the style is removed, and if no style is added hasclass ("MyClass") to determine if the style exists

13. The chain becomes $ (this). CSS ("Background-color", "Red"). Siblings (). CSS ("Background-color", "white");

The above jquery commonly used selector, filter, method comprehensive introduction is small series share to everybody's content, hope can give everybody a reference, also hope everybody support cloud habitat community.