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

Today, I will talk to you about how to understand the jQuery selector, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Today we look at the jQuery selector.

The jQuery selector makes it easier and more flexible to get page elements, thus greatly reducing the pressure on developers. Like building a building, you cannot afford to build a building without bricks and tiles. What other operations can you talk about without getting elements? You can see the importance of the jQuery selector. Of course, it is also very difficult to master all the selectors at once, which depends on practice and accumulation.

Now let's officially enter the study of jQuery selectors. We classify jQuery selectors into the following categories:

1. Basic selector

Id selects based on element ID

Elementname selects based on element name

Classname selects based on the element css class name

For example:

Select based on element name

JQuery ("# ID") .val (); jQuery ("a") .text (); jQuery (".classname") .val ()

The values of the elements can be obtained respectively. The above three are the most common selectors, of which the ID selector is efficient and should be used whenever possible.

2. Hierarchical selector

Ancestor descendant ancestor and descendant selector parent > child parent node selector prev + next peer selector prev ~ siblings filter selector

For example:

one

two

/ / get the a tag content in div with a result of 12 jQuery ("# divTest a"). Text (); / output the direct child node result of div as investment jQuery ("# divTest > input"). Val (); / / output the latter element of the same level id as next resulting in jQuery ("# next+input"). Val (); / / ditto, and the element with title results in learning jQuery ("# next~ [title]"). Val ()

Basic filter selector

: first found the * element

Last found * an element

: not (selector) removes elements that match a given selector

: even elements with even index values are counted from 0

: odd matches elements with odd index values starting at 0

: eq (index) matches a given index value element starting at 0

: gt (index) matches elements greater than a given index value

: lt (index) matches elements less than a given index value

Header selects tags such as h _ 2, h _ 3, and h _ 4 (not used at present)

: animated matches the element that is animating (not currently used)

For example:

Investment

Financing

mature

Bear the responsibility

/ / * the result of li content is to invest in jQuery ("li:first"). Text (); / / * A li content results in jQuery ("li:last") .text (); / / the unselected value of input results in not learning jQuery ("li input:not (: checked)") .val (); / / the li with an even index results in investment mature jQuery ("li:even"). Text () / / the li result with odd index is financial responsibility jQuery ("li:odd"). Text (); / / the content result of li with index greater than 2 is jQuery ("li:gt (2)"). Text (); / / the content result of li with index less than 1 is investment jQuery ("li:lt (1)"). Text ()

4. Content filter

: 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) match contains elements matched by selector

For example:

Hyip investment

Hyip

Financing

Investment

/ / the content result of li containing hyip is that hyip invests in hyip jQuery ("li:contains ('hyip')") .text (); / / the latter li content of li with empty content results in financial jQuery ("li:empty+li"). Text (); / / the content of li containing a tag results in investment jQuery ("li:has (a)"). Text ()

5. Visibility filter

: hidden matches invisible elements

: visible matches visible elements

For example:

Visible

Invisible

/ / the content result of invisible li is invisible jQuery ("li:hidden") .text (); / / the content result of visible li is visible jQuery ("li:visible") .text ()

6. Attribute filter

[attribute=value] matching attributes are elements of a given value

[attribute ^ = value] matching attributes are elements that start with a given value

[attribute$=value] matching attributes are elements that end with a given value

[attribute*=value] matches the element whose attribute contains a given value

For example:

/ / the value of name to hyipinvest results in hyip investment alert (jQuery ("input [name = 'hyipinvest']"). Val ()); / / the value of name starting with hyip results in hyip investment alert (jQuery ("input [name ^ =' hyip']"). Val (); / / name ends with hyip as investment hyip alert (jQuery ("input [name $= 'hyip']"). Val ()) / / name contains the value of oo resulting in HYIP alert (jQuery ("input [name * = 'oo']") .val ())

JQuery selector summed up here, these are basically encountered in the learning process, there are very few parts have not been summarized. After a period of practice, I believe you will be able to skillfully use the jQuery selector.

After reading the above, do you have any further understanding of how to understand jQuery selectors? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.