jQeury过滤选择器-基本&可见过滤
作者：曾庆林
过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即过滤选择器都是以冒号:开头。
过滤选择器分类：
- 基本过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
- 属性过滤选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器
基本过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :first | 选择第1个元素 | 单个元素 | $(“div:first”)选择第1个div元素 |
| :last | 选择最后1个元素 | 单个元素 | $(“div:last”)选择最后1个div元素 |
| :not(E1) | 去除所有E1选择器匹配的元素 | 集合元素 | $(“input:not(.my)”)选择class不是.my的所有input元素 |
| :even | 选择索引是偶数的所有元素，索引从0开始 | 集合元素 | $(“tr:even”)选择表格中所有偶数的行 |
:odd |
选择索引是奇数的所有元素，索引从0开始 | 集合元素 | $(“tr:odd”)选择表格中所有奇数的行 |
| :eq(index) | 选择索引值是index的元素，index从0开始 | 单个元素 | $(“tr:eq(1)”)选择表格行索引等于1的行 |
| :gt(index) | 选择索引值大于index的元素,index从0开始 | 集合元素 | $(“tr:gt(1) ”)选择表格行索引大于1的行 |
| :lt(index) | 选择索引值小于index的元素,index从0开始 | 集合元素 | $(“tr:lt(1)”)选择表格行索引小于1的行 |
| :header | 所取所有的标题元素,h1~h6 | 集合元素 | $(“:header”)选择网页中所有的<h1>,<h2>…<h6> |
| :animated | 选择当前正在执行动画的所有元素 | 集合元素 | $(“div:animated”)选择正在执行动画的div元素 |
内容过滤选择器
| 选择器 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| :contains(text) | 选择含有text文本内容的元素 | 集合元素 | $(“div:contains(‘我’)”)选择内容里包含我的所有div |
| :empty | 选择不包含子元素或文本的空元素 | 集合元素 | $(“div:empty”)选择不包含子元素（含文本）的所有div元素 |
| :has(E1) | 选择包含有(E1选择器匹配的元素)的所有元素 | 集合元素 | $(“div:has(p)”)选择含有p元素的所有div元素 |
| :parent | 选择含有子元素或文本的元素 | 集合元素 | $(“div:parent”)选择拥有子元素（包含文本）的所有div元素 |
可见性过滤选择器
| 选择器 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| :hidden | 选择所有不可见元素 | 集合元素 | $(“:hidden”)选择所有不可见元素，包括：<input type=“hidden”/>,<div style=“display:none”>和<div style=“visibility:hidden”>等，如果只选择<input>元素，则可以使用 $(“input:hidden”) |
| :visible | 选择所有可见元素 | 集合元素 | $(“div:visible”)选取所有可见的div元素 |
案例-tab切换 可见过滤
思路
单击第几个，显示第几个，以前显示的隐藏
html结构
<div id="tab1" class="tabs">
<ul>
<li class="tab-title active">li1</li>
<li class="tab-title">li2</li>
<li class="tab-title">li3</li>
</ul>
<div class="tab-content" style="display: block;">内容1</div>
<div class="tab-content" >内容2</div>
<div class="tab-content">内容3</div>
</div>
css 部分
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
ul {
list-style: none;
}
.tabs .tab-title {
height: 35px;
line-height: 35px;
border: 1px solid #aaa;
padding-left: 15px;
padding-right: 15px;
float: left;
margin-right: 15px;
position: relative;
z-index: 10;
}
.tabs .active{border-bottom-color:#fff; color: #F80;}
.tabs .tab-content {
clear: both;
border: 1px solid #aaa;
padding: 25px;
width: 450px;
height: 300px;
display: none;
position: relative;
top: -1px;
z-index: 0;
}
#tab2 .tab-content{width: 800px;}
js写法
//[1] 单击第几个，显示第几个，以前显示的隐藏
$(function(){
$(".tab-title").click(function(){
//以前显示的现在隐藏
$(".tab-content:visible").hide();
// 求出是第几个
var num=$(".tab-title").index($(this));
$(".tab-content:eq("+num+")").show();
//之前有.active li 去掉active
//当前li 添加actvie
$(".active").removeClass("active");
$(this).addClass("active");
})
})
完整的示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
ul {
list-style: none;
}
.tabs .tab-title {
height: 35px;
line-height: 35px;
border: 1px solid #aaa;
padding-left: 15px;
padding-right: 15px;
float: left;
margin-right: 15px;
position: relative;
z-index: 10;
}
.tabs .active{border-bottom-color:#fff; color: #F80;}
.tabs .tab-content {
clear: both;
border: 1px solid #aaa;
padding: 25px;
width: 450px;
height: 300px;
display: none;
position: relative;
top: -1px;
z-index: 0;
}
#tab2 .tab-content{width: 800px;}
</style>
</head>
<body>
<div id="tab1" class="tabs">
<ul>
<li class="tab-title active">li1</li>
<li class="tab-title">li2</li>
<li class="tab-title">li3</li>
</ul>
<div class="tab-content" style="display: block;">内容1</div>
<div class="tab-content" >内容2</div>
<div class="tab-content">内容3</div>
</div>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
//[1] 单击第几个，显示第几个，以前显示的隐藏
$(function(){
$(".tab-title").click(function(){
//以前显示的现在隐藏
$(".tab-content:visible").hide();
// 求出是第几个
var num=$(".tab-title").index($(this));
$(".tab-content:eq("+num+")").show();
//之前有.active li 去掉active
//当前li 添加actvie
$(".active").removeClass("active");
$(this).addClass("active");
})
})
</script>
</body>
</html>
网友评论