jQuery选择器之过滤选择器
2015-12-02 20:46
633 查看
jQuery选择器之过滤选择器
:last
:not(selector) --除了selector节点的其他节点
:even -- 偶数
:odd --奇数（下标都是从0开始）
:eq(index) -- 与index下标相等的节点，从0开始
:gt(index) --大于
:lt(index) --小于
示例代码：/jQuery01/WebRoot/selector/s3.html
:empty --匹配所有不包含子元素或者文本的空元素
:has(selector) --匹配含有选择器所匹配的元素的元素
:parent --匹配含有子元素或者文本的元素
示例代码：/jQuery01/WebRoot/selector/s4.html
:visible 匹配所有的可见元素
示例代码：/jQuery01/WebRoot/selector/s5.html
[attribute=value]
[attribute!=value]
示例代码：/jQuery01/WebRoot/selector/s6.html
示例代码：/jQuery01/WebRoot/selector/s7.html
:disabled -- 禁用的
:checked -- 单选框、多选框被选中的
:selected -- 下拉列表被选中的选项
示例代码：/jQuery01/WebRoot/selector/s8.html
1.基本过滤选择器
:first:last
:not(selector) --除了selector节点的其他节点
:even -- 偶数
:odd --奇数（下标都是从0开始）
:eq(index) -- 与index下标相等的节点，从0开始
:gt(index) --大于
:lt(index) --小于
示例代码：/jQuery01/WebRoot/selector/s3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基本过滤选择器的使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
$('#t1 tr:first').css('background-color','#ccc');
$('#t1 tr:last').css('background-color','#f00');
// :even: 偶数 下标从0开始
$('tbody tr:even').css('background-color','#0f0');
// :odd: 奇数 下标从0开始
$('tbody tr:odd').css('background-color','#cc8dc');
}
function f2(){
// :eq(index) 与index下标相等的节点，从0开始
$('tbody tr:eq(1)').css('font-style','italic');
}
// :not(selector) --除了selector节点的其他节点
function f3(){
//除了#tr2这个节点，其他全部选中
$('tbody tr:not(#tr2)').css('font-style','italic');
}
function f4(){
$('tbody tr:eq(1) td:eq(1)').css('background-color','#f00');
}
</script>
</head>
<body style="font-size:30px;">
<table id="t1" border="1" width="60%"
cellpadding="0" cellspacing="0">
<thead>
<tr><td>姓名</td><td>年龄</td></tr>
</thead>
<tbody>
<tr><td>张三</td><td>20</td></tr>
<tr id="tr2"><td>李四</td><td>21</td></tr>
<tr><td>王五</td><td>25</td></tr>
<tr><td>赵六</td><td>28</td></tr>
</tbody>
</table>
<input type="button" value="基本过滤选择器的使用"
onclick="f4();"/>
</body>
</html>2.内容过滤选择器
:contains(text) --匹配包含给定文本的元素:empty --匹配所有不包含子元素或者文本的空元素
:has(selector) --匹配含有选择器所匹配的元素的元素
:parent --匹配含有子元素或者文本的元素
示例代码：/jQuery01/WebRoot/selector/s4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>内容过滤选择器的使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
// :contains(text) --匹配包含给定文本的元素
$('div:contains(世界)').css('font-size','60px');
}
// :empty --匹配所有不包含子元素或者文本的空元素
function f2(){
//多个属性，可以传一个js对象
$('div:empty').css(
{'width':'400px','height':'80px','border':'2px solid red'})
}
// :has(selector) --匹配含有选择器所匹配的元素的元素
function f3(){
$('div:has(p)').css('font-size','40px');
}
// :parent --匹配含有子元素或者文本的元素
// 和empty相反
function f4(){
$('div:parent').css(
{'width':'400px','height':'80px','border':'2px solid red'})
}
</script>
</head>
<body style="font-size:30px;">
<div>你好hello world</div>
<div></div>
<div>
<p>世界</p>
<div></div>
</div>
<input type="button" value="内容过滤选择器的使用"
onclick="f4();"/>
</body>
</html>3.可见性过滤选择器
:hidden 匹配所有不可见元素(display:none)，或者type为hidden的元素:visible 匹配所有的可见元素
示例代码：/jQuery01/WebRoot/selector/s5.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>可见性过滤选择器的使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
//:hidden 匹配所有不可见元素(display:none)，
//或者type为hidden的元素
function f1(){
//show() -- jQuery的函数，缓慢显示
//$('div:hidden').show(800);
// :visible 匹配所有的可见元素
$('div:visible').hide(800);
}
</script>
</head>
<body style="font-size:30px;">
<div>hello world</div>
<div style="display:none;">hello java</div>
<input type="button" value="可见性过滤选择器的使用"
onclick="f1();"/>
</body>
</html>4.属性过滤选择器
[attribute][attribute=value]
[attribute!=value]
示例代码：/jQuery01/WebRoot/selector/s6.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>属性过滤选择器的使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
//[attribute]
//选择div中有id属性的节点
$('div[id]').css('font-size','60px');
//[attribute=value]
//选择div中id属性值为d2的节点
$('div[id=d2]').css('color','red');
//[attribute!=value]
//选择div中id属性值不为d2的节点
$('div[id!=d2]').css('font-style','italic');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello world</div>
<div id="d2">hello java</div>
<div class="c1">hello java</div>
<input type="button" value="属性过滤选择器的使用"
onclick="f1();"/>
</body>
</html>5.子元素过滤选择器
:nth-child(index/even/odd) -- index从1开始示例代码：/jQuery01/WebRoot/selector/s7.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>子元素过滤选择器的使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
//:nth-child(index/even/odd) -- 下标从1开始
function f1(){
//$('ul li:eq(1)').css('font-size','60px');
//选中每个ul的第二个子节点
$('ul li:nth-child(2)').css('font-size','60px');
}
</script>
</head>
<body style="font-size:30px;">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul>
<li>item21</li>
<li>item22</li>
<li>item23</li>
</ul>
<input type="button" value="子元素过滤选择器的使用"
onclick="f1();"/>
</body>
</html>6.表单对象属性过滤选择器
:enabled -- 可使用的:disabled -- 禁用的
:checked -- 单选框、多选框被选中的
:selected -- 下拉列表被选中的选项
示例代码：/jQuery01/WebRoot/selector/s8.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单对象属性过滤选择器的使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
// :disabled
function f1(){
//$('#form1 input:disabled').css('border','1px dotted red');
//设置文本输入框可用
// attr -- jQuery的方法，用于设置属性
//$('#form1 input:disabled').attr('disabled',false);
$('#form1 input:enabled').attr('disabled',true);
}
// :checked
function f2(){
$('#form2 input:checked').attr('checked',false);
}
//
function f3(){
alert($('#form3 option:selected').val());
}
</script>
</head>
<body style="font-size:30px;">
<form id="form1">
username:<input name="username"/><br/>
<!-- disabled属性：此控件不可用 -->
name:<input name="name" disabled="disabled"/><br/>
age:<input name="age"/><br/>
</form>
<form id="form2">
interest:
做饭<input type="checkbox" name="interest" value="cooking">
钓鱼<input type="checkbox" name="interest" value="fishing" checked>
足球<input type="checkbox" name="interest" value="football">
</form>
<form id="form3">
<select>
<option value="bj">北京</option>
<option value="cs" selected>长沙</option>
<option value="wh">武汉</option>
</select>
</form>
<input type="button" value="子表单对象属性过滤选择器的使用"
onclick="f3();" />
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery中ready与load事件的区别
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- jquery获取对象
- jquery插件——uploadify使用详解
- jquery格式化时间，拼接DateTime时间
- gifplayer-可控制GIF动画图片播放和暂停jQuery插件
- jQuery源码学习12——动画加强
- jQuery-1.9.1源码分析系列（十五） 动画处理
- jquery animate 改变元素背景颜色
- jquery 倒计时代码
- jQuery实现获取绑定自定义事件元素的方法
- jQuery 取值、赋值的基本方法整理
- jQuery-Moblie在Chrome下出现的问题
- js jQuery方法join()
- jQuery Mobile 实现苹果滑动删除闹钟功能的几点总结
- jquery文本闪烁
- Windows WebBrowser JQuery password
- JQuery知识
- jQuery.fn的作用是什么
- 很容易学习的JQuery库 : (七) AJAX