jQeury過(guò)濾選擇器-基本&可見(jiàn)過(guò)濾
作者：曾慶林
過(guò)濾選擇器主要是通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選出需要的DOM元素，過(guò)濾規(guī)則與CSS中的偽類選擇器語(yǔ)法相同，即過(guò)濾選擇器都是以冒號(hào):開頭。
過(guò)濾選擇器分類：
- 基本過(guò)濾選擇器
- 內(nèi)容過(guò)濾選擇器
- 可見(jiàn)性過(guò)濾選擇器
- 屬性過(guò)濾選擇器
- 子元素過(guò)濾選擇器
- 表單對(duì)象屬性過(guò)濾選擇器
基本過(guò)濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :first | 選擇第1個(gè)元素 | 單個(gè)元素 | $(“div:first”)選擇第1個(gè)div元素 |
| :last | 選擇最后1個(gè)元素 | 單個(gè)元素 | $(“div:last”)選擇最后1個(gè)div元素 |
| :not(E1) | 去除所有E1選擇器匹配的元素 | 集合元素 | $(“input:not(.my)”)選擇class不是.my的所有input元素 |
| :even | 選擇索引是偶數(shù)的所有元素，索引從0開始 | 集合元素 | $(“tr:even”)選擇表格中所有偶數(shù)的行 |
:odd |
選擇索引是奇數(shù)的所有元素，索引從0開始 | 集合元素 | $(“tr:odd”)選擇表格中所有奇數(shù)的行 |
| :eq(index) | 選擇索引值是index的元素，index從0開始 | 單個(gè)元素 | $(“tr:eq(1)”)選擇表格行索引等于1的行 |
| :gt(index) | 選擇索引值大于index的元素,index從0開始 | 集合元素 | $(“tr:gt(1) ”)選擇表格行索引大于1的行 |
| :lt(index) | 選擇索引值小于index的元素,index從0開始 | 集合元素 | $(“tr:lt(1)”)選擇表格行索引小于1的行 |
| :header | 所取所有的標(biāo)題元素,h1~h6 | 集合元素 | $(“:header”)選擇網(wǎng)頁(yè)中所有的<h1>,<h2>…<h6> |
| :animated | 選擇當(dāng)前正在執(zhí)行動(dòng)畫的所有元素 | 集合元素 | $(“div:animated”)選擇正在執(zhí)行動(dòng)畫的div元素 |
內(nèi)容過(guò)濾選擇器
| 選擇器 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| :contains(text) | 選擇含有text文本內(nèi)容的元素 | 集合元素 | $(“div:contains(‘我’)”)選擇內(nèi)容里包含我的所有div |
| :empty | 選擇不包含子元素或文本的空元素 | 集合元素 | $(“div:empty”)選擇不包含子元素（含文本）的所有div元素 |
| :has(E1) | 選擇包含有(E1選擇器匹配的元素)的所有元素 | 集合元素 | $(“div:has(p)”)選擇含有p元素的所有div元素 |
| :parent | 選擇含有子元素或文本的元素 | 集合元素 | $(“div:parent”)選擇擁有子元素（包含文本）的所有div元素 |
可見(jiàn)性過(guò)濾選擇器
| 選擇器 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| :hidden | 選擇所有不可見(jiàn)元素 | 集合元素 | $(“:hidden”)選擇所有不可見(jiàn)元素，包括：<input type=“hidden”/>,<div style=“display:none”>和<div style=“visibility:hidden”>等，如果只選擇<input>元素，則可以使用 $(“input:hidden”) |
| :visible | 選擇所有可見(jiàn)元素 | 集合元素 | $(“div:visible”)選取所有可見(jiàn)的div元素 |
案例-tab切換 可見(jiàn)過(guò)濾
思路
單擊第幾個(gè)，顯示第幾個(gè)，以前顯示的隱藏
html結(jié)構(gòu)
<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;">內(nèi)容1</div>
<div class="tab-content" >內(nèi)容2</div>
<div class="tab-content">內(nèi)容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] 單擊第幾個(gè)，顯示第幾個(gè)，以前顯示的隱藏
$(function(){
$(".tab-title").click(function(){
//以前顯示的現(xiàn)在隱藏
$(".tab-content:visible").hide();
// 求出是第幾個(gè)
var num=$(".tab-title").index($(this));
$(".tab-content:eq("+num+")").show();
//之前有.active li 去掉active
//當(dāng)前l(fā)i 添加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;">內(nèi)容1</div>
<div class="tab-content" >內(nèi)容2</div>
<div class="tab-content">內(nèi)容3</div>
</div>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
//[1] 單擊第幾個(gè)，顯示第幾個(gè)，以前顯示的隱藏
$(function(){
$(".tab-title").click(function(){
//以前顯示的現(xiàn)在隱藏
$(".tab-content:visible").hide();
// 求出是第幾個(gè)
var num=$(".tab-title").index($(this));
$(".tab-content:eq("+num+")").show();
//之前有.active li 去掉active
//當(dāng)前l(fā)i 添加actvie
$(".active").removeClass("active");
$(this).addClass("active");
})
})
</script>
</body>
</html>
