JQuery selector
| The selector | The instance | select |
|---|---|---|
| * | $(” * “) | All the elements |
| #id | $(“#lastname”) | Id = “lastname” elements |
| .class | $(“.intro”) | Class =”intro” all elements |
| .class, .class | $(“.intro,.demo”) | Class is all elements of “intro” or “demo” |
| element | $(“p”) | all
The element |
| el1.el2.el3 | $(“h1,div,p”) | all
,
The element |
| :first | $(“p:first”) | The first one
The element |
| :last | $(“p:last”) | The last one
The element |
| :even | $(“tr:even”) | All the even |
| :odd | $(“tr:odd”) | All the odd Numbers |
| :first-child | $(“p:first-child”) | All that belong to the first child of its parent element
The element |
| :first-of-type | $(“p:first-of-type”) | The first one belonging to its parent element
Ownership of elements The element |
| :last-child | $(“p:last-child”) | All of the last child element belonging to its parent element
The element |
| :last-of-type | $(“p:last-of-type”) | The last one belonging to its parent element
Ownership of elements The element |
| :nth-child(n) | $(“p:nth-child(2)”) | All of the second child elements belonging to the parent element
The element |
| :nth-last-child(n) | $(“p:nth-last-child(2)”) | All of the second child elements belonging to the parent element
Element, counting from the last child element |
| :nth-of-type(n) | $(“p:nth-of-type(2)”) | The second element belonging to its parent
Ownership of elements The element |
| :nth-last-of-type(n) | $(“p:nth-last-of-type(2)”) | The second element belonging to its parent
Ownership of elements Element, counting from the last child element |
| :only-child | $(“p:only-child”) | All of the unique child elements that belong to its parent element
The element |
| :only-of-type | $(“p:only-of-type”) | Of a unique child element of a particular type belonging to its parent element
The element |
| parent > child | $(“div > p”) |
All of the immediate children of the element
The element |
| parent descendant | $(“div p”) |
All of the descendants of the element
The element |
| element + next | $(“div + p”) | each
Next to the element
The element |
| element ~ siblings | $(“div ~ p”) |
All of the sibling elements
The element |
| :eq(index) | $(“ul li:eq(3)”) | The fourth element in the list (index starts at 0) |
| :gt(no) | $(“ul li:gt(3)”) | List the elements whose index is greater than 3 |
| :lt(no) | $(“ul li:lt(3)”) | List the elements whose index is less than 3 |
| :not(selector) | $(“input:not(:empty)”) | All non-empty input elements |
| :header | $(“:header”) | All heading elements
.. |
| :animated | $(“:animated”) | All animation elements |
| :focus | $(“:focus”) | The element currently in focus |
| :contains(text) | $(“:contains(‘Hello’)”) | All elements that contain the text “Hello” |
| :has(selector) | $(“div:has(p)”) | All contain
The element is inside it
The element
|
| :empty | $(“:empty”) | All empty elements |
| :parent | $(“:parent”) | Matches all parent elements that contain child elements or text. |
| :hidden | $(“p:hidden”) | All hidden
The element |
| :visible | $(“table:visible”) | All visible tables |
| :root | $(“:root”) | The root element of the document |
| :lang(language) | $(“p:lang(de)”) | All lang attributes with a value of “de”
The element |
| [attribute] | $(“[href]”) | All elements with href attributes |
| [attribute=value] | $(“[href=’default.htm’]”) | All elements with an href attribute equal to “default.htm” |
| [attribute! =value] | $(“[href!=’default.htm’]”) | All elements with href attributes that are not equal to “default.htm” |
| [attribute$=value] | =’.jpg’]”) |
All elements with an href attribute and a value ending in “.jpg” |
| [attribute| =value] | $(“[title|=’Tomorrow’]”) | All strings with the title attribute and a value equal to ‘Tomorrow’ or starting with ‘Tomorrow’ followed by a hyphen |
| [attribute^ =value] | $(“[title^=’Tom’]”) | All elements with a title attribute and a value beginning with “Tom” |
| [attribute~ =value] | $(“[title~=’hello’]”) | All elements with a title attribute whose value contains the word “hello” |
| [attribute* =value] | $(“[title*=’hello’]”) | All elements with a title attribute whose value contains the string “hello” |
| [name=value] [name2=value2] | =’man’]” ) |
An input box with an ID attribute and a name attribute ending in man |
| :input | $(“:input”) | All input elements |
| :text | $(“:text”) | All input elements with type=”text” |
| :password | $(“:password”) | All input elements with type=”password” |
| :radio | $(“:radio”) | All input elements with type=”radio” |
| :checkbox | $(“:checkbox”) | All input elements with type=”checkbox” |
| :submit | $(“:submit”) | All input elements with type=”submit” |
| :reset | $(“:reset”) | All input elements with type=”reset” |
| :button | $(“:button”) | All input elements with type=”button” |
| :image | $(“:image”) | All input elements with type=”image” |
| :file | $(“:file”) | All input elements with type=”file” |
| :enabled | $(“:enabled”) | All enabled elements |
| :disabled | $(“:disabled”) | All disabled elements |
| :selected | $(“:selected”) | All selected drop-down list elements |
| :checked | $(“:checked”) | All selected checkbox options |
| .selector | $(selector).selector | Deprecated in jQuery 1.7. Returns the original selector passed to jQuery() |
| :target | $( “p:target” ) | The selector will select the ID that matches a formatted identifier in the URI
The element |
JQuery instance
JQuery event method
Write notes
-
The stern
491***[email protected]
1. Basic selectors
$(" # id ") / / id selector $(" div ") / / element selectors $(" classname ") / / class selector $(". The classname,. Classname1, # id1 ") / / selectorCopy the code2. Hierarchy selector
$(" # id >. The classname ") / / child element selectors $(" # id. The classname ") / / descendant element selectors $(" # id +. The classname ") / / next to the next element selector $(" # id ~. The classname ") // Sibling element selectorCopy the code3. Filter selector (emphasis)
$(" li: first ") the first li / / $(" li: the last ") last li / / $(" li: even ") / / choose the subscript is even li $(" li: odd ") with odd / / selected subscript li $(" li: eq (4)) / / the subscript is equal to 4 Fifth li li (element) $(" li: gt (2) ") / / greater than 2 subscript li $(" li: lt (2) ") / / subscript li of less than 2 $(" li: not (# runoob)) / / select all except id = "runoob" liCopy the code3.2 Content filtering selector
$("div:contains('Runob')") // Contains the element containing Runob text $(" TD :empty") // Contains an empty element containing no child elements or text $("div:has(selector)") // contains the element matched by the selector $("td:parent") // Contains child elements or text elementsCopy the code3.3 Visibility filter selector
$("li:hidden") // matches all invisible elements, or elements of type hidden $("li: Visible ") // matches all visible elementsCopy the code3.4 Attribute Filtering selector
$(" div [id] ") / / all contains the id attribute of div elements $(" div [id = '123'] ") / / div elements for 123 $id attribute value (" div [id! ] = '123') / / id attribute value is not equal to the div elements of $123 (" div [id ^ = 'qq'] ") / / qq id attribute values in the beginning of the div elements $(" div [$id = 'zz'] ") / / id attribute value to the div element at the end of zz $(" div [id * = 'bb'] ") / / id attribute value containing div elements bb $(" input [id] [$= 'man' name] ") / / multiple attribute filter, at the same time satisfy the conditions of the two attributes of elementsCopy the code3.5 State filter selector
$(" Input :enabled") // Matches the available input $("input:disabled") // Matches the unavailable input $(" Input :checked") // Matches the selected input $("option:selected") // Matches selected optionsCopy the code4. Form picker
$(":input") // Matches all input, textarea, select and button elements $(":text") // All single-line text boxes, $(":text") is equivalent to $("[type=text]"), $("input:text") is recommended for higher efficiency, $(hereinafter: "password") / / all the password box $(" : the radio ") / / all radio button $(" : "checkbox) / / all checkbox $(" submit") / / all submit button $(" reset ") / / all the reset button $(":button") // All buttons $(":file") // All file fieldsCopy the code