Introduction to Jquery Selector

Preface

Jquery is a js framework (an organic combination of program code) and a semi-finished product in the process of program development. Similar frameworks include EXTJS.

Dependency Library: jquery-XXX.js

Syntax: $ ()

Five Basic selector id selectors in the body

$ ("# Id value ")

Example: Examples (?span1=.css ("color", "red ");

Tag Selector

$ ("Tag name ")

Class Selector

$ (". Class value ")

Group Selector

$ ("Tag name 1, tag name 2 ")

Include Selector

$ ("Tag name 1 tag name 2 ")

Form Selector

$ (": Input") All Input tags

$ (": Text") All the types in the selected Input tag are text. Similar to: password,: button;: radio;: Reset;: checkbox;: hidden;: submit;: image;: File

Example:

$ (": Input" ).css ("cursor", "wait ");

Condition Limiting selector Basic Condition Limiting

: First: last: lt: gt: odd (odd): even (even): not

Example:

$ ("Span: first" ).css ("background-color", "red ");

$ ("Span: lt (3)" background .css ("background-color", "red ");

$ ("Span: odd" ).css ("background-color", "red ");

$ ("Span: not (span: eq (2)" ground .css ("background-color", "red ");

Content limitation

1.: contains (character) Select a tag containing a specific character

Find all div elements containing "John"

HTML code

John Resig
George Martin
Malcom John Sinclair
J. Ohn

JQuery code:

$ ("Div: contains ('john ')")

Result:

[John Resig, Malcom John Sinclair]

2.: empty

Match All null elements that do not contain child elements or text

HTML code:

Value 1
Value 2

JQuery code:
$ ("Td: empty ")
Result:
[,]

3.: parent Return Value:Array

Match an element containing child elements or text

Description:

Search for all td elements containing child elements or text

HTML code:

Value 1
Value 2

JQuery code:
$ ("Td: parent ")

Result:
[Value 1,Value 2] 4.: has (selector) Return Value: Array Match an element that contains the element that the selector matches. Example description of a Selector Used for filtering: Add a text HTML code to all div elements containing the p element:

Hello

Hello again! JQuery code: $ ("div: has (p)"). addClass ("test"); Result :[

Hello

]

Attribute limitation

1. [attribute]

Matches the element that contains the given attribute. Note: In jQuery 1.3, the leading @ symbol has been abolished! To be compatible with the latest version, simply remove the @ symbol.

Parameters

Attribute String

Attribute name

Example

Description:

Search for all div elements containing the id attribute

HTML code:

Hello!

JQuery code:
$ ("Div [id]")
Result:
[]

2. [attribute = value] Return value: Array

Overview

Matching a given attribute is an element of a specific value

Parameters

Attribute String

Attribute name

Value String

Attribute Value. Quotation marks are optional in most cases. However, it is used to avoid conflicts when an attribute value contains.

Example

Description:

Find all input elements whose name attribute is newsletter

HTML code:



JQuery code:
$ ("Input [name = 'newsletter ']"). attr ("checked", true );
Result:
[,]

Visibility limitation

1.: hidden matches all invisible elements, or elements whose type is hidden.

Example

Description:Find hidden tr

HTML code:

Value 1

Value 2

JQuery code:
$ ("Tr: hidden ")
Result:
[Value 1]
Description:Matches the elements whose type is hidden.

HTML code:

JQuery code:
$ ("Input: hidden ")
Result:
[]

2.: visible matches all visible elements.

Example Description: search for all visible tr Elements

HTML code:

Value 1

Value 2

JQuery code:
$ ("Tr: visible ")
Result:
[Value 2]

Select limits

Form Object Attributes

? : Enabled return value: Array Match all available elements

Example Description: search for all available input Elements

HTML code:

JQuery code:
$ ("Input: enabled ")
Result:
[]
? : Disabled return value: Array Match All unavailable Elements

Example Description: search for all unavailable input Elements

HTML code:

JQuery code:
$ ("Input: disabled ")
Result:
[]
? : Checked matches all selected elements (check box, single-choice, etc., excluding option in select; varc = ops [e. selectedIndex]. value; obtains the value of option by obtaining the position of the currently accessed option object in the array)

Example Description: search for all checked check box Elements

HTML code:

JQuery code:
$ ("Input: checked ")
Result:
[,]

? : SelectedMatch All selected option Elements

Example: Find all selected option Elements

HTML code:
Flowers Gardens Trees
JQuery code:
$ ("Select option: selected ")
Result:
[Gardens]

Limits on sub-tags

: Nth-child return value: Array Match the nth child or parity element under the parent Element

': Eq (index)' matches only one element, and this matches the child element for each parent element. : Nth-child starts from 1, while: eq () is counted 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)

Parameters
Index Number: the sequence Number of the element to be matched. It starts from 1.
Example:Search for 2nd li addresses in each ul

HTML code:

• John


• Karl


• Brandon

• Glen


• Tane


• Ralph

JQuery code:
$ ("Ul li: nth-child (2 )")
Result:
[

Karl

,

Tane

]

: First-child

Match the first child element

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

Example Description: Find the first li in each ul

HTML code:

• John


• Karl


• Brandon

• Glen


• Tane


• Ralph

JQuery code:
$ ("Ul li: first-child ")
Result:
[

John

,

Glen

]

: Last-child return value: Array : Match the last child element

': La' matches only one element, and this selector matches one child element for each parent element.

Example Description: Find the last li in each ul

HTML code:

• John


• Karl


• Brandon

• Glen


• Tane


• Ralph

JQuery code:
$ ("Ul li: last-child ")
Result:
[

Brandon

,

Ralph

]

: Only-child return value: Array 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.

Example Description: In ul, find the li

HTML code:

• John


• Karl


• Brandon

• Glen

JQuery code:

$ ("Ul li: only-child ")
Result:

[

Glen

]