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容器实战(六) - 容器的隔离与限制