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

This article introduces the relevant knowledge of "how to implement the JQuery selector". Many people will encounter such a dilemma in the operation of the actual case, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Basic selector:

Selector: a selector similar to CSS that can help us get elements.

For example: id selector, class selector, element selector, attribute selector, and so on.

Syntax of selector in jQuery: $()

Code implementation:

Basic selector div1 div2 div3 / / 1. Element selector $("element name") let divs = $("div"); / / alert (divs.length); / / 2.id selector $("attribute value of # id") let div1 = $("# div1"); / / alert (div1); / / 3. Class selector $("attribute value of .class") let cls = $(".cls"); alert (cls.length); level selector:

Code implementation:

S1 S1-1 S1-2 S2

P1

P2

/ / 1. Descendant selector $("A B"); all B under A (including the children of B) let spans1 = $("div span"); / / alert (spans1.length); / / 2. Sub-selector $("A > B"); all B under A (excluding children of B) let spans2 = $("div > span"); / / alert (spans2.length); / / 3. Brother selector $("A + B"); An adjacent next B let ps1 = $("div + p"); / / alert (ps1.length); / / 4. Brother selector $("A ~ B"); all B let ps2 adjacent to A = $("div ~ p"); alert (ps2.length); attribute selector:

Code implementation:

/ / 1. Attribute name selector $("element [attribute name]") let in1 = $("input [type]"); / / alert (in1.length); / / 2. Attribute value selector $("element [attribute name = attribute value]") let in2 = $("input [type = 'password']"); alert (in2.length); filter selector:

Code implementation

Div1div2div3div4 / / 1. First element selector $("A:first"); let div1 = $("div:first"); / / alert (div1.html ()); / / 2. Tail element selector $("A:last"); let div4 = $("div:last"); / / alert (div4.html ()); / / 3. Non-element selector $("A:not (B)"); let divs1 = $("div:not (# div2)"); / / alert (divs1.length); / / 4. Even selector $("A:even"); let divs2 = $("div:even"); / / alert (divs2.length); / / alert (divs2 [0] [xss_clean]); / / alert (divs2 [1] [xss_clean]); / / 5. Odd selector $("A:odd"); let divs3 = $("div:odd"); / / alert (divs3.length); / / alert (divs3 [0] [xss_clean]); / / alert (divs3 [1] [xss_clean]); / / 6. Equal to index selector $("A:eq (index)"); let div3 = $("div:eq (2)"); / / alert (div3.html ()); / / 7. Greater than the index selector $("A:gt (index)"); let divs4 = $("div:gt (1)"); / / alert (divs4.length); / / alert (divs4 [0] [xss_clean]); / / alert (divs4 [1] [xss_clean]); / / 8. Less than the index selector $("A:lt (index)"); let divs5 = $("div:lt (2)"); alert (divs5.length); alert (divs5 [0] [xss_clean]); alert (divs5 [1] [xss_clean]); form property selector:

Code implementation:

Men and women learn to sleep-please choose-undergraduate college / / 1. Available element selector $("A:enabled"); let ins1 = $("input:enabled"); / / alert (ins1.length); / / 2. Unavailable element selector $("A:disabled"); let ins2 = $("input:disabled"); / / alert (ins2.length); / / 3. Radio / check box selected element $("A:checked"); let ins3 = $("input:checked"); / / alert (ins3.length); / / alert (ins3 [0] .value); / / alert (ins3 [1] .value); / / alert (ins3 [2] .value); / / 4. The elements selected in the drop-down box are $("A:selected"); let select = $("select option:selected"); alert (select.html ()); and "how to implement the JQuery selector". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.