jQuery過(guò)濾選擇器用法分析
本文實(shí)例講述了jQuery過(guò)濾選擇器用法。分享給大家供大家參考。具體分析如下:
在實(shí)踐中,可以在基本選擇器的基礎(chǔ)上添加過(guò)濾選擇器來(lái)完成查詢(xún)?nèi)蝿?wù),根據(jù)具體情況,在過(guò)濾選擇器中可以使用元素的索引值、內(nèi)容、屬性、子元素位置、表單
域?qū)傩砸约翱梢?jiàn)性作為篩選條件
1. :first選擇器
格式:
實(shí)例:
2. :last選擇器
格式:
實(shí)例:
3. :odd選擇器
格式:
實(shí)例:
4. :even選擇器
格式:
實(shí)例:
5. :eq選擇器
格式:
實(shí)例:
6. :gt選擇器
格式:
實(shí)例:
7. :lt選擇器
格式:
實(shí)例:
若要查找索引大于n1小于n2的所有元素,可以使用數(shù)組選擇器,
8. :not選擇器
格式:
實(shí)例:
9. :header選擇器
格式:
10. :animated選擇器
格式:
簡(jiǎn)單示例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>過(guò)濾選擇器</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":header").css("color", "#999");
$("tr:first").css("background", "#FCF");
$("td:last").css("background", "#FCF");
$("td:odd").css("background", "yellow");
$("td:even").html("偶數(shù)");
$("td:eq(1)").css("border", "1px solid red");
$("td:gt(6)").css("border", "1px solid blue");
$("td:lt(6)").css("color", "blue");
$("td:not(:first, :last").css("color", "red");
});
</script>
</head>
<body>
<h3 align="center">簡(jiǎn)單過(guò)濾選擇器應(yīng)用示例</h3>
<table width="480" height="160" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</body>
</html>
效果圖如下所示:
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- 舉例講解jQuery中可見(jiàn)性過(guò)濾選擇器的使用
- jquery可見(jiàn)性過(guò)濾選擇器使用示例
- jQuery子元素過(guò)濾選擇器用法示例
- jQuery內(nèi)容過(guò)濾選擇器用法示例
- jQuery過(guò)濾選擇器經(jīng)典應(yīng)用
- 簡(jiǎn)單講解jQuery中的子元素過(guò)濾選擇器
- JQuery中基礎(chǔ)過(guò)濾選擇器用法實(shí)例分析
- JQuery中屬性過(guò)濾選擇器用法實(shí)例分析
- jquery表單對(duì)象屬性過(guò)濾選擇器實(shí)例分析
- jQuery子屬性過(guò)濾選擇器用法分析
- jQuery內(nèi)容過(guò)濾選擇器用法分析
- jQuery過(guò)濾選擇器詳解
- jQuery可見(jiàn)性過(guò)濾選擇器用法示例
相關(guān)文章
JQuery實(shí)現(xiàn)帶排序功能的權(quán)限選擇實(shí)例
這篇文章主要介紹了JQuery帶排序功能的權(quán)限選擇,涉及jQuery鼠標(biāo)事件及json數(shù)據(jù)處理的相關(guān)技巧,需要的朋友可以參考下2015-05-05使用jQuery UI庫(kù)開(kāi)發(fā)Web界面的簡(jiǎn)單入門(mén)指引
這篇文章主要介紹了使用jQuery UI庫(kù)開(kāi)發(fā)Web界面的簡(jiǎn)單入門(mén)指引,jQuery UI是一個(gè)基于jQuery的圖形組件庫(kù),需要的朋友可以參考下2016-04-04當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)跟隨鼠標(biāo)顯示放大的圖片效果
當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí),跟隨鼠標(biāo)顯示放大顯示的圖片,具體效果情況截圖,另附送源碼,感興趣的朋友可以學(xué)習(xí)下哈2013-06-06jQuery實(shí)現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果
在之前做項(xiàng)目的時(shí)候經(jīng)常會(huì)在主頁(yè)面上點(diǎn)擊某個(gè)按鈕,右側(cè)彈出一個(gè)div輸出對(duì)應(yīng)內(nèi)容的詳細(xì)信息,怎么實(shí)現(xiàn)的呢,今天小編給大家分享通過(guò)jquery實(shí)現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果,感興趣的朋友一起看看吧2016-10-10jquery獲取table指定行和列的數(shù)據(jù)方法(當(dāng)前選中行、列)
下面小編就為大家?guī)?lái)一篇jquery獲取table指定行和列的數(shù)據(jù)方法(當(dāng)前選中行、列)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法
這篇文章主要介紹了jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法,需要的朋友可以參考下2014-05-05jQuery實(shí)現(xiàn)點(diǎn)擊小圖片淡入淡出顯示大圖片特效
本文給大家分享基于jquery實(shí)現(xiàn)的一款圖片特效,當(dāng)點(diǎn)擊小圖片時(shí)會(huì)淡入淡出大圖片,通過(guò)定義需要展示的圖片以及圖片要展示的時(shí)間,來(lái)實(shí)現(xiàn)這一效果,感興趣的朋友跟著小編一起來(lái)學(xué)習(xí)吧2015-09-09jQuery+css實(shí)現(xiàn)百度百科的頁(yè)面導(dǎo)航效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)百度百科的頁(yè)面導(dǎo)航效果,需要的朋友可以參考下2014-12-12