jQuery的选择器(四)
2016-12-07 18:42
204 查看
三、过滤选择器
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>
<form id="form1" action="#">
<button id="btn1">对表单内可用赋值操作.</button>
<button id="btn2">对表单内不可用赋值操作.</button>
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取下拉框选中的内容.</button>
<br /><br />
可用文本框:<input type="text" value="可用文本框"/> <br/>
不可用文本框:<input type="text" disabled="disabled" value="不可用文本框"/>
<br/>
可用文本域:<textarea>可用文本域</textarea>
<br/>
<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
<div></div>
<br/><br/>
下拉列表1:<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>上海</option>
<option selected="selected">北京</option>
<option>广州</option>
<option selected="selected">天津</option>
<option>江苏</option>
<option>湖北</option>
</select>
<br/><br/>
下拉列表2:<br/>
<select name="test2" >
<option>上海</option>
<option>北京</option>
<option selected="selected">湖南</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
<div></div>
</form>
</body>
通过表单过滤选择器获取指定的html元素
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(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>
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>
<form id="form1" action="#">
<button id="btn1">对表单内可用赋值操作.</button>
<button id="btn2">对表单内不可用赋值操作.</button>
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取下拉框选中的内容.</button>
<br /><br />
可用文本框:<input type="text" value="可用文本框"/> <br/>
不可用文本框:<input type="text" disabled="disabled" value="不可用文本框"/>
<br/>
可用文本域:<textarea>可用文本域</textarea>
<br/>
<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
<div></div>
<br/><br/>
下拉列表1:<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>上海</option>
<option selected="selected">北京</option>
<option>广州</option>
<option selected="selected">天津</option>
<option>江苏</option>
<option>湖北</option>
</select>
<br/><br/>
下拉列表2:<br/>
<select name="test2" >
<option>上海</option>
<option>北京</option>
<option selected="selected">湖南</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
<div></div>
</form>
</body>
通过表单过滤选择器获取指定的html元素
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(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>
相关文章推荐
- jQuery-Selectors(选择器)的使用(七、子元素篇)
- jPicker - 一个jQuery的颜色选择器插件
- jQuery选择器
- jQuery学习笔记——jQuery选择器练习
- Jquery选择器介绍
- jQuery选择器之表单对象属性过滤选择器Demo
- jquery选择器实例
- jquery属性过滤选择器
- jQuery 选择器大全(精)
- JQUERY 选择器
- Jquery选择器
- jquery选择器属性和方法的操作
- JQuery选择器杂记祖宗和后代 父亲和儿子 临近兄弟 普通兄弟
- jquery选择器空格与大于号、加号与波浪号的区别
- jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
- jQuery中选择器的空格问题
- jquery选择器(转载)
- Jquery 基本选择器
- jQuery选择器总结
- jQuery选择器总结