JQuery Package Set Selector

Source: Internet
Author: User

1.Dom objects and jquery package set conversions

In traditional JavaScript development, we all get DOM objects first, such as:

var div = document.getElementById ("Testdiv");
var divs = document.getelementsbytagname ("div");

We often use the document.getElementById method to get a single Dom object based on the ID, or use the document.getElementsByTagName method to get a collection of Dom objects based on the HTML tag name.

Alternatively, in the event function, you can use the this reference event in the method function to trigger the object, or use the event object's target (FF) or srcelement (iIE6) to get to the DOM object that raised the event.

If you want to use the functions provided by jquery, first convert the DOM object into a jquery wrapper set.

jquery can get the package set directly, such as $ ("#testDiv");

You can also convert an already acquired DOM object into a jquery package set,

var domobject = document.getElementById ("Testdiv");

var jqueryobject = $ (domobject);

The jquery wrapper set is a collection, so we can access one of the elements through the indexer:

var domobject = $ ("#testDiv") [0];

Note that the index returned by the indexer is no longer a jquery wrapper set, but a DOM object!
Some of the traversal methods of the jquery package set, such as each (), can pass the traversal function, and this in the traversal function is also a DOM element, such as:

$ ("#testDiv"). each (function () {alert (this)})

What if we want to manipulate the DOM object using jquery's method? You can use the conversion method described above:

$ ("#testDiv"). each (function () {$ (this). HTML ("Modify content")})

2.jQuery Selector

In DOM programming we can only use finite functions to get DOM objects by ID or tagname.

In jquery, which is quite different, jquery provides an exceptionally powerful selector to help us get the objects on the page and return the objects as a jquery wrapper set.

1. Base Selector Basics
Name Description Example
#id Select based on element ID $ ("divID") select element with ID divid
Element Depending on the name of the element, select $ ("a") Select all <a> elements
. class Based on the CSS class selection of the element $ (". bgred") Select the element for which the CSS class is bgred
* Select all elements $ ("*") Select all elements of the page
Selector1,
Selector2,
Selectorn
You can separate several selectors with "," and then spell a selector string. The contents of these selectors will be selected at the same time. $ ("#divId, A,. bgred")
2. Hierarchy Selector Hierarchy
Name Description Example
Ancestor descendant Use form input to select all input elements in the form. That is, ancestor (ancestor) is from, descendant (descendants) is input. $ (". Bgred div") selects all <div> elements in the CSS class for bgred elements.
Parent > Child Select the direct child node of parent. Child must be contained in parent and the parent class is the parents element. $ (". Mylist>li") Select the CSS class as a direct child node <li> object in the MyList element.
Prev + Next Prev and Next are two elements of the same level. Select the next element after the Prev element. $ ("#hibiscus +img") is selected in the IMG object after the ID of the hibiscus element.
Prev ~ siblings Select the element that is filtered according to siblings after Prev
Note: Siblings is a filter
$ ("#someDiv ~[title]") Select all elements with the title attribute after the object with ID somediv

3. Basic Filter Basic Filters
Name Description Example
: First Match the first element found Find the first row of a table: $ ("Tr:first")
: Last Match the last element found Find the last line of the table: $ ("Tr:last")
: Not (selector) Removes all elements that match a given selector Find all the unselected input elements: $ ("Input:not (: Checked)")
: Even Matches all elements with an even number of index values, counting from 0 Find table 1, 3, 5 ... line: $ ("Tr:even")
: Odd Matches all elements with an odd index value, counting from 0 Find 2, 4, and 6 rows of a table: $ ("tr:odd")
: EQ (Index) An element that matches a given index value
Note: Index is counted starting from 0
Find second line: $ ("Tr:eq (1)")
: GT (Index) Match all elements greater than the given index value
Note: Index is counted starting from 0
Find the second third row, where the index value is 1 and 2, or greater than 0: $ ("tr:gt (0)")
: LT (Index) Select elements with index less than N in the result set
Note: Index is counted starting from 0
Find the first second row, that is, the index value is 0 and 1, which is smaller than 2: $ ("Tr:lt (2)")
: Header Select All header tags of the h1,h2,h3 category. Add background color to all headings in the page: $ (": Header"). CSS ("Background", "#EEE");
: Animated Matches all elements that are performing an animation effect An animated effect is only performed on elements that do not animate:

$ ("#run"). Click (function () {
$ ("Div:not (: Animated)"). Animate ({left: "+=20"}, 1000);
});

4. Content Filter Contents Filters
Name Description Example
: Contains (text) Matches the element containing the given text Find all DIV elements that contain "John": $ ("Div:contains (' John ')")
: Empty Matches all empty elements that do not contain child elements or text Find all empty elements that do not contain child elements or text: $ ("Td:empty")
: Has (selector) Matches the element that contains the element that the selector matches Add a text class to all DIV elements that contain the P element: $ ("Div:has (P)"). AddClass ("test");
:p arent Match elements that contain child elements or text Find all TD elements that contain child elements or text: $ ("td:parent")

5. Visibility Filter Visibility Filters
Name Description Example

: Hidden

Match all the Invisible elements

Note: In the 1.3.2 release, hidden matches an element that itself or the parent does not occupy space in the document. If you use the CSS visibility property so that it does not display but occupies a placeholder, you do not enter hidden.

Find all the Invisible TR elements: $ ("Tr:hidden")
: Visible Match all visible elements Find all the Visible TR elements: $ ("tr:visible")
6. Attribute Filter Attribute Filters
Name Description Example
[Attribute] Match the element containing the given property Find all DIV elements that contain ID attributes:
$ ("Div[id]")
[Attribute=value] Matches a given property as an element of a particular value Find all the name attribute is the INPUT element of newsletter:
$ ("input[name= ' newsletter ')"). attr ("Checked", true);
[Attribute!=value] Matches a given property is an element that does not contain a particular value Find all the name attributes that are not newsletter input elements:
$ ("input[name!= ' newsletter ')"). attr ("Checked", true);
[Attribute^=value] Matches a given property is an element that starts with some value $ ("input[name^= ' News ']")
[Attribute$=value] Matches a given property is an element that ends with some value Find all input elements with the name ' letter ':
$ ("input[name$= ' letter ']")
[Attribute*=value]

Matches a given property to an element that contains some value

Find all the input elements that name contains ' man ':
$ ("input[name*= ' Man ']")

[AttributeFilter1] [AttributeFilter2] [Attributefiltern] A composite property selector that needs to be used when multiple conditions are met. Find all the ID attributes, and its name attribute is the end of the man:
$ ("input[id][name$= ' Man ']")
7. Sub-element filter child Filters
Name Description Example
: Nth-child (Index/even/odd/equation)

Matches the nth child or odd and even element under its parent element

': EQ (index) matches only one element, and this will match child elements for each parent element. : Nth-child starting from 1, and: Eq () is from 0!

You can use:
Nth-child (even)
: Nth-child (Odd)
: Nth-child (3n)
: Nth-child (2)
: Nth-child (3n+1)
: Nth-child (3n+2)

Find the 2nd Li in each UL:
$ ("UL Li:nth-child (2)")
: First-child

Match first child element

': First ' matches only one element, and this selector will match one child element for each parent element

Find the first Li in each UL:
$ ("ul Li:first-child")
: Last-child

Match last child element

': Last ' matches only one element, and this selector will match one child element for each parent element

Find the last Li in each ul:
$ ("ul Li:last-child")
: Only-child

If an element is the only child element in the parent element, it will be matched

If the parent element contains other elements, it will not be matched.

Find the LI in ul that is the only child element:
$ ("ul Li:only-child")
8. Form selector Forms
Name Description Explain
: input Matches all input, textarea, select, and button elements To find all input elements:
$ (": input")
: Text Match all the text boxes Find all text boxes:
$ (": Text")
:p Assword Match all Password boxes Find all Password boxes:
$ (":p Assword")
: Radio Match all radio buttons Find all radio buttons
: checkbox Match all check boxes Find all check boxes:
$ (": checkbox")
: Submit Match all Submit buttons Find all Submit buttons:
$ (": Submit")
: Image

Match all image fields

Match all image fields:
$ (": Image")
: RESET Match all reset buttons Find all reset buttons:
$ (": Reset")
: button Match all buttons Find all buttons:
$ (": Button")
: File Match all file domains Find all file domains:
$ (": File")
9. Form Filter Form Filters
Name Description Explain
: Enabled

Match all available elements

To find all available input elements:
$ ("input:enabled")
:d isabled Match all unavailable elements To find all input elements that are not available:
$ ("input:disabled")
: Checked Matches all selected selected elements (Checkboxes, radio boxes, etc., excluding option in select) Find all selected check box elements:
$ ("input:checked")
: Selected Match all of the selected option elements To find all selected option elements:
$ ("Select Option:selected")

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.