jquery Four Selector Entry Chapter

Source: Internet
Author: User
Tags prev

The jquery selector has four main categories, namely, the basic selector, the hierarchy selector, the filter selector, and the form selector. The bottom is to sum up separately.

1, basic selector?
The basic selector is the most commonly used selector in jquery and the simplest selector, which looks for DOM elements through element tag names, element Id,class. A total of five basic selectors, summarized as follows:
Selector
Return
Example
Element Tag Selector
Collection elements
$ ("P") Select all the <p> elements.
ID Selector
A single element
$ ("#test") Select the element with the ID test.
Class Selector
Collection elements
$ (". Test") Select all elements with test class
Wildcard selectors
Collection elements
$ ("*") Select all the elements.
Group Selector
Collection elements
$ ("Div,span,p.myclass") selects all <div>,<span>, and a set of elements that have a <p> label of class MyClass.
2, Hierarchy selector?
It is appropriate to get specific elements, such as descendant elements, child elements, neighboring elements, and sibling elements, through hierarchical relationships between DOM elements.
Selector
Return
Example
Descendant element Selector
Collection elements
$ ("div span") Select all <span> elements in <div>.
Child element Selector
Collection elements
$ ("Div>span") Select the element name under <div> element is a child element of <span>.
Adjacent element selector
Collection elements
$ (". One+div") Select the next <div> sibling element of class one.
Brother Element Selector
Collection elements
$ ("#two ~div") selects all <div> sibling elements after the element with ID two.
Note: The difference between $ ("prev~siblings") selector and siblings () method.
$ ("#prev ~div") selects all the sibling DIV elements that follow the "#prev" element. The siblings () method is independent of the front and back position and can be matched as long as it is a sibling node.
3, filter selector?
The filter selector mainly filters out the required DOM elements through specific filtering rules, the same as the Pseudo class selector syntax in CSS, where the selector begins with a colon (:). According to the different filtration rules, filter selector can be divided into basic
Filter, content filtering, visibility filtering, attribute filtering, child element filtering and Form object attribute filter selector altogether six kinds of selectors.
This is only a summary of the basic filters, other filters in the actual development process when the need to review it.
Selector
Return
Example
: A
A single element
$ ("Div:first") selects the 1th <div> element in all <div> elements.
: Last
A single element
$ ("Div:last") selects the last 1 <div> elements in all <div> elements.
Not (selector)
Collection elements
$ ("Input:not (. myClass)") Select the class is not a myClass <input> element.
: Even
Collection elements
$ ("Input:even") select an even <input> element for the index.
: Odd
Collection elements
$ ("input:odd") select an odd <input> element for the index.
: EQ (Index)
A single element
$ ("Input:eq (1)") Select the <input> element with index equal to 1.
: GT (Index)
Collection elements
$ ("INPUT:GT (1)") Select the <input> element with index greater than 1.
: LT (Index)
Collection elements
$ ("Input:lt (1)") Select the <input> element with index less than 1. (not including 1)
: Header
Collection elements
$ (": Header") Select all
: Animated
Collection elements
$ ("div:animated") Select the <div> element in which the animation is being executed.
4, form selector?
With the form selector, we can easily get one or a type of element of a form.
Selector
Return
Example
: input
Collection elements
$ (": input") selects all <input>,<textarea>,<select> and <button> elements.
: Text
Collection elements
$ (": Text") selects all Single-line text boxes.
:p Assword
Collection elements
$ (": password") Select all the password boxes.
: Radio
Collection elements
$ (": Radio") selects all the radio boxes.
: checkbox
Collection elements
$ (": CheckBox") Select all the check boxes.
: Submit
Collection elements
$ (": Submit") Select all the Submit buttons.
: Image
Collection elements
$ (": Image") Select all the image buttons.
: RESET
Collection elements
$ (": Reset") Select all the reset buttons.
: button
Collection elements
$ (": Button") Select all the buttons.
: File
Collection elements
$ (": File") Select all the upload fields.
: Hidden
Collection elements
$ (": Hidden") selects all invisible elements.
The above is the summary of the jquery selector, I hope everyone can understand and skillfully use them

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.