:first
:last
:not(selector) :selector匹配的节点之外的节点
:even :偶数
:odd ：奇数
:eq(index)
:gt(index) :比他大的:lt(index) ：比他小的
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
$(function(){
$(‘#b1‘).click(function(){
//$(‘tr:first‘).css(‘background-color‘,‘#cccccc‘);
//$(‘tbody tr:first‘).css(‘background-color‘,‘#cccccc‘);
//$(‘tbody tr:not(#tr2)‘).css(‘background-color‘,‘#cccccc‘);
//$(‘tbody tr:even‘).css(‘background-color‘,‘#cccccc‘);
$(‘tbody tr:eq(2)‘).css(‘background-color‘,‘#cccccc‘);
});
});
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="60%">
<thead>
<tr>
<td>name</td><td>age</td>
</tr>
</thead>
<tbody>
<tr><td>zs</d><td>22</td></tr>
<tr id="tr2"><td>ls</d><td>22</td></tr>
<tr><td>ww</d><td>22</td></tr>
<tr><td>ll</d><td>22</td></tr>
</tbody>
</table>
<input type="button" value="clickMe" id="b1"/>
<body>
</html>
2,内容过滤选择器:contains(text)
:empty :没有子节点的节点或者文本内容为空的节点
:has(selector)
:parent :包含有父节点的节点
3可见性过滤选择器<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script> $(function(){ $(‘#b1‘).click(function(){ $(‘:contains(hello)‘).css(‘background‘,‘red‘); //$(‘:empty‘).css(‘‘,‘‘); //$(‘div :has(p)‘).css(‘‘,‘‘); }); }); </script> </head> <body> <div> <div>hello</div> <div>你好</div> <div> <p>java</p> <div> <input type="button" value="clickMe" id="b1"/> </div> </body> </html>
其实我的目的并不是让全部屏幕变成红色，为什么全部变成红色的呢？再看下面代码，我在contains(hell0)前面加一个div
$(‘div:contains(hello)‘).css(‘background‘,‘red‘);可以看到虽然不是全屏了，但是还不是我想要的结果，怎么才能只将hello下面的背景变成红色呢？可以这样做
$(‘div div:contains(hello)‘).css(‘background‘,‘red‘);
:hidden
找到input type="hidden" 以及display=none
:visible
$(function(){
$(‘#a1‘).click(function(){
$(‘div:hidden‘).css(‘display‘,‘block‘);
//如过有这个样式则去掉，没有则加上
$(‘#d1‘).toggleClass(‘show‘);
});
//每点击一次，执行一个函数，循环执行
$(‘#a1‘).toggle(function(){
//$(‘#d1‘).css(‘display‘,‘block‘);
$(‘#d1‘).show(400); //在400毫秒种打开
//或者使用slow fast normal三个参数
$(‘#d1‘).show(slow);
},function(){
//$(‘#d1‘).css(‘display‘,‘none‘);
$(‘#d1‘).hide();
});
});
4,过滤选择器(1)属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
$(function(){
$(‘#b1‘).click(function(){
$(‘p[id=p1]‘).html(‘hello java‘);
});
});
</script>
</head>
<body>
<p id="p1">hello</p>
<p>world</p>
<input type="button" value="click" id="b1"/>
</body>
</html>
(2),子元素过滤选择器：返回所有匹配的父节点下的子节点
:nth-child(index/even/odd)
n从1开始
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
$(function(){
$(‘#b1‘).click(function(){
$(‘ul li:nth-child(1)‘).html(‘item100‘);
});
});
</script>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
<input type="button" value="click" id="b1"/>
</body>
</html>
(3),表单对象属性过滤选择器5,表单选择器
:enabled
:disabled //文本输入框不能输入
:checked //被选择的节点
:selected
:input $(‘:input‘);返回所有的input
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:button