jquery Learning Selector

Recently saw the "sharp jquery", want to systematically re-organize the relevant knowledge of jquery

Selectors are the foundation of jquery, event handling, traversal of DOM and AJAX operations all depend on selectors, this time we start with

selector says.

First of all, now jquery is supported CSS1 to CSS3 selector

There are four main categories: basic selector, hierarchy selector, filter selector, form selector

One, basic selector

(1) #id

(2). class

(3) Element

(4) *

(5) Selector1,selector2,......, Selectorn (returns after merging elements matching each selector)

exp:$ ("Div,span,p.myclass") selects all <div>,<span> and a group of elements in the <p> tag with class MyClass

Second, hierarchy selector

(1) $ ("ancestor descendant")

exp:$ ("div span") Select <span> in <div>

(2) $ ("Parent>child")

exp:$ ("Div>span") Select <div> below child element named <span>

(3) $ ("Prev+next")

exp:$ (". Myclass+div") pick the next <div> sibling element with class named "MyClass"

(4) $ ("prev~sibilings")

exp:$ ("#mine ~div") selects all <div> sibling elements after the id "Mine" element

Three, filter selector (divided into five kinds)

"1" Basic filter Selector

(1): First

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

(2): Last

(3): Not (selector) removes all elements that match a given selector

exp:$ ("Input:not (. myClass)") Choose Class not MyClass <input>

(4): Even all element indexes with even number selected index starting from 0

(5): Odd Selection index is an odd number of all elements

(6): the EQ (index) index equals the element of index

(7): the GT (index) index is larger than the element of index

(8): LT (index) index is less than the element of index

(9): header selects all the header elements

exp:$ (": Header") Select all

(Ten): animated Select the element that is performing the animation

(one): Focus selects the element that currently takes focus

"2" Content filter Selector

(1): Contains (text) Select the element containing the text content as "text"

exp:$ ("Div:contains (' Me)") Select the <div> element containing the text "Me"

(2): Empty Select a null element that does not contain child elements or text

(3): Has (selector) selects elements containing all matching elements of the selector

exp:$ ("Div:has (P)") select the <div> element containing the <p> element

(4): Parent selects elements that contain child elements or text

"3" Visibility filter Selector

(1): Hidden Select all elements that are not visible

(2): All visible elements are selected by visible

"4" Property filter Selector

(1) [attr] Select the element that owns this property

exp:$ ("Div[id]") Select the div with ID

(2) [attr=val] Select an element with a property value equal to Val

(3) [attr!=val] elements without this attribute will also not be selected

(4) [attr^=val] Select the element with the attribute value starting with Val

exp:$ ("Div[title]^=test") pick attribute title div element starting with "test"

(5) [Attr$=val] Select an element with an attribute ending in Val

(6) [Attr*=val] Select the element containing Val for the attribute value

(7) [Attr|=val] Select an element that is equal to the given string or prefixed with the string (the string followed by the hyphen "-")

exp:$ (' div[title|= ' en "]) Select the attribute title equals" en "or an element prefixed with" en "

(8) [Attr~=val] Select attribute to include a given element in a space-delimited value

exp:$ (' div[title~= "UK"]) select the title with a space-delimited value containing the "UK" element

(9) [ATTR1][ATTR2][ATTRN] Composite attribute selection, once per selection, reduced once

"5" Sub-element filter Selector

(1) nth-child (index/even/odd/equation) index starting from 1

• : Nth-child (3n+1) selects all elements under each parent element (3N+1)

(2): First-child

(3): Last-child

(4): Only-child

"6" Form object property Filter Selector

(1): Enabled selects all available elements

(2): Disable Select all elements that are not available

(3): Checked

(4): Selected

Four, form selector

(1): Input Select all <input> <textarea> <select> <button> elements

(2): Text

(3): password

(4): Radio

(5): Chechbox

(6): Submit

(7): Image

(8): RESET

(9): button

(Ten): File

(one): Hidden

Note:

(1) The attribute value contains "." "," "#" need to use "\ \" to transfer, or will error

(2) If the version under 1.3.11 is used, you need to add @ before the property selector

(3) The space in the selector requires special attention,

exp:$ ('. Test:hidden ') Select the hidden element inside the element class "test"

$ ('. Test:hidden ') Select the element that hides the class "test"

jquery Learning Selector