Common jQuery selector aggregation and jquery Selector

Source: Internet
Author: User

Common jQuery selector aggregation and jquery Selector

I learned the [Javascript DOM programming art]. At the end, there are many jQuery selectors, each of which is typed.

JQuery provides an advanced selector method.
J

The three basic methods for getting an element in s are the tag name, class name, and id (getElementsByTagName, getElementsByClassName, and getElementById ). So how does jQuery obtain it?

  1. Get through tags: $ ('tag ')
  2. Get by Class Name: $ ('. classname ')
  3. Get by id: $ ('# id ')

In addition to the above three most basic and simple, there are several css selectors:

$ ('*') Select all elements $ ('taga tagb') Select the tagB element as the descendant of tagA $ ('taga, tagB, tagc') Select All tagA elements, tagB and tagC elements $ ('tag # id') Select the tag Element whose id is ID $ ('tag. classname') Select the tag Element with the class name className.

JQuery supports the following css2.1 attribute selectors:

$ ('Tag [attr] ') Select All tag elements with attr attributes $ ('tag [attr * = value]') select the tag Element $ ('tag [attr = value] ') of all attr attribute values that are equal to the value $ ('tag [attr! = Value] ') Select All tag elements whose attr attribute value is not equal to value $ ('tag [attr ^ = value]') select the tag Element starting with value for all attr attribute values $ ('tag [attr $ = value] ') Select the tag Element ending with value for all attr attribute values $ ('tag [attr ~ = Value] ') Select the tag Element $ ('tag [attr | = value]') of multiple character strings whose attribute values are separated by spaces and whose value is equal to the value. select a concatenation string for all attr attribute values to split the tag Element starting with value.


Child selector, peer selector:

$ ('Taga> tagb') Select All tagB elements as child elements of the tagA element $ ('taga + tagb ') select the tagB element next to the tagA element and located next to it $ ('taga ~ Tagb') Select All tagB elements that are located after the tagB element of the tagA peer.

Pseudo class, pseudo element selector:

$ ('Tag: root') Select the tag element as the document root element $ ('tag: nth-child (n )') select All tag elements as the nth element of the parent element $ ('tag: nth-last-child (n )') select all the tag elements that are used as the last n elements of the parent element $ ('tag: nth-of-type (n )') select the nth number of peer tag elements $ ('tag: nth-last-f-type (n )') select the nth reciprocal of several peer tag elements $ ('tag: first-child ') and select the tag Element $ ('tag: last-child') as the first child element of the parent element ') select the tag Element $ ('tag: first-of-type') as the first child element of the parent element and select the first one in the Peer tag Element $ ('tag: last-of-type ') selected as the last $ ('tag: only-child') in the Peer tag Element and selected as the tag Element of the unique child element of the parent element $ ('tag: only-of-type ') Select the only tag Element in the Peer element $ ('tag: empty') Select All tag elements without child elements $ ('tag: enabled ') select all enabled tag elements in the interface element $ ('tag: disabled') select all disabled tag elements in the interface element $ ('tag: checked ') select All selected tag elements (such as check boxes and single-choice buttons) $ ('tag: not (s) ') in the interface element and select all tag elements that do not match the selector s.

Other Proprietary selectors:

$ ('Tag: even') Select an element that matches an even number in the Element Set (suitable for highlighting table rows) $ ('tag: odd ') select the element that matches the odd number in the element set $ ('tag: eq (0) '), $ ('tag: nth (0)') Select the first element in the Matching Element Set, for example, in the first section of the page $ ('tag: gt (n) '), select all elements whose index value is greater than n in the element set $ ('tag: lt (n )') select all elements whose index value is less than n in the matched element set $ ('tag: first ') Select the first element in the matched element set, which is equivalent to eq (0) $ ('tag: last ') Select the last element in the matched element set $ ('tag: parent') select all elements in the matched element set that contain child elements (also calculated by text nodes) $ ('tag: contains ('test') ') select all elements that match the specified text in the element set $ ('tag: visable ') select all visible elements in the Matching Element Set (including the display attribute is block and inline, the visibility attribute is visible, and the type attribute is not a hidden form element) $ ('tag: Den den ') select All hidden elements in the matched element set (including the display attribute is none, the visibility attribute is hidden, and the type attribute is hidden)

Some Expressions specially designed for forms for quick access to form elements:

: Input select all elements in the form: text select all text fields: password select all password fields: radio select all radio buttons: checkbox select all check boxes: submit select all submit button: image select all form images: reset select all reset buttons: button select all other buttons

Related Article

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.