Shulou(Shulou.com)06/03 Report--

Editor to share with you what selector jQuery has, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. JQuery introduction

(1) what is jQuery?

Is a js framework whose main idea is to use the selector provided by jQuery to find the node to operate on, and then encapsulate the found node into a jQuery object. Encapsulated as a jQuery object for two purposes:

One is to be compatible with different browsers, and the other is to simplify the code.

(2) the basic steps of programming first.html

Step1, use the selector to find the node. Selectors are similar to css selectors.

Step2, which calls the methods or properties of the jQuery object.

(3) the conversion first.html between jQuery object and dom object.

A, dom object-> jQuery object

$(dom object)

B, jQuery object-> dom object

Method 1: $obj.get (0)

Method 2: $obj.get () [0]

2. Selector

1) basic selector selector/s1.html

ID selector: $('# id)

Class selector: $('.class')

Tag selector: $('element) such as: $(' div')

Group selector: $('selector1,selector2..selectorn')

Universal selector: $('*')

2) hierarchical selector selector/s2.html

(1) Child element selector

$("parent > child")

Find all child elements below the parent element, excluding the grandchild element, etc.

(2) descendant element selector

$("ancestor descedant")

Find all child elements, grandchildren, great-grandchildren, and so on of the ancestor element.

(3) adjacent to peer element selector

$("prev+next")

Sibling, and immediately following the prev element, the next element

(4) adjacent peer element selector

$("prev~siblings")

All siblings elements that follow prev and are siblings

Note: siblings is the filter

Here, because the last two are rarely used, they are usually replaced by other selectors, as shown below:

$("prev + next") is equivalent to next ()

$("prev ~ siblings") is equivalent to nextAll ()

3) filter selector

(1) basic filter selector selector / s3.html

: first-- > $('pbank first') the first p element

: last-- > $('pvl last`) the last p element

: not (selector)-- > $("input:not (: checked)") filters out all input elements of checked's selector

: even-- > $("tr:even") Select the 0,2pr 4 of all tr elements. ... Elements (Note: because the selected elements are arrays, the sequence number starts with 0)

: odd-- > $("tr:odd") Select the first, third and fifth of all tr elements. ... Elements

: eq (index)-- > $("td:eq (2)") Select the td element with serial number 2 in all td elements

: gt (index)-- > $("td:gt (4)") Select all td elements with sequence numbers greater than 4

: lt (index)-- > $("td:ll (4)") Select all td elements whose ordinal is less than 4

(2) content filter selector selector / s4.html

: contains (text) matches the element that contains the given text

: empty matches all empty elements that do not contain child elements or text

: has (selector) matches the element containing the element matched by the selector

: parent matches elements with child elements or text

Example:

$("div:contains ('John')") Select all elements in the div that contain John text

$("td:empty") Select an array of all td elements that are empty (excluding text nodes)

$("div:has (p)") Select all div elements that contain p tags

$("td:parent") Select an array of all elements with td as the parent

(3) Visual filter selector selector / s5.html

: hidden matches all invisible elements, or elements whose type is hidden

: visible matches all visible elements

Example:

$("div:hidden") Select all div elements that are hidden

$("div:visible") Select all visual div elements

(4) attribute filter selector selector / s6.html

[attribute]

[attribute=value]

[attributeurs assigned value]

Example:

$("div [id]") Select all div elements that contain the id attribute

$("input [name = 'newsletter']") Select all input elements whose name attribute is equal to' newsletter'

$("input [nameplate name newsletter']") Select all input elements whose input attributes are not equal to 'newsletter''

$("input [name ^ = 'news']") Select all name elements whose input attributes start with' news'

$("input [name $= 'news']") Select all name elements whose input attributes end with' news']

$("input [name * = 'man']") Select all name attributes that contain the input element of' news'

$("input [id] [name$='man']") can use multiple attributes for joint selection. The selector gets all the elements that contain the id attribute and then the attribute ends in man.

(5) Child element filter selector selector / s7.html

: nth-child (index/even/odd): $("ul li:nth-child (2)"), $("ul li:nth-child (odd)"), $("ul li:nth-child (3n + 1)")

$("div span:first-child") returns an array of the first child node of all div elements

$("div span:last-child") returns an array of the last node of all div elements

$("div button:only-child") returns an array of all child nodes of all div with only one child node

(6) form object attribute filter selector (form element filter selector) selector / s8.html

$(": enabled") Select all actionable form elements

$(": disabled") Select all inoperable form elements

$(": checked") Select all the form elements that are checked

$("select option:selected") Select the element that is selected among all the child elements of select

4) form selector

$(": input") Select all form input elements, including input, textarea, select, and button

$(": text") Select all text input elements

$(": password") Select all password input elements

$(": radio") Select all radio input elements

$(": checkbox") Select all checkbox input elements

$(": submit") Select all submit input elements

$(": p_w_picpath") Select all p_w_picpath input elements

$(": reset") Select all reset input elements

$(": button") Select all button input elements

$(": file") Select all file input elements

$(": hidden") Select all input elements of type hidden or hidden fields of the form

The above is all the content of this article "what is the selector of jQuery". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.