Jquery选择器（二）

三、过滤选择器

1.基本过滤器

 

1.

获取第一个元素（索引为0）:

$(document).ready(function(){

$("li:first").css("color"," red");
});

获取最后一个元素

$(document).ready(function(){
$("li:last").css("color"," red");
})

获取偶数项元素

$(document).ready(function(){
$("li:even").css("color"," red");
})

获取基数项元素

$(document).ready(function(){

$("li:odd").css("color"," red");
});

获取索引为2的元素（第三个）

$(document).ready(function(){
$("li:eq(2)").css("color"," red");
});

获取索引大于2的元素

$(document).ready(function(){
$("li:gt(2)").css("color"," red");
});

获取索引小于2的元素

$(document).ready(function(){
$("li:lt(2)").css("color"," red");
});

获取除了id为apple的的input元素

$(document).ready(function(){
$("input:not(#apple)").css("background-color"," red");
});

获取标题元素

$(document).ready(function(){
$(":header").css("background-color"," red");
});

 

<body>

<h1>我是标题元素</h1>
<ul>
<li>第一项元素</li>
<li>第二项元素</li>
<li>第三项元素</li>
<li>第四项元素</li>
<li>第五项元素</li>
</ul>

<input id="apple" value="11" />
<input id="flower" checked="checked" value="22" />

</body>

2.内容过滤器

 

获取div内容包含”我“的元素

$(document).ready(function(){
$("#btn1").click(function(){
$("div:contains('qin')").css("background","#bfa");
})

})

获取为空的div

$(document).ready(function(){
$("#btn2").click(function(){
$("div:empty").css("background","#bfa");
}) });

获取含有p元素选择器的div

$(document).ready(function(){
$("#btn3").click(function(){
$("div:has(p)").css("background","#bfa");
}) });

获取含有子元素或者文本的div

$(document).ready(function(){
$("#btn4").click(function(){
$("div:parent").css("background","#bfa");
}) });

<body>
<div>我是秦怡</div>
<div>我喜欢看电影</div>
<div>你呢<p>我是p</p></div>

<div style="width:100px; height:100px;"></div>
<input type="button" value="匹配包含给定文本的元素" id="btn1" />

<input type="button" value="匹配所有不包含子元素或者文本的空元素"  id="btn2"  />

<input type="button" value="匹配含有选择器所匹配的元素的元素"  id="btn3"  />

<input type="button" value="匹配含有子元素或者文本的元素"  id="btn4"  />
</body>

 

3.可见性过滤器

显示隐藏的tr

$(document).ready(function(){
$("#btn5").click(function(){
$("tr:hidden").show();
}) });

隐藏显示的tr

$(document).ready(function(){
$("#btn6").click(function(){
$("tr:visible").hide();
}) });

 

<table>
<tr style="display:none"><td>我是隐藏的元素</td></tr>
<tr><td>我是显示的元素</td></tr>
</table>
<input type="button" value="查找隐藏的元素" id="btn5" />

<input type="button" value="隐藏显示的元素"  id="btn6"  />

 

posted @ 2015-11-08 23:12  Honker书生  阅读(227)  评论(0)    收藏  举报