Jquery簡介之選取器

前言

Jquery是一種js架構（程式碼的一種有機結合）是程式開發過程中的一種半成品；類似的架構有EXTJS。

依賴庫：jquery-XXX.js

文法：$()

本文5種基本的選取器id選取器

$("#id值")

例子：$(#span1).css("color","red");

標籤選取器

$("標籤名稱")

Class選取器

$(".class的值")

群組選取器

$("標籤名稱1，標籤名稱2")

包含選取器

$("標籤名稱1 標籤名稱2")

表單選取器

$(":input")所有的Input標籤

$(":text")選出的Input標籤中type為text的所有標籤；類似的有：password，：button；：radio；：Reset；：checkbox；：hidden；：submit；：image；：File

樣本：

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

條件限定選取器基本條件限定

:first :last :lt :gt :odd（奇數） :even(偶數) ：not

例子：

$("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");

內容限定

1.:contains(字元) 選中含有某個字元的標籤

尋找所有包含 "John" 的 div 元素

HTML 程式碼

John Resig
George Martin
Malcom John Sinclair
J. Ohn

jQuery 代碼:

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

結果:

[ John Resig, Malcom John Sinclair ]

2.:empty

匹配所有不包含子項目或者文本的空元素

HTML 程式碼:

Value 1
Value 2

jQuery 代碼:
$("td:empty")
結果:
[ , ]

3.:parent 返回值:Array

匹配含有子項目或者文本的元素

描述:

尋找所有含有子項目或者文本的 td 元素

HTML 程式碼:

Value 1
Value 2

jQuery 代碼:
$("td:parent")

結果:
[ Value 1, Value 2 ]4.:has(selector)返回值:Array匹配含有選取器所匹配的元素的元素一個用於篩選的選取器樣本描述:給所有包含 p 元素的 div 元素添加一個 text 類HTML 程式碼:

Hello

Hello again!jQuery 代碼:$("div:has(p)").addClass("test");結果:[

Hello

]

屬性限定

1.[attribute]

匹配包含給定屬性的元素。注意，在jQuery 1.3中，前置的@符號已經被廢除！如果想要相容最新版本，只需要簡單去掉@符號即可。

參數

attribute String

屬性名稱

樣本

描述:

尋找所有含有 id 屬性的 div 元素

HTML 程式碼:

Hello!

jQuery 代碼:
$("div[id]")
結果:
[ ]

2.[attribute=value] 返回值:Array

概述

匹配給定的屬性是某個特定值的元素

參數

attribute String

屬性名稱

value String

屬性值。引號在大多數情況下是可選的。但在遇到諸如屬性值包含"]"時，用以避免衝突。

樣本

描述:

尋找所有 name 屬性是 newsletter 的 input 元素

HTML 程式碼:



jQuery 代碼:
$("input[name='newsletter']").attr("checked", true);
結果:
[ , ]

可見度限定

1. ：hidden 匹配所有隱藏元素，或者type為hidden的元素

樣本

描述:尋找隱藏的 tr

HTML 程式碼:

Value 1

Value 2

jQuery 代碼:
$("tr:hidden")
結果:
[ Value 1 ]
描述:匹配type為hidden的元素

HTML 程式碼:

jQuery 代碼:
$("input:hidden")
結果:
[ ]

2.：visible 匹配所有的可見元素

樣本描述:尋找所有可見的 tr 元素

HTML 程式碼:

Value 1

Value 2

jQuery 代碼:
$("tr:visible")
結果:
[ Value 2 ]

選中限定

表單對象屬性

?:enabled 返回值:Array 匹配所有可用元素

樣本描述:尋找所有可用的input元素

HTML 程式碼:

jQuery 代碼:
$("input:enabled")
結果:
[ ]
?:disabled 返回值:Array 匹配所有不可用元素

樣本描述:尋找所有停用input元素

HTML 程式碼:

jQuery 代碼:
$("input:disabled")
結果:
[ ]
?:checked 匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option；varc = ops[e.selectedIndex].value;通過擷取當前訪問的option對象在數組中的位置，來擷取option的值)

樣本描述:尋找所有選中的複選框元素

HTML 程式碼:

jQuery 代碼:
$("input:checked")
結果:
[ , ]

?:selected匹配所有選中的option元素

樣本:尋找所有選中的選項元素

HTML 程式碼:
Flowers Gardens Trees
jQuery 代碼:
$("select option:selected")
結果:
[ Gardens ]

子標籤的限定

:nth-child 返回值:Array 匹配其父元素下的第N個子或奇偶元素

':eq(index)' 只匹配一個元素，而這個將為每一個父元素匹配子項目。:nth-child從1開始的，而:eq()是從0算起的！可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

參數
index Number 要匹配元素的序號，從1開始
樣本:在每個 ul 尋找第 2 個li

HTML 程式碼:

• John


• Karl


• Brandon

• Glen


• Tane


• Ralph

jQuery 代碼:
$("ul li:nth-child(2)")
結果:
[

Karl

,

Tane

]

:first-child

匹配第一個子項目

':first' 只匹配一個元素，而此選擇符將為每個父元素匹配一個子項目

樣本描述:在每個 ul 中尋找第一個 li

HTML 程式碼:

• John


• Karl


• Brandon

• Glen


• Tane


• Ralph

jQuery 代碼:
$("ul li:first-child")
結果:
[

John

,

Glen

]

:last-child 返回值:Array: 匹配最後一個子項目

':last'只匹配一個元素，而此選擇符將為每個父元素匹配一個子項目

樣本描述:在每個 ul 中尋找最後一個 li

HTML 程式碼:

• John


• Karl


• Brandon

• Glen


• Tane


• Ralph

jQuery 代碼:
$("ul li:last-child")
結果:
[

Brandon

,

Ralph

]

:only-child 返回值:Array 如果某個元素是父元素中唯一的子項目，那將會被匹配

如果父元素中含有其他元素，那將不會被匹配。

樣本描述:在 ul 中尋找是唯一子項目的 li

HTML 程式碼:

• John


• Karl


• Brandon

• Glen

jQuery 代碼:

$("ul li:only-child")
結果:

[

Glen

]