jQuery的选择器（四）

来源：互联网发布：java初始3*4化二维数组编辑：程序博客网时间：2024/05/16 13:48

三、过滤选择器

5. 子元素过滤选择器

:nth-child

:nth-child(index):获取第index个子元素 ,index从1开始，与:eq(index)区别开

:nth-child(even)：获取第偶数个子元素

:nth-child(odd):获取第奇数个子元素

:nth-child(xn+y) :获取第xn+y个子元素

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

x=3, y=0时就是3n，表示取第3n个元素。

当x=0,y>=0时，等同于:hth-child(x)；

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

0 0