jquery Introduction Selector

Source: Internet
Author: User

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>]

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.