很多時候我們不能直接通過基本選擇器與層級選擇器找到我們想要的元素,為此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。篩選選擇器很多都不是CSS的規范,而是jQuery自己為了開發者的便利延展出來的選擇器
篩選選擇器的用法與CSS中的偽元素相似,選擇器用冒號“:”開頭,通過一個列表,看看基本篩選器的描述:

注意事項:
1. :eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素,根據之前匹配的元素在進一步篩選,**注意jQuery合集都是從0開始索引**
2. gt是一個段落篩選,從指定索引的下一個開始,gt(1) 實際從2開始
~~~
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>基本篩選器</h2>
<h3>:first/:last/:even/:odd</h3>
<div class="left">
<div class="div">
<p>div:first</p>
<p>:even</p>
</div>
<div class="div">
<p>:odd</p>
</div>
<div class="div">
<p>:even</p>
</div>
<div class="div">
<p>:odd</p>
</div>
<div class="div">
<p>:even</p>
</div>
<div class="div">
<p>div:last</p>
<p>:odd</p>
</div>
</div>
<script type="text/javascript">
//找到第一個div
$(".div:first").css("color", "#CD00CD");
</script>
<script type="text/javascript">
//找到最后一個div
$(".div:last").css("color", "#CD00CD");
</script>
<script type="text/javascript">
//:even 選擇所引值為偶數的元素,從 0 開始計數
$(".div:even").css("border", "3px groove red");
</script>
<script type="text/javascript">
//:odd 選擇所引值為奇數的元素,從 0 開始計數
$(".div:odd").css("border", "3px groove blue");
</script>
<h3>:eq/:gt/:lt</h3>
<div class="left">
<div class="aaron">
<p>:lt(3)</p>
</div>
<div class="aaron">
<p>:lt(3)</p>
</div>
<div class="aaron">
<p>:eq(2)</p>
</div>
<div class="aaron">
</div>
<div class="aaron">
<p>:gt(3)</p>
</div>
<div class="aaron">
<p>:gt(3)</p>
</div>
</div>
<script type="text/javascript">
//:eq
//選著單個
$(".aaron:eq(2)").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:gt 選擇匹配集合中所有索引值大于給定index參數的元素
$(".aaron:gt(3)").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:lt 選擇匹配集合中所有索引值小于給定index參數的元素
//與:gt相反
$(".aaron:lt(3)").css("color", "#CD00CD");
</script>
<h3>:not</h3>
<div class="left">
<div>
<input type="checkbox" name="a" />
<p>Aaron</p>
</div>
<div>
<input type="checkbox" name="b" />
<p>慕課</p>
</div>
<div>
<input type="checkbox" name="c" checked="checked" />
<p>其他</p>
</div>
</div>
<script type="text/javascript">
//:not 選擇所有元素去除不匹配給定的選擇器的元素
//選取所有input中,沒有checked屬性的p元素,賦予顏色
$("input:not(:checked)+p").css("background-color", "#CD00CD");
</script>
</body>
</html>
~~~
- 前端工程師
- HTML
- 使用meta實現頁面的定時刷新或跳轉
- 表單相關
- 表單元素input、按鈕、文字完美垂直居中對齊方法
- CSS
- 相關工具網站
- JS
- jQuery
- 第1章 初始jQuery
- 環境搭建
- jQuery對象與DOM對象
- jQuery對象轉化成DOM對象
- DOM對象轉化成jQuery對象
- 第2章 jQuery選擇器
- id選擇器
- 類選擇器
- 元素選擇器
- 全選擇器(*選擇器)
- 層級選擇器
- 基本篩選選擇器
- 內容篩選選擇器
- 可見性篩選選擇器
- 屬性篩選選擇器
- 子元素篩選選擇器
- 表單元素選擇器
- 表單對象屬性篩選選擇器
- 特殊選擇器this
- 第3章 jQuery的屬性與樣式
- 元素的數據存儲
- 問題解決方案
- 解決innerHTML包含的js代碼不能被執行的問題
- webpackdoc
- 前端開發框架
- Bootstrap 3.3.6
- 起步
- 全局 CSS 樣式
- 概覽
- 柵格系統
- PHP
- PHP入門篇
- 基礎總結
- PHP環境變量$_SERVER和系統常量詳細說明
- PHP進階篇
- 數組
- 函數
- 類
- 字符串操作
- 正則表達式
- 會話控制
- 文件系統
- 日期和時間
- 圖形圖像操作
- PHP異常處理
- 數據庫操作
- WEB在線文件管理器
- PHP文件操作
- 獲取首層目錄信息
- 獲取文件信息
- 列表顯示文件及大小
- PHP與MySQL關系大揭秘
- PHP支持哪些數據庫
- 數據庫擴展
- 連接MySQL數據庫
- 執行MySQL查詢
- 插入新數據到MySQL中
- MVC架構模式分析與設計
- Smarty模版語法
- Smarty的基本語法
- Smarty的條件判斷語句
- Smarty的循環語句
- Smarty的文件引用
- Smarty類和對象賦值與使用
- Smarty函數的使用
- functions函數插件的定義和使用
- modifiers變量調節器插件的定義和使用
- block functions區塊函數插件的定義和使用
- Smarty實例
- MVC微型框架的建立
- 網絡摘抄
- PHPExcel如何讀取超大excel文件
- Composer
- Composer技巧
- PHP 開發者該知道的 5 個 Composer 小技巧
- composer常用命令
- Composer使用方法整理(Cy23)
- 利用Composer一步一步搭建自己的PHP框架
- ThinkPHP
- ThinkPHP中RBAC類詳解(一)
- 附:添加注釋版RBAC類源碼
- 常見問題
- 常見方法
- thinkphp 合并兩個字段組合成一個臨時字段concat函數
- ThinkPHP Where 條件中使用表達式
- 編程相關工具
- Eclipse
- Eclipse或Zendstudio漢化
- Zend studio
- Zendstudio快捷鍵
- Zend Studio實用快捷鍵一覽表
- Sublime text
- Sublime text快捷鍵
- 16 個 Sublime Text 快捷鍵
- Emmet的用法及相關語法
- VS Code
- 數據庫
- MySql
- 問題匯總
- mysql創建存儲過程失敗1307錯誤解決
- Mysql出現Field * doesn't have a default value解決辦法
- mysql:ADO連接mysql數據庫,驅動程序和ODBC數據源問題
- 自己如何正確獲取MYSQL的ADO連接字符串
- 網上摘抄
- mysql 存在更新 不存在插入
- Mysql字符串字段中是否包含某個字符串,用 find_in_set
- mysql字段類型對應的數字編號
- 5.7mysql group分組查詢錯誤問題
- mysql常用操作語句
- SQL2005
- SQL常見錯誤
- 使用 sp_change_users_login 修復產生的孤 立賬戶 & 還原中的孤立用戶
- ASP
- Url編碼解碼函數合集 含utf-8和gb2312
- 其他前端相關技巧
- 聯機查看 Office 文檔
- 服務器配置
- windows
- 服務器安裝
- XAMPP自帶TOMCAT插件可以支持php+java
- IIS
- iis7服務器,客戶端無法下載exe文件的解決之道
- Linux
- ubuntu
- Linux安裝JDK
- 輔助開發工具
- Git