jquery Introduction Selector

Objective

jquery is a JS framework (an organic combination of program code) that is a semi-finished product in the process of program development; A similar framework is ExtJS.

Dependent libraries: Jquery-xxx.js

Syntax: $ ()

Body 5 basic Selector ID selectors

$ ("#id值")

Example: $ (#span1). CSS ("Color", "red");

Tag Selector

$ ("label name")

Class Selector

$ (Value of ". Class")

Group Selector

$ ("label name 1, label name 2")

Include selector

$ ("Label name 1 Label Name 2")

Form Selector

$ (": input") all input tags

$ (": Text") selects all labels of type text in the input tag; similar to: Password,:button;:radio;:reset;:checkbox;:hidden;:submit;:image;:file

Example:

$ (": Input"). CSS ("cursor", "Wait");

Conditional-Qualified selectors basic condition qualification

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

Example:

$ ("Span:first"). CSS ("Background-color", "Red");

$ ("Span:lt (3)"). CSS ("Background-color", "Red");

$ ("span:odd"). CSS ("Background-color", "Red");

$ ("Span:not (Span:eq (2))"). CSS ("Background-color", "Red");

Content Qualification

1.:contains (character) Select a label that contains a character

Find all DIV elements that contain "John"

HTML Code

<div>john resig</div>
<div>george martin</div>
<div>malcom John sinclair</div>
<div>j. Ohn

JQuery Code:

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

Results:

[<div>john Resig</div>, <div>malcom John sinclair</div>]

2.:empty

Matches all empty elements that do not contain child elements or text

HTML Code:
<table>
<tr><td>value 1</td><td></td></tr>
<tr><td>value 2</td><td></td></tr>
</table>
JQuery Code:
$ ("Td:empty")
Results:
[<td></td>, <td></td>]

3.:p arent return Value:Array<element (s) >

Match elements that contain child elements or text

Describe:

Find all TD elements that contain child elements or text

HTML Code:
<table>
<tr><td>value 1</td><td></td></tr>
<tr><td>value 2</td><td></td></tr>
</table>
JQuery Code:
$ ("td:parent")

Results:
[<td>value 1</td>, <td>value 2</td>] 4.:has (selector) return value: Array<element (s) > matches the element that contains the element that the selector matches a sample selector for a filter description: Add a text class HTML code to all DIV elements that contain p elements:< Div><p>hello</p></div>
<div>hello again!</div>jquery Code: $ ("Div:has (P)"). AddClass ("test"); result: [<div class= "test" ><p >Hello</p></div>]

Attribute Qualification

1.[attribute]

Matches the element that contains the given property. Note that in jquery 1.3, the leading @ symbol has been abolished! If you want to be compatible with the latest version, simply remove the @ symbol.

Parameters

Attribute String

Property name

Example

Describe:

Find all DIV elements that contain ID attributes

HTML Code:
<div>
<p>Hello!</p>
</div>
<div id= "Test2" ></div>
jQuery Code :
$ ("Div[id]")
Results:
[<div id= "Test2" ></div>]

2.[attribute=value] return value: Array<element (s) >

Overview

Matches a given property as an element of a particular value

Parameters

Attribute String

Property name

Value String

The value of the property. Quotation marks are optional in most cases. However, you avoid conflicts when you encounter a property value that contains "]".

Example

Describe:

Find all the name attribute is the INPUT element of newsletter

HTML Code:
<input type= "checkbox" name= "Newsletter" value= "Hot Fuzz"/>
<input type= "checkbox" name= "Newsletter" value= "Cold Fusion"/>
<input type= "checkbox" Name= "Accept" value= "Evil plans"/>
JQuery Code:
$ ("input[name= ' newsletter ')"). attr ("Checked", true);
Results:
[<input type= "checkbox" name= "Newsletter" value= "Hot Fuzz" checked= "true"/>, <input type= "checkbox" Name= " Newsletter "value=" Cold Fusion "checked=" true "/>"

Visibility Limitations

1.: Hidden matches all invisible elements, or elements of type hidden

Example

Description: find the hidden tr

HTML Code:
<table>
<tr style= "Display:none" ><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>
JQuery Code:
$ ("Tr:hidden")
Results:
[<tr style= "Display:none" ><td>value 1</td></tr>]
Description: matches an element of type hidden

HTML Code:
<form>
<input type= "text" name= "email"/>
<input type= "hidden" name= "id"/>
</form>
JQuery Code:
$ ("Input:hidden")
Results:
[<input type= "hidden" name= "id"/>]

2.:visible matches all visible elements

Example Description: Find all the visible TR elements

HTML Code:
<table>
<tr style= "Display:none" ><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>
JQuery Code:
$ ("tr:visible")
Results:
[<tr><td>value 2</td></tr>]

Check limit

Form Object Properties

?: Enabled return value: Array<element (s) > match all available elements

Example Description: Find all the available input elements

HTML Code:
<form>
<input name= "Email" disabled= "disabled"/>
<input name= "id"/>
</form>
JQuery Code:
$ ("input:enabled")
Results:
[<input name= "id"/>]
?:d isabled return value: Array<element (s) > match all unavailable elements

Example Description: Find all input elements that are not available

HTML Code:
<form>
<input name= "Email" disabled= "disabled"/>
<input name= "id"/>
</form>
JQuery Code:
$ ("input:disabled")
Results:
[<input name= "email" disabled= "disabled"/>]
?: Checked matches all selected selected elements (Checkboxes, radio boxes, etc., excluding OPTION;VARC = Ops[e.selectedindex].value in Select), by getting the position of the currently accessed option object in the array, To get the value of option)

Example Description: Find all selected check box elements

HTML Code:
<form>
<input type= "checkbox" name= "Newsletter" checked= "checked" value= "Daily"/>
<input type= "checkbox" name= "Newsletter" value= "Weekly"/>
<input type= "checkbox" name= "Newsletter" checked= "checked" value= "Monthly"/>
</form>
JQuery Code:
$ ("input:checked")
Results:
[<input type= "checkbox" name= "Newsletter" checked= "checked" value= "Daily"/> <input type= "checkbox" Name= " Newsletter "checked=" checked "value=" Monthly "/>"

?: Selected matches all selected option elements

Example: Find all selected option elements

HTML Code:
<select>
<option value= "1" >Flowers</option>
<option value= "2" selected= "selected" >Gardens</option>
<option value= "3" >Trees</option>
</select>
JQuery Code:
$ ("Select Option:selected")
Results:
[<option value= "2" selected= "selected" >Gardens</option>]

Qualification of child tags

: Nth-child return Value: Array<element (s) > matches nth sub-or odd-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! Available: <br>nth-child (even) <br>:nth-child (odd) <br>:nth-child (3n) <br>:nth-child (2) <br >:nth-child (3n+1) <br>:nth-child (3n+2)

Parameters
Index number to match the ordinal of the element, starting with 1
Example: find a 2nd Li in each UL

HTML Code:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery Code :
$ ("UL Li:nth-child (2)")
Results:
[<li>karl</li>, <li>Tane</li>]

: First-child

Match first child element

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

Example Description: Find the first li in each UL

HTML Code:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
JQuery Code:
$ ("ul Li:first-child")
Results:
[<li>john</li>, <li>Glen</li>]

: Last-child return Value: Array<element (s);: Matches last child element

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

Example Description: Find the last Li in each UL

HTML Code:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
JQuery Code:
$ ("ul Li:last-child")
Results:
[<li>brandon</li>, <li>Ralph</li>]

: Only-child return Value: Array<element (s) > 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: Find the Li that is the only child element in UL

HTML Code:

<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
JQuery Code:

$ ("ul Li:only-child")
Results:

[<li>Glen</li>]