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

This article mainly explains "what are the selectors in JQuery". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn which selectors in JQuery.

Css selector

Selector syntax description sample tag selector E {css rule} uses the document tag as the selector div {width:100px;} ID selector # id {css rule} uses the unique identifier id number of the document element as the selector # box {width:100px;height:100px;} class selector E.className {css rule} uses the class name of the document element as the selector div.box {color:#fff;}

.box {background:red;} group selector E1Magne E3 {css rule} multiple elements apply the same style div,p,h1 {padding:0;margin:0} descendant selector E F {css rule} take the descendant element F of element E as the selector. Box a {color:green;} wildcard selector * {css rule} use all elements of the document as selector * {font-size:14px;} pseudo-class selector see link:

Jquery selector

The selector in jquery completely inherits the style of css. Using the jquery selector, you can quickly and easily find the DOM elements in the document, and then add the corresponding behavior to them. Let's summarize the selectors in jquery.

1. Basic selector

Basic selector is commonly used in jquery selector, but also the simplest selector, it uses elements and tags to find elements in DOM, note: in a web page, the id name can only be used once, class allows multiple uses.

Selector description returns example # id matches an element based on a given id single element $("# test") selects an element whose id is test. Class selects an element whose class is test based on the given class name matching element collection element $(".test") element selects all p elements * matches all elements set element $("*") selects all elements Selector1 based on the given element name set element $("p") Selector2,Selector3... Merge the elements matched by each selector and return the collection element $("div,span,.p.box"). Select all div, all span, and class p element named box

two。 Hierarchical selector

If you want to get specific elements through the hierarchical relationship between DOM elements, such as background elements, sibling elements, and child elements, then the hierarchical selector is a very good choice, so let's summarize the hierarchical selector.

Selector description returns example $("ancestor descendant") selects all descendant elements in the ancestor element $("div span") selects all span elements in div $("parent > child") selects all child elements under parent child collection element $("div > span") selects all child elements named span under div $("prev+next") selects the next element collection element $(".one + div") immediately after the prev element ) Select the next div element $("prev~siblings") named one in class, select all sibling siblings elements after the element prev, collection element $(".one ~ p"), select all elements whose child elements after the class name one are siblings.

Note:

$("prev+next") can be replaced with $("prev") .next ("next element").

$("prev~siblings") can be replaced with $("prev") .nextAll ("next element")

Example:

$(".box + div") is equivalent to $(".box") .next ("div")

$(".box ~ div") is equivalent to $(".box") .nextAll ("div")

3. Filter selector

Filter selectors filter specific DOM elements based on specific rules, which are the same as pseudo-class selector syntax in css. Filter selector begins with ":". According to the difference of filtering annoying content, filter selector can be divided into basic filter selector, attribute filter, content filter, form filter sub-element filter, visibility filter.

(1) basic filter selector

Selector description return example: first selects the first element single element $("div:first") selects the first div element of all div: last selects the last element single element $("div:last") selects the last div element of all div: not (selector) selects the collection of elements except the selector element $("div:not ('.box')") selects except the class name is box Other div elements of the element: even selects all elements with even index numbers Index numbers start at 0. Collection element $("div:even") selects all div elements with even index numbers: odd selects all elements with odd index numbers, and index numbers start with 0. Collection element $("div:odd") selects all div elements with odd index numbers: eq (index) selects elements with index numbers index single element $("div:eq (0)") selects div elements with index numbers 0 That is, the first div element: gt (index) selects elements whose index number is greater than index $("div:gt (2)") selects div elements whose index number is greater than 2: lt (index) selects elements whose index number is less than index $("div:lt (3)") selects div elements with index numbers less than 3: header selects all title elements in the web page (H1, header, h2, book, h3, book, h5) H6) Collection element $(": header") selects all the title elements in the web page

H1MagneH2... animated selects the element collection element $("div:animated") that is currently animating and selects the div that is currently animating.

(2) content selector

Selector description returns example: conntains ("text") filter text containing "text" collection elements $("p:contains (" hello ")) select elements containing" hello "in the text: empty selects empty elements collection elements that do not contain child elements or text $(" div:empty ") selects div elements that do not contain child elements or text: has (selector) selects the element set that contains the selector element Combined element $("div:has ('p')") selects div elements with p elements: parent selects elements collection elements with child elements or text $("div:parent") selects div elements with child elements or text

(3) Select visibility selector

Selector description returns example: hidden selects all invisible elements collection element $(": hidden") selects all invisible elements, including display:none;type= "hidden"; visiblity:hidden:visible selects all visible elements collection element $(": visible") selects all visible elements

(4) attribute filter selector

Selector description returns example [attribute] Select the element collection element with this attribute $("div [id]") Select the div element with the id attribute [attribute=value] Select the element collection element whose attribute value is value $("div [title = 'box']") Select the div element with title as box [attribute! = value] Select the element collection element whose attribute value is not equal to value $("div [titlecalendar collection box']") Select the div element whose title is not box Elements without title attributes will also be selected [attribut^ = value] Select elements whose attribute values begin with value $("div [title ^ =''b"]) Select div elements starting with b [attribut$=value] Select elements whose attribute values end with value $("div [title $=''b"]) Select div elements ending in b [attribut*=value] Select element sets of elements whose attribute values contain value $$ ("div [title * =''b"]) Select div element with title attribute value containing b [selector1] [selector2] [selectorN] Select selector set selector with multiple attributes $("div [id] [class='box']") select id attribute and class attribute And the div element of class= "box"

(5) Sub-element filter selector

Selector description return example: nth-child (index/even/odd) Note: index selects the index element or parity collection element $("ul li:nth-child (3)") under each parent element starting from 1) selects the third li:first-child under ul selects the first child element under the parent element $("ul li:first-child") selects the first li:last-child selection under ul The last child element under the parent element collection element $("ul li:last-child") selects the last li:only-child under ul if an element is the only child element of its parent element Then it will be matched. If the parent element contains other elements, it just does not match the collection element $("ul li:only-child") selects the li element that is the only element in the ul

(6) form object attribute filter selector

This selector is mainly used to select form elements for filtering

Selector description returns example: enabled selects all available elements collection elements $("# form1: enabled") selects all available elements under form1: disabled selects all unavailable elements collection elements $("# form2:disabled") selects id for all unavailable elements in the form2 form: checked selects all selected elements (radio Check) Collection element $("# form3:checked") Select id for all selected elements under the form3 form: selected selects all selected option elements (drop-down list) collection element $("select:selected") selects all selected option elements

4. Form selector

A form selector is specially added to jquery.

Selector description returns example: input selects all elements collection elements $(": input") selects all elements: text selects all current line text box collection elements $(": text") selects all single-line text boxes: password selects all password boxes collection elements $(": password") selects all password boxes: radio selects all checkboxes collection elements $(": text") selects Select all radio check boxes: checkbox select all multi-check box collection elements $(": checkbox") select all multi-check boxes: submit select all submit button collection elements $(": submit") select all submit buttons: reset select all reset buttons collection elements $(": reset") select all reset buttons: image selects all image button collection elements $(": image") Select all image buttons: button select all button collection elements $("button") select all buttons: file select all upload field collection elements $(": file") select all upload fields: hidden select all invisible elements collection elements $(": hidden") select all invisible elements thank you for reading The above is the content of "what are the selectors in JQuery". After the study of this article, I believe you have a deeper understanding of what the selectors in JQuery have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.