jquey 过滤选择器

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1.过滤选择器

注意:在所有的过滤选择器前，需要增加":"

1. 基本过滤选择器

* :first - 匹配第一个

* first()函数

* :last - 匹配最后一个

* last()函数

* :not() - 匹配指定规则之外

* :even - 匹配偶数

*

dd - 匹配奇数

* :eq() - 索引值等于

* 索引值从 0 开始

* :gt() - 索引值大于

* :lt() - 索引值小于

* :header - 匹配h1h2h3h4h5h6标题

* :animated - 匹配动画

* 只能匹配jQuery实现的动画效果

2.子元素过滤选择器

* :nth-child()

* 从 1 开始

* :first-child

* :last-child

*

nly-child - 只有一个子元素

3.可见性过滤选择器

* :hidden - 匹配隐藏元素

* :visible - 匹配可见元素

4.属性过滤选择器

* [attrName]

* [attrName=value]

* [attrName!=value]

* [attrName^=value]

* [attrName$=value]

* [attrName*=value]

5. 内容过滤选择器

* :contains(text) - 含有指定文本的元素

* :empty - 不包含子元素或文本元素的元素

* :parent - 包含子元素或文本元素的元素

* :has(selector) - 包含匹配selector的父元素

6.表单对象属性选择器

* :enabled

* :disabled

* :checked

* :selected

jQuery小案例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态列表效果</title>
<script src="jquery-1.11.3.js"></script>
<style type="text/css">
* {margin: 0;padding: 0;}
body {font-size: 12px;text-align: center; }
a {color: #04D;text-decoration: none;}
a:hover {color: #F50;text-decoration: underline;}
.SubCategoryBox { width: 600px;margin: 0 auto;text-align: center;margin-top: 40px;}
.SubCategoryBox ul {list-style: none;}
.SubCategoryBox ul li {display: block;float: left;width: 200px;line-height: 20px;}
.showmore { clear: both;text-align: center; padding-top: 10px;}
.showmore a {display: block;width: 120px; margin: 0 auto;
line-height: 24px; border: 1px solid #AAA;}
.showmore a span {padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;}
.promoted a {color: #F50;}
</style>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="#"><span>显示全部品牌</span></a>
</div>
</div>
<script>
/*
需求
1. 当页面加载,从"富士"到"爱国者"隐藏
2. 点击按钮,将隐藏的内容显示出来
3. 再次点击按钮,将显示的内容隐藏出来
*/
// 1. 当页面加载,从"富士"到"爱国者"隐藏
var $lis = $("ul>li:gt(5):not(:last)");
$lis.hide();
// 2. 点击按钮,将隐藏的内容显示出来
$("a>span").click(function(){
// is(selector) - 返回Boolean
if($lis.is(":hidden")){
$lis.show();
$("a>span").text("精简显示品牌");
}else{
$lis.hide();
$("a>span").text("显示全部品牌");
}
return false;//阻止a标签跳转
});
</script>
</body>
</html>