The sharp jquery Series (iii)------All the way selector big party

Source: Internet
Author: User

Disclaimer: The first time to learn jquery selector only remember a few and CSS selector similar to several, here is listed in the book written on the various selector to facilitate future queries and the current learning

                          All the examples are from the book

Test screen:

First, the basic selector

#id, $ ("#test") Select the element with ID test (unique)

. Class $ (". Test") selects all elements of class test

Element $ ("P") selects all the <P> elements

* $ ("*") Select all the elements

Selector1,selector2,...., Selectorn $ ("Div,span,p.myclass") Select all <div>,<span> and have <p with class MyClass A set of elements for a > tag

demo1: Changing the background color of an element with ID one

Demo2: Change the background color of all elements of class mini

Demo3: Changing the element name is the background color of all elements of <div>

Demo4: Changing the background color of all elements

demo5: Change the background color of all <span> elements and the element ID is

Second, level selector

Get specific elements through hierarchical relationships between DOM elements, such as: descendant elements, child elements, neighboring elements, and sibling elements

$ ("ancestor descendant") $ ("div span") Select all <span> elements in <div>

$ ("Parent > Child") $ ("div > span") selection <div> element under element name is a sub-element of <span>

The difference is that the former retrieves all descendants, the latter just retrieves the son

$ ("prev + Next") $ (". One + div") Select the next <div> sibling element of class one

$ ("prev~siblings") $ ("#two ~div") selects all <div> sibling elements that follow the element with ID "a"

demo1: Change the background color of all <div> in <body>

Demo2: Change the background color of <body> inside <div> elements

Demo3: Change the background color of the next <div> sibling element of class one

Demo4: Change the background color of all <div> sibling elements behind an element with ID of.

There are more convenient ways to replace the following two selectors:

$ (". One + div") = = $ (". One"). Next ("Div") $ ("#prev ~div") ==$ ("#prev"). Nextall ("div");

The difference between $ ("prev~siblings") and the siblings () method is that the former only matches the siblings <div> elements behind the "prev" element. The latter is independent of location as long as the node of the peers can.

Third, filter selector

1) Basic Filter Selector

: First $ ("Div:first") selects all <div> elements in the initial <div> element

: Last $ ("Div:last") Select all <div> elements in the final <div> element

: Not (selector) $ ("Input:not (MyClass)") Pick <input> element with class not MyClass

: Even $ ("Input:even") Select index is even <input> element 0 count even

: Odd $ ("input:odd") Select index is odd <input> element

: EQ (Index) $ ("Input:eq (1)") pick <input> element with index equal to 1

: GT (Indfex) $ ("INPUT:GT (1)") Select <input> element with index greater than 1

: LT (Index) $ ("Input:lt (1)") Select <input> element with index less than 1

: Header $ (": Header") Select all the

: Animated $ ("div:animated") Select the <div> element that is performing the animation

: Focus $ (": Focus") pick the element that currently gets focus

demo1: Change the background color of the first <div> element

Demo2: Change the background color of the last <div> element

Demo3: Change the background color of the <div> element of the class not being one

Demo4: Change the background color of the <div> element with an even index value

Demo5: Change the background color of the <div> element with an odd index value

Demo5: Change the background color of <div> elements with index value equal to 3

Demo6: Change the background color of <div> elements with index values greater than 3

Demo7: Change the background color of the <div> element with index value I less than 3

2) Content Filter Selector

: Contains (text) $ ("Div:contains (" I ")") Select the <div> element that contains the text "I"

: Empty $ ("Div:empty") Select <div> empty elements that do not contain child elements (including text elements)

: Has (selector) $ ("Div:has (P)") selects <div> elements containing <p> elements

:p arent $ ("div:parent") Select the <div> element that has child elements (including text elements)

demo1: Change the background color of the <div element that contains the text "Di"

Demo2: Change the background color of <div> empty elements that do not contain child elements

Demo3: Change the background color of <div> elements containing class mini elements

Demo4: Changing the background color of <div> elements that contain child elements (including text elements)

3) Visibility Filter Selector

: Hidden $ (": Hidden") selects all elements that are not visible. including <input type= "hidden"/>,<div style= "Display:none;" > and <div style= "Visibility:hidden;" If you want to select only the <input> element, you can use $ ("Input:hidden");

: Visible $ ("div:visible") selects all visible <div> elements

demo1: Change the background color of all visible <div> elements

Demo2: Show hidden <div> elements

4) Attribute Filter Selector

[Attribute] $ ("div[id]") Select the element that owns the property ID

[Attribute=value] $ ("div[title=test]") Select the <div> element with the property title "Test"

[Attribute!=value] $ ("div[title!=test]") select attribute title not equal to ' test ' <div> element (the <div> element with no attribute title will also be selected)

[Attribute^=value] $ ("div[title^=test]") pick attribute title starting with "test" <div> element

[Attribute$=value] $ ("div[title$=test]") pick attribute title end with "test" <div> element

[Attribute*=value] $ ("div[title*=test]") pick attribute title contains ' test ' <div> element

[Attribute|=value] $ ("div[title|= ' en ')") select attribute title equals en or prefixed with en (the string followed by a hyphen '-') of the <div> element

[Attribute~=value] $ ("div[title~= ' UK ')") select attribute title space-delimited value contains the character of the UK <div> element

[Attribute1] [Attribute2] ... [Attributen] $ ("div[id][title$= ' Test ']") Select a <div> element that has an attribute ID and the property title ends with "test"

demo1: Change the background color of the <div> element that contains the attribute title

Demo2: Change the background color of the <div> element with the title value equal to "test"

Demo3: Change the background color of the <div> element for which the attribute value is not equal to "test"

Demo4: Change the background color of the <div> element with the attribute value starting with "TE"

demo5: Change attribute value title "est" end of the background color of the <div> element

demo6: Change the background color of the <div> element with the title "Es"

Dmeo7: Change the background color of the <div> element that contains the attribute ID and the attribute title contains "es"

Test screen

demo8: Change the background color of an element with the title equal to En or prefixed with en (the string followed by a hyphen '-')

demo9: Change attribute title space-delimited value contains the background color of the element in UK

5) Sub-element filter Selector

: Nth-child:eq (Index) matches only one element, while: Nth-child will match child elements for each parent element, and: Nth-child (Index) has index starting at 1, and EQ (index) is starting from 0

: Nth-child (even) can select an element with an even number of index values under each parent element

: Nth-child (odd) can select an element that has an odd index value under each parent element

: Nth-child (2) can select an element with an index value equal to 2 under each parent element

: Nth-child (3n) can select an element that has a multiple of 3 of the index value under each parent element (n starts from 1)

: Nth-child (3n+1)) can select the element under each parent element that is 3n+1 (n starts from 1)

: First-child:first only returns a single element, while the First-child selector matches the first child element for each parent element, such as $ ("ul li:first-child"); Select the first <li> in each <ul> Elements

: Last-child: Similarly,: Last returns only a single element, whereas: The Last-child selector matches the last child element for each parent element, such as $ ("ul Li:last-child") and selects the final <li of each <ul> > Elements

: Only-child $ ("ul Li:only-child") in <ul> Select is the only child element of the <li> element

demo1: Change the background color of the 2nd child element under the parent element of each class for one <div>

Demo2: Change the background color of the 1th child element under each class of <div> parent element of one

Demo3: Change the background color of the last child element under the <div> parent element of each class

Demo4: If class is the only child element under the <div> parent element of one, then the background color of the child element is changed

6) Form object property Filter Selector

: Enabled $ ("#form1: Enabled") selects elements that are available for all elements in a form with the id "Form1"

:d isabled $ ("#form2:d isabled") selects all the unavailable elements in a form with the id "Form2"

: Checked $ ("input:checked") Select All selected <input> elements (radio box, check box)

: Selected $ ("Select Option:selected") selects all selected option elements (drop-down list)

Test screen

demo1: Change the values of the <input> elements available in the form

Demo2: Changing the value of an unavailable <input> element in a form

Demo3: Gets the number of checkboxes selected

$ ("input:checked"). length

Demo4: Gets the contents of the drop-down box selected

$ ("select:selected"). Text ();

Four, form selector

: Input $ (": Input") Select all <input>, <textarea>, <select>, <button>

: Text $ (": Text") selects all single-line text boxes

:p Assword $ (":p assword") Select all the password boxes

: Radio $ (": Radio") Select all the radio boxes

: CheckBox $ (": CheckBox") Select all check boxes

: Submit $ (": Submit") Select all submitted buttons

: Image $ (": Image") Select all the image buttons

: Reset $ (": Reset") Select all reset Buttons

: Button $ ("button") selects all buttons

: File $ (": File") Select all upload Domains

: Hidden $ (": Hidden") selects all invisible elements

A bit late, the following example will not write!!!

The sharp jquery Series (iii)------All the way selector big party

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.