一丶 基本过滤选择器
:first和:last(取第一个元素或最后一个元素)
$('span:first').css('color', 'red');
$('span:last').css('color', 'black');
:not(取非元素)
$('div:not(.classNot)').css('color', 'red');
:even (取偶数索引元素)
:odd (取奇数索引元素)
$('tr:even').css('background', 'red'); // 偶数行颜色
$('tr:odd').css('background', 'black'); // 奇数行颜色
第一行索引为0,很方便的实现条纹效果
:eq(x) (取指定索引的元素)
$('tr:eq(2)').css('background', 'red');
:gt(x) ( 取大于x索引的元素)
:lt(x) ( 取小于x索引的元素)
$('ul li:gt(2)').css('color', 'red');
$('ul li:lt(2)').css('color', 'black');
:header(取H1~H6标题元素)
二丶内容过滤选择器
:contains(text)(取包含text文本的元素)
$(document).ready(function () {
// dd元素中包含"jQuery"文本的会变色
$('dd:contains("jQuery")').css('color', 'red');
});
例如下面的代码,第一个dd会变色
<dl>
<dt>技术</dt>
<dd>jQuery, .NET, CLR</dd>
<dt>SEO</dt>
<dd>关键字排名</dd>
<dt>其他</dt>
<dd></dd>
</dl>
:empty(取不包含子元素或文本为空的元素)
$(document).ready(function () {
$('dd:empty').html('没有内容');
});
上面第三个dd会显示”没有内容”文本
:has(selector)(取选择器匹配的元素)
$(document).ready(function () {
// 为包含span元素的div添加边框
$('div:has(span)').css('border', '1px solid #000');
});
即使span不是div的直系子元素,也会生效
<div>
<h2>
A
<span>B</span>
</h2>
</div>
:parent(取包含子元素或文本的元素)
$(document).ready(function () {
$('ol li:parent').css('border', '1px solid #000');
});
下面的代码,A和D所在的li会有边框
<ol>
<li></li>
<li>A</li>
<li></li>
<li>D</li>
</ol>
三丶可见性过滤选择器
:hidden(取不可见的元素)
下面的代码,先弹出”hello”对话框,然后hid-1会显示,hid-2仍然是不可见的。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
div
{
margin: 10px;
width: 200px;
height: 40px;
border: 1px solid #FF0000;
display:block;
}
.hid-1
{
display: none;
}
.hid-2
{
visibility: hidden;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div:hidden').show(500);
alert($('input:hidden').val());
});
</script>
</head>
<body>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
</body>
</html>
:visible(取可见的元素)
下面的代码,最后一个div会有背景色
<script type="text/javascript">
$(document).ready(function() {
$('div:visible').css('background', '#EEADBB');
});
</script>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>
jQuery选择器大全
</div>