Entry function
$ (Document) .ready (function () {}); can be abbreviated as $ (function () {})
Selector
The basic selector
Element selector $ ( "p") all <p> id selector element #id $ ( "# lastname") id = "lastname" element
class selector .class $ ( ". intro") All class = "intro" to find all the elements of the elements $ ( "*") of all elements
Combination selector $ ( 'span, # two'); // combination selector to select a span element and two elements for the id
Select the current element $ (this) to select the current html element
Level selector we can put the relationship between all the nodes in the document, the traditional family relationships to describe, you can put the document as a genealogical tree,
Then the node with the node will direct relationship exists father and son, brother, grandparents and grandchildren of the.
Descendant elements, sub-elements, neighbors and siblings
. $ ( 'Body> div') css ( 'background', 'pink'); // div select child elements inside the body
$ ( 'Body div') css ( 'background', 'yellow');. // Select all div elements inside the body
$ ( 'One + div.') Css ( 'background', 'black');. // class to select one of the next sibling
. $ ( '# Two ~ div') css ( 'background', 'grey'); // div select id siblings of all elements of the back of two. Provided that have the same parent element
$ ( '# two') siblings ( 'div'):. elect to take #two div elements all peers, both front and rear position
Filter selector
: first $ ( "p: first ") first <p> element
: last $ ( "p: last ") last <p> element
: even $ ( "tr: even ") all even <tr> element
: odd $ ( "tr: odd" ) all odd <tr> element
: eq (index) $ ( " ul li: eq (3)") the fourth element in the list (index starts from 0)
: gt (NO) $ ( "ul li: gt ( 3)") lists the element index is greater than 3
: lt (no) $ ( " ul li: lt (3)") lists the elements of the index is less than 3
: header $ ( ": header" ) of all elements in the title <h1> - <H6>
: Animated executing all elements of animation
: Root html element
Element has (selector) comprises matching elements of the matching selector:
: contains (text) $ ( " div: contains ( 'W3School')") comprising all the elements specified string
: hidden $ ( "p: hidden ") all the hidden <p> element
: visible $ ( "table: visible ") all visible form
[attribute] $ (" [href] ") for any element with an href attribute
[attribute = value] $ (" [href = '#'] ") value of all the href attribute is equal to" # " element
[attribute! = value] $ ( "[href! = '#']") value of all the href attribute is not equal to "#" in the element
[attribute $ = value] $ ( "[href $ = '. jpg' ] ") values of all href attribute contains" .jpg "end element
Form selector
: input $ ( ": input" ) all <input> elements
: text $ ( "input: text ") all type = "text" of the <input> element
: password $ ( "input: password ") all type = "password "the <input> element
: radio $ (" input: radio ") all type =" radio "of <input> elements
: checkbox $ (" input: checkbox ") all type =" checkbox "in the <input> elements
: submit $ ( "input: submit") all type = "submit" the <input> elements
: reset $ ( "input: reset ") all type = "reset" of <input> element
: button $ ( "input: button ") All type = "button" of <input> elements
: image $ ( "input: image ") all type = "image" of the <input> elements
: file $ ( "input:file ") all type =" file "of <input> element
: not (selector) $ (" input: not (: empty) ") all is not empty input element
: enabled $ (" input: enabled ") all active the input element
: disabled $ ( "input: disabled ") all disabled input elements
: selected $ ( "input: selected ") all of the selected input element
: checked $ ( "input: checked ") all selected input elements
$ ( ' input: focus') is currently selected element of focus