jQuery的選擇器（四）

時間 2019-11-13

標籤 jquery 選擇器欄目 JQuery 简体版

原文原文鏈接

3、過濾選擇器javascript

5. 子元素過濾選擇器html

:nth-childjava

:nth-child(index):獲取第index個子元素 ,index從1開始，與:eq(index)區別開jquery

:nth-child(even)：獲取第偶數個子元素3d

:nth-child(odd):獲取第奇數個子元素code

:nth-child(xn+y) :獲取第xn+y個子元素orm

其中x>=0，y>=0, n>=0。例如htm

x=3, y=0時就是3n，表示取第3n個元素。對象

當x=0,y>=0時，等同於:hth-child(x)；blog

當x=2,y=0時，等同於nth-child(even)；

當x=2,y=1時，等同於:nth-child(odd)）

:first-child：第一個子元素

:last-child：最後一個子元素

:only-child：當某個元素有且僅有一個子元素，那麼選中這個子元素。

經過子元素過濾選擇器選擇相應的html元素

6.表單對象屬性過濾選擇器

:enabled：取全部可用元素

:disabled：取全部不可用元素

:checked：取選中的單選框或複選框元素

:selected：取下拉列表被選中的元素

<body>

<h3> 表單對象屬性過濾選擇器.</h3>

<button id="btn1">對錶單內可用賦值操做.</button>

<button id="btn2">對錶單內不可用賦值操做.</button>

<button id="btn3">獲取多選框選中的個數.</button>

<button id="btn4">獲取下拉框選中的內容.</button>

可用文本框：<input type="text" value="可用文本框"/> <br/>

不可用文本框：<input type="text" disabled="disabled" value="不可用文本框"/>

<br/>

可用文本域:<textarea>可用文本域</textarea>

<br/>

多選框：<br/>

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

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

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

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

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

下拉列表1：<br/>

</select>

下拉列表2：<br/>

</select>

</form>

</body>

經過表單過濾選擇器獲取指定的html元素

$(document).ready(function(){

$("#btn1").click(function(){

$("input:enabled").val("jquery");

$(":enabled").val("javascript");

});

$("#btn2").click(function(){

$("input:disabled").val("html");

});

$("#btn3").click(function(){

//打印出複選框中選中元素的個數

var num=$("input:checked").length;

console.log(num);

});

$("#btn4").click(function(){

//遍歷2個下拉列表，將選中的元素在控制檯中打印出來

$("select>option:selected").each(function(index,doc){

console.log($(doc).text());

});

</script>

1. jQuery的選擇器（四）
2. 四、jQuery過濾選擇器
3. 第四章:JQuery選擇器
4. jQuery-jQuery選擇器
5. jQuery 的選擇器
6. jQuery的選擇器
7. JQuery的選擇器
8. jQuery選擇器
9. jQuery 選擇器
10. jquery選擇器
更多相關文章...
• jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
• XQuery 選擇和過濾 - XQuery 教程
• Docker容器實戰(七) - 容器眼光下的文件系統
• Docker容器實戰(六) - 容器的隔離與限制

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。