jQuery 手冊 – 選擇器(Selectors 1.2)

三月 11th, 2009 · shian · jQuery 3 comments

把之前所寫的 Selectors 1.2 手冊，將它放進這blog裡，方便使用查詢

#id

以元素id做為選擇的條件

$('#id')

<div id="div_a">id=div_a</div>

<div id="div_b">id=div_b</div>
<div id="div_c">id=div_c</div>

element

說明語法範例原始碼

以元素做為選擇的條件

$('element')

<div id="div_a">id=div_a</div>

<div id="div_b">id=div_b</div>
<div id="div_c">id=div_c</div>

.class

說明語法範例原始碼

以類別(class)做為選擇的條件

$('.class')

<div id="div_a">id=div_a</div>

<div id="div_b" class="SampleClass">id=div_b</div>
<div id="div_c">id=div_c</div>

*

說明語法範例原始碼

以 * 做為選擇的條件，*會選擇頁面上所有的元素

$('*')


<div id="div_a">id=div_a</div>
<div id="div_b" class="SampleClass">id=div_b</div>

<div id="div_c">id=div_c</div>

selector1, selector2, selector…
說明語法範例原始碼
多重條件選擇，會以，做為多重條件選擇分隔

$(select1,select2,…..)
```
<div id="div_a">id=div_a</div>

<div id="div_b" class="SampleClass">id=div_b</div>
<div id="div_c">id=div_c</div>
```

空格

說明語法範例原始碼

選擇符合指定 "祖元素裡面的子元素" 所有元素

$("ul li")


<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b">span_b</span></li>

    <li><span id="span_c">span_c</span></li>

</ul>

>

說明語法範例原始碼

選擇符合指定 "父元素裡面的子元素" 的所有元素

$("#id > *")

<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b">span_b</span></li>

    <li><span id="span_c">span_c</span></li>

</ul>

+

說明語法範例原始碼

符合自定義同輩上下元素的選擇條件

$('element + element')

<div id="div_a">div_a</div>
<ul>

    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b">span_b</span></li>

    <li><span id="span_c">span_c</span></li>

    <li>li_a</li>
    <li>li_b</li>
    <li>li_c</li>

</ul>

~

說明語法範例原始碼

選擇指定元素下的所有指定同輩元素

$("element ~ element")

<div id="div_a">div_a</div>
<span id="span_a">span_a</span><br/>

<span id="span_b">span_b</span><br/>
<span id="span_c">span_c</span><br/>

<div id="div_b">div_b</div>

:first

說明語法範例原始碼

指定一元素組裡的第一個元素

$("element:first")

<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b">span_b</span></li>

    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f">span_f</span></li>

</ul>

:last

說明語法範例原始碼

指定一元素組裡的最後一個元素

$("element:last")

<ul>

    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b">span_b</span></li>

    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f">span_f</span></li>

</ul>

:not()

說明語法範例原始碼

不以指定該元素做為選擇條件

$("element:not(selector)")

<ul>

    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b">span_b</span></li>

    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f">span_f</span></li>

</ul>

:even

說明語法範例原始碼

指定元素組的奇數元素

$("element:event")

<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b">span_b</span></li>

    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f">span_f</span></li>

</ul>

:odd

說明語法範例原始碼

指定一元素組的偶數元素

$("element:odd")

<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b">span_b</span></li>

    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f">span_f</span></li>

</ul>

:eq()

說明語法範例原始碼

指定元素組下第幾個元素，元素從0開始計算

$("element:eq(number)")

<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b">span_b</span></li>

    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f">span_f</span></li>

</ul>

:gt()

說明語法範例原始碼

指定元素組下第幾個之後的所有元素，元素從0開始計算

$("element:gt(number)")

<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b">span_b</span></li>

    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f">span_f</span></li>

</ul>

:lt()

說明語法範例原始碼

指定元素組下第幾個之前的所有元素

$("element:lt(number)")

<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b">span_b</span></li>

    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f">span_f</span></li>

</ul>

:header

說明語法範例原始碼

選擇以<h></h>裡的所有元素

$(":header")

<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b"><h3>span_b</h3></span></li>

    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f"><h3>span_f</h3></span></li>

</ul>

:animated

說明語法範例原始碼

選擇正在進行效果的元素

$(":animated")

<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b"><h3>span_b</h3></span></li>

    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f"><h3>span_f</h3></span></li>

</ul>

:contains

說明語法範例原始碼

以一元素內指定的文字為選擇條件

$("element:contains()")

<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b"><h3>span_b</h3></span></li>

    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f"><h3>span_f</h3></span></li>

</ul>

:empty

說明語法範例原始碼

指定元素裡為空值做為選擇條件

$("element:empty")

<ul>
    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b"></span></li>
    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f"></span></li>
</ul>

:has()

說明語法範例原始碼

選擇父元素裡有包著子元素

$("element:has(element)")

<ul>

    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b"></span></li>
    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f"></span></li>
</ul>

:parent

說明語法範例原始碼

選擇所有指定元素裡有文字內容或是有元素

$("element:parent")

<ul>

    <li><span id="span_a">span_a</span></li>

    <li><span id="span_b"></span></li>
    <li><span id="span_c">span_c</span></li>

    <li><span id="span_d">span_d</span></li>

    <li><span id="span_e">span_e</span></li>

    <li><span id="span_f"></span></li>
</ul>

:hidden

說明語法範例原始碼

選擇所有隱藏的元素

$("element:hidden")

<ul>

    <li class="style1"><span id="span_a">span_a</span></li>

    <li class="style1" style="display:none"><span id="span_b">span_b</span></li>

    <li class="style1" style="display:none"><span id="span_c">span_c</span></li>

    <li class="style1" style="display:none"><span id="span_d">span_d</span></li>

    <li class="style1"><span id="span_e">span_e</span></li>

    <li class="style1"><span id="span_f">span_f</span></li>

</ul>

:visible

說明語法範例原始碼

選擇所有顯示的元素

$("element:visible")

<ul>
    <li class="style1"><span id="span_a">span_a</span></li>

    <li class="style1"><span id="span_b">span_b</span></li>

    <li class="style1"><span id="span_c">span_c</span></li>

    <li class="style1"><span id="span_d">span_d</span></li>

    <li class="style1"><span id="span_e">span_e</span></li>

    <li class="style1"><span id="span_f">span_f</span></li>

</ul>

[attribute]

說明語法範例原始碼

選擇有指定屬性的所有元素

$("element[name]")

<ul>
    <li class="style1"><span id="span_a" name="name_span">span_a</span></li>

    <li class="style1"><span id="span_b">span_b</span></li>

    <li class="style1"><span id="span_c" name="name_span">span_c</span></li>

    <li class="style1"><span id="span_d">span_d</span></li>

    <li class="style1"><span id="span_e">span_e</span></li>

    <li class="style1"><span id="span_f" name="name_span">span_f</span></li>

</ul>

[attribute=value]

說明語法範例原始碼

選擇所有元素的屬性為指定值

$("element[attribute=value]")

<ul>
    <li class="style1"><span id="span_a" name="name_span">span_a</span></li>

    <li class="style1"><span id="span_b">span_b</span></li>

    <li class="style1"><span id="span_c" name="name_span">span_c</span></li>

    <li class="style1"><span id="span_d">span_d</span></li>

    <li class="style1"><span id="span_e">span_e</span></li>

    <li class="style1"><span id="span_f" name="name_span">span_f</span></li>

</ul>

[attribute!=value]

說明語法範例原始碼

選擇所有元素的屬性不為指定值

$("element[attribute!=value]")

<ul>
    <li name="name_a" class="style1"><span id="span_a">span_a</span></li>

    <li name="name_a" class="style1"><span id="span_b">span_b</span></li>

    <li name="name_a" class="style1"><span id="span_c">span_c</span></li>

    <li name="name_b" class="style1"><span id="span_d">span_d</span></li>

    <li name="name_b" class="style1"><span id="span_e">span_e</span></li>

    <li name="name_b" class="style1"><span id="span_f">span_f</span></li>

</ul>

[attribute^=value]

說明語法範例原始碼

選擇所有元素的屬性值開頭為指定值

$("element[name^='test']")

<ul>
    <li name="name_a" class="style1"><span id="span_a">span_a</span></li>

    <li name="name_a" class="style1"><span id="span_b">span_b</span></li>

    <li name="name_a" class="style1"><span id="span_c">span_c</span></li>

    <li name="name_b" class="style1"><span id="span_d">span_d</span></li>

    <li name="name_b" class="style1"><span id="span_e">span_e</span></li>

    <li name="name_b" class="style1"><span id="span_f">span_f</span></li>

</ul>

[attribute$=value]

說明語法範例原始碼

選擇所有元素的屬性值結尾為指定值

$("element[name$='test']")

<ul>
    <li name="name_a" class="style1"><span id="span_a">span_a</span></li>

    <li name="name_a" class="style1"><span id="span_b">span_b</span></li>

    <li name="name_a" class="style1"><span id="span_c">span_c</span></li>

    <li name="name_b" class="style1"><span id="span_d">span_d</span></li>

    <li name="name_b" class="style1"><span id="span_e">span_e</span></li>

    <li name="name_b" class="style1"><span id="span_f">span_f</span></li>

</ul>

[attribute*=value]

說明語法範例原始碼

選擇所有元素的屬性的值有包含指定值

$("element[name*='test']")

<ul>
    <li name="name_a" class="style1"><span id="span_a">span_a</span></li>

    <li name="name_a" class="style1"><span id="span_b">span_b</span></li>

    <li name="name_a" class="style1"><span id="span_c">span_c</span></li>

    <li name="name_b" class="style1"><span id="span_d">span_d</span></li>

    <li name="name_b" class="style1"><span id="span_e">span_e</span></li>

    <li name="name_b" class="style1"><span id="span_f">span_f</span></li>

</ul>

[attributeFilter1][attributeFilter2][attributeFilterN]

說明語法範例原始碼

選擇所有指定一元素的多條件屬性值

$("element[attributeFilter1][attributeFilter2][attributeFilterN]")

<ul>
    <li id="li_a" name="name_a" class="style1"><span id="span_a">span_a</span></li>

    <li id="li_b" name="name_a" class="style1"><span id="span_b">span_b</span></li>

    <li id="li_c" name="name_a" class="style1"><span id="span_c">span_c</span></li>

    <li name="name_b" class="style1"><span id="span_d">span_d</span></li>

    <li name="name_b" class="style1"><span id="span_e">span_e</span></li>

    <li name="name_b" class="style1"><span id="span_f">span_f</span></li>

</ul>

:nth-child

說明語法範例原始碼

選擇一元素組裡第幾個的指定子元素

index: 指定第幾個
odd: 指定奇數個
even: 指定偶數個
:eq(index): 指定第幾個 (從0開始計算)

$(" parent-element child-element:nth-child()")

<ul>
    <li class="style1"><span id="span_a">span_a</span></li>

    <li class="style1"><span id="span_b">span_b</span></li>

    <li class="style1"><span id="span_c">span_c</span></li>

    <li class="style1"><span id="span_d">span_d</span></li>

    <li class="style1"><span id="span_e">span_e</span></li>

    <li class="style1"><span id="span_f">span_f</span></li>

</ul>

:first-child

說明語法範例原始碼

選擇指定父元素裡指定子元素的第一個

$("parent-element child-element:first-child")

<ul>
    <li class="style1"><span id="span_a">span_a</span></li>

    <li class="style1"><span id="span_b">span_b</span></li>

    <li class="style1"><span id="span_c">span_c</span></li>

    <li class="style1"><span id="span_d">span_d</span></li>

    <li class="style1"><span id="span_e">span_e</span></li>

    <li class="style1"><span id="span_f">span_f</span></li>

</ul>

:last-child

說明語法範例原始碼

選擇指定父元素裡指定子元素的最後一個

$("parent-element child-element:first-child")

<ul>
    <li class="style1"><span id="span_a">span_a</span></li>

    <li class="style1"><span id="span_b">span_b</span></li>

    <li class="style1"><span id="span_c">span_c</span></li>

    <li class="style1"><span id="span_d">span_d</span></li>

    <li class="style1"><span id="span_e">span_e</span></li>

    <li class="style1"><span id="span_f">span_f</span></li>

</ul>

:only-child
說明語法範例原始碼
選擇指定父元素裡只有一個指定子元素

$("parent-element child-element:only-child")
```
<ul>
    <li class="style1"><span id="span_a">span_a</span></li>

</ul>
```

:input

說明語法範例原始碼

選擇所有input元素

$(":input")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="textfield" />
  <textarea name="textarea"></textarea>

  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>
<span id="result"></span>

:text

說明語法範例原始碼

選擇所有 input type=text 元素

$(":text")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="textfield" />
  <textarea name="textarea"></textarea>

  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>
<span id="result"></span>

:password

說明語法範例原始碼

選擇所有 input type=password 元素

$(":password")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="textfield" />
  <input type="password" name="textfield" value="sample for :password"/>

  <textarea name="textarea"></textarea>
  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>
<span id="result"></span>

:radio

說明語法範例原始碼

選擇所有 input type= radio 元素

$(":radio")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="textfield" />
  <input type="password" name="textfield" value="sample for :password"/>

  <textarea name="textarea"></textarea>
  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>
<span id="result"></span>

:checkbox

說明語法範例原始碼

選擇所有 input type= checkbox 元素

$(":checkbox")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="textfield" />
  <input type="password" name="textfield" value="sample for :password"/>

  <textarea name="textarea"></textarea>
  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>
<span id="result"></span>

:submit

說明語法範例原始碼

選擇所有 input type= submit 元素

$(":submit")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="textfield" />
  <input type="password" name="textfield" value="sample for :password"/>

  <textarea name="textarea"></textarea>
  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>
<span id="result"></span>

:image

說明語法範例原始碼

選擇所有 input type= image 元素

$(":image")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="textfield" />
  <input type="image"/>

  <textarea name="textarea"></textarea>
  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>
<span id="result"></span>

:reset

說明語法範例原始碼

選擇所有 input type= reset 元素

$(":reset")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="textfield" />
  <input type="reset"/>

  <textarea name="textarea"></textarea>
  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>
<span id="result"></span>

:button

說明語法範例原始碼

選擇所有 input type= button 元素

$(":button")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="textfield" />
  <input type="button" value="button"/>

  <textarea name="textarea"></textarea>
  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>
<span id="result"></span>

:file

說明語法範例原始碼

選選擇所有 input type= file 元素

$(":file")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="textfield" />
  <input type="file"/>

  <textarea name="textarea"></textarea>
  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>
<span id="result"></span>

:hidden

說明語法範例原始碼

選選擇所有隱藏元素

$(":hidden")

<form id="form1" name="form1" method="post" action="">

  <input type="hidden"/>
  <input type="hidden"/>
  <textarea name="textarea"></textarea>

  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>
<span id="result"></span>

:enabled

說明語法範例原始碼

選擇所有指定元素為enabled

$("element:enabled")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="text_a" disabled="disabled"/>
  <input type="text" name="text_b" />

  <input type="text" name="text_c" disabled="disabled"/>
  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>

:disabled

說明語法範例原始碼

選擇所有指定元素為disabled

$("element:disabled")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="text_a" disabled="disabled"/>
  <input type="text" name="text_b" />

  <input type="text" name="text_c" disabled="disabled"/>
  <input type="checkbox" name="checkbox" value="checkbox" />

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>

:checked

說明語法範例原始碼

選擇所有指定元素為checked

$("element:checked")

<form id="form1" name="form1" method="post" action="">

  <input type="text" name="text_a" disabled="disabled"/>
  <input type="text" name="text_b" />

  <input type="text" name="text_c" disabled="disabled"/>
  <input type="checkbox" name="checkbox" value="checkbox" checked="checked"/>

  <input type="checkbox" name="checkbox" value="checkbox" />

  <input type="checkbox" name="checkbox" value="checkbox" checked="checked"/>

  <input name="radiobutton" type="radio" value="radiobutton" />

  <input type="submit" name="Submit" value="送出" />

</form>

:selected

說明語法範例原始碼

選擇select元素的option為 selected="selected"

$("select option:selected")

<form id="form1" name="form1" method="post" action="">

<select>
    <option value="shian">shian</option>
    <option value="michelle">michelle</option>

    <option value="jack">jack</option>
    <option value="sam">sam</option>

    <option value="tom">tom</option>
</select>
<div id="result"></div>

</form>

隨選文章

jQuery Plugin Tabs (1)
jQuery 基本介紹 (6)
php-excel-writer (2)
CodeIgniter layout (0)
Mysql 5.1.22 Replication Master to Slave (0)
Tarball MySQL (0)

遨遊飛翔

jQuery 手冊 – 選擇器(Selectors 1.2)

#id

element

.class

*

selector1, selector2, selector…

空格

>

+

~

:first

:last

:not()

:even

:odd

:eq()

:gt()

:lt()

:header

:animated

:contains

:empty

:has()

:parent

:hidden

:visible

[attribute]

[attribute=value]

[attribute!=value]

[attribute^=value]

[attribute$=value]

[attribute*=value]

[attributeFilter1][attributeFilter2][attributeFilterN]

:nth-child

:first-child

:last-child

:only-child

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

:enabled

:disabled

:checked

:selected

隨選文章

3 Responses to “jQuery 手冊 – 選擇器(Selectors 1.2)”

Leave Your Response

最新文章