过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的选择器语法相同，即选择器器都睡以冒号开头。
过滤选择器可以分为：
基本过滤
内容过滤
可见性过滤
属性过滤
子元素过滤
表单对象属性过滤
1、基本过滤选择器
:first---选取第一个元素---返回单个元素---$("div:first")选取所有<div>元素中的第一个<div>元素
:last---选取最后一个元素---返回单个元素---$("div:last")选取所有<div>元素中的最后一个<div>元素
:not(selector)---去除所有与给定选择器匹配的元素---返回集合元素---$("input:not(.myClass)")选取class不是.myClass的input元素
:even---选取索引是偶数的所有元素，索引从0开始---返回集合元素---$("input:even")选取索引是偶数的<input>元素
:odd---选取索引是奇数的所有元素，索引从0开始---返回集合元素---$("input:odd")选取索引是奇数的<input>元素
:eq(index)---选取索引等于index的元素(index从0开始)---返回单个元素---$("input:eq(1)")选取索引等于1的<input>元素
:gt(index)---选取索引大于index的元素(index从0开始)---返回集合元素---$("input:gt(1)")选取索引大于1的<input>元素
:lt(index)---选取索引小于index的元素(index从0开始)---返回集合元素---$("input:lt(1)")选取索引小于1的<input>元素
:header---选取所有标题元素，如h1,h2等---返回集合元素---$(":header")选取所有标题元素
:animated---选取当前正在执行动画的所有元素---返回集合元素---$("div:animated")选取正在执行动画的<div>元素
:focus---选取当前获取焦点的元素---返回集合元素---$(":focus") 选取当前获取焦点的元素
练习：
改变第一个div的元素的背景色
$("div:first").css("background","#bbffaa");
改变最后一个div元素的背景色
$("div:last").css("background","#bbffaa");
//改变class不为one的<div>元素的背景色
$("div:not(.one)").css("background","#bbffaa");
//改变索引值为偶数的div元素的背景色
$("div:even").css("background","#bbffaa");
//改变索引值为奇数的div元素的背景色
$("div:odd").css("background","#bbffaa");
//改变索引值等于3的div元素背景色
$("div:eq(3)").css("background","#bbffaa");
//改变索引值大于3的div背景色
$("div:gt(3)").css("background","#bbffaa");
//改变索引值小于3的div元素的背景色
$("div:lt(3)").css("background","#bbffaa");
//改变所有标题元素的背景色
$(":header").css("background","#bbffaa");
//改变当前正在执行动画的背景色
$(":animated").css("background","#bbffaa");
//改变当前获取焦点的元素的背景色
$(":focus").css("background","#bbffaa");
2、内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文内容上。
:contains(text)---选取含有文本内容为text的元素---返回集合元素---$("div:contains('我')")选取含有文本‘我’的 div元素
:empty---选取不包含子元素或者文本的空元素--$("div:empty")选取不包含子元素（包括文本元素）的div空元素
:has(selector)---选取含有选择器所匹配元素的元素---返回集合元素---$("div:has(p)")选取含有<p>元素的div元素
:parent---选取含有子元素或者文本的元素---返回集合元素---$("div:parent")选取拥有子元素（包含文本元素）的div元素
练习：
//改变包含文本di的div元素的背景色
$("div:contains('di')").css("background","#bbffaa");
//改变不包含子元素（包括文本元素）的div空元素的背景色
$("div:empty").css("background","#bbffaa");
//改变包含有class为mini元素的div元素的背景色
$("div:has('.mini')").css("background","#bbffaa");
//改变含有子元素（包括文本元素）的div元素的背景色
$("div:parent").css("background","#bbffaa");
3、可见性过滤器
可见性过滤器是根据元素的可见和不可见来选择相应的元素。
:hidden---选取所有不可见的元素---返回集合元素---$(":hidden")选取所有不可见的元素，包括<input type="hidden"/>,<div style="display:none;"><div style="visibility:hidden;"><br />等元素。如果只想选取<input>元素，可以使用$("input:hidden")
:visible---选取所有可见的元素---返回集合元素---$("div:visible")
练习：
改变所有可见的div背景色
$("div:visible").css("background","#bbffaa");
显示隐藏的div(3秒显示),并改变背景色
$("div:hidden").show(3000).css("background","#bbffaa");
4、属性过滤选择器
通过元素的属性来获取相应的元素。
[attribute]---选取拥有此属性的元素---返回集合元素---$("div[id]")选取拥有属性id的元素
[attribute=value]---选取属性值为value的元素---返回集合元素---$("div[title=test]")选取属性值title为test的div元素
[attribute!=value]---选取属性值不等于value的元素---返回集合元素---$("div[title!=test]")选取属性title不等于test的div元素，包括么有title属性的元素也会被选取
[attribute^=value]---选取属性值以value开始的元素---返回集合元素---$("div[title^=test]")选取属性title以test开始的div元素
[attribute*=value]---选取属性值包含value的元素---返回集合元素---$("div[title*=test]")选取属性title含有test的div元素
[attribute$=value]---选取属性以value结束的元素---返回集合元素---$("div[title$=test]")选取属性以test结尾的div元素
[attribute|value]---选取属性等于给定字符串或以该字符串为前缀(噶字符串后跟一个连字符"-")的元素---返回集合元素---$("div[title|=en]")选取属性title等于en或以en为前缀并且后面跟一个连字符的元素
[attribute~=value]---选取属性用空格分隔的之中包含一个给定值的元素---返回集合元素---$('div[title~="uk"]')选取属性title用空格分隔的值中包含字符uk的元素
[attribute1][attribute2][attributeN]---用属性选择器合并成一个复合型选择器，满足多个条件。没选择一次缩小一次范围---返回集合元素---$("div[id][title$='test']")选取拥有属性id，并且属性title是以test结尾的div元素
练习：
改变含有属性title的div元素的背景色
$("div[title]").css("background","#bbffaa");
改变属性title值等于test的div元素的背景色
$("div[title='test']").css("background","#bbffaa");
改变属性title值不等于test的div元素的背景色
$("div[title!='test']").css("background","#bbffaa");
改变属性title值以te开始的div元素的背景色
$("div[title^="te"]").css("background","#bbffaa");
改变属性title值以est结尾的的div元素的背景色
$("div[title$='est']").css("background","#bbffaa");
改变属性title值含有es的div元素的背景色
$("div[title*='es']").css("background","#bbffaa");
改变属性含有id，并且属性title值含有es的div元素的背景色
$("div[id][title*='es']").css("background","#bbffaa");
特别加强：
html
<div title="en">title为en的div</div> <div title="en-UK">title为en-UK的div</div> <div title="english">title为english的div</div> <div title="en uk">title为en uk的div</div> <div title="uken">title为uken的div</div>
改变属性title值以en开始的div的背景色
$("div[title^='en']").css("background","#bbffaa");
改变属性title含有en的div背景色
$("div[title*='en']").css("background","#bbffaa");
改变属性title等于en或与en为前缀切改字符串后跟连字符的元素的背景色
$("div[title|='en']").css("background","#bbffaa");
改变属性title用空格分隔的值中含有uk的元素的背景色
$("div[title~='uk']").css("background","#bbffaa");
5、子元素过滤选择器
相对其他的选择器稍微复杂一些，需要把父元素和子元素区分清楚。
:nth-child(index/even/odd/equation)---选取每个父元素下的第index个子元素或奇偶元素(从1开始)---返回集合元素---:eq(index)只匹配一个元素，:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的
详细功能：
:nth-child(even)选取每个父元素下索引值是偶数的元素
:nth-child(odd)选取每个父元素下索引值是奇数的元素
:nth-child(2)选取每个父元素下索引值是2的元素
:nth-child(3n)选取每个父元素下索引值是3的倍数的元素
:nth-child(3+1)选取每个父元素下索引值是3n+1的元素，n从1开始
:first-child---选取每个父元素的第一个子元素---返回集合元素---:first只返回单个元素，而:first-child选择符将为每个父元素匹配你第一个子元素
:last-child---选取每个父元素的最后一个子元素---返回集合元素---:last只返回单个元素，而:last-child选择符将为每个父元素匹配你最后一个子元素。例如，$("ul li:last-child")将选择每个ul中最后一个li元素
:only-child---如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会---返回集合元素---$("ul li:only-child")在ul中选取是唯一子元素的li元素
练习：
改变每个class为one的div父元素下的第二个子元素的背景色
$("div.one:nth-child(2)").css("background","#bbffaa");
改变每个class为one的div父元素下的第1个子元素的背景色
$("div.one:first-child").css("background","#bbffaa");
改变每个class为one的div父元素下的最后一个子元素的背景色
$("div.one:last-child").css("background","#bbffaa");
如果class为one的div父元素下只有一个子元素，那么改变这个子元素的背景色
$("div.one:only-child").css("background","#bbffaa");
6、表单对象属性过滤器
主要对表单元素进行过滤，如下拉框，多选框等元素
:enabled---选取所有可用的元素 ---返回单个元素---$("#form1 :enabled")选取id为form1的表单内的所有可用元素
:disabled---选取所有不可以用的元素---返回集合元素---$("#form2 :disabled")选取id为form2的表单内所有不用的元素
:checked---选取所有被选中的元素（单选框、复选框）---返回集合元素---$("input:checked")选取所有被选中的input元素
:selected---选取所有被选中的选项元素（下拉列表）---返回集合元素---$("select option:selected")选取所有被选中的选项元素
练习：
改变表单内可用的input元素的值
$("#form1 input:enabled").val("this is changed");
改变表单内不可用input元素的值
$("#form1 input:disabled").val("this is changed");
获取多选框选中的个数
$("input:checked").length
获取下拉框中的内容
$("select:selected").text()
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
//重置表单元素
$(":reset").click(function(){
setTimeout(function() {
countChecked();
$("select").change();
},0);
});
//对表单内 可用input 赋值操作.
$('#btn1').click(function(){
$("#form1 input:enabled").val("这里变化了！");
return false;
})
//对表单内 不可用input 赋值操作.
$('#btn2').click(function(){
$("#form1 input:disabled").val("这里变化了！");
return false;
})
//使用:checked选择器，来操作多选框.
$(":checkbox").click(countChecked);
function countChecked() {
var n = $("input:checked").length;
$("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
}
countChecked();//进入页面就调用.
//使用:selected选择器，来操作下拉列表.
$("select").change(function () {
var str = "";
$("select :selected").each(function () {
str += $(this).text() + ",";
});
$("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
}).trigger('change');
// trigger('change') 在这里的意思是：
// select加载后，马上执行onchange.
// 也可以用.change()代替.
});
//]]>
</script>
<body>
<h3> 表单对象属性过滤选择器.</h3>
<form id="form1" action="#">
<button type="reset">重置所有表单元素</button>
<br /><br />
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button>
<br /><br />
<!-- 测试的元素 -->
可用元素：<input name="add" value="可用文本框"/> <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素： <input name="che" value="可用文本框" /><br/>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
<br/>
多选框：<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div></div>
<br/><br/>
下拉列表1：<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
下拉列表2：<br/>
<select name="test2" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
<div></div>
</form>
</body>
相关推荐
《jQuery学习笔记源码1-3章》涵盖了jQuery的基础到进阶内容，是初学者深入理解这一强大JavaScript库的关键步骤。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...
**jQuery学习笔记--1** jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本篇笔记将深入探讨jQuery的基础知识，包括其核心概念、选择器、DOM操作、事件...
Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录，本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页文档对象模型（DOM）操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在...
### jQuery选择器学习笔记 #### 一、引言 jQuery 是一个快速、小巧且功能丰富的库，极大地简化了 JavaScript 编程。其中的核心之一就是它的选择器系统，它基于 CSS 选择器，并提供了更多的灵活性和功能。本篇笔记...
本学习笔记将聚焦于jQuery的核心功能之一：常规选择器。通过理解并熟练运用这些选择器，你可以更加高效地定位和操纵网页中的元素，提升开发效率。 1. 元素选择器： jQuery的元素选择器允许我们根据HTML标签名来...
**jQuery学习笔记** jQuery，作为一个轻量级的JavaScript库，极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧，帮助初学者快速上手。 ## 一...
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
以下是对JQuery学习笔记的详细解析： 首先，JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异，导致开发跨浏览器的网页应用变得复杂。为了统一这些...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念，通过实例代码来加强理解和应用。 1. **jQuery选择器**:...
《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源，由知名讲师韩顺平的课程实录整理而成，旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...
**jQuery 学习笔记：各种选择详解** 在前端开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 DOM 操作、事件处理和动画效果。本笔记将深入讲解 jQuery 的选择器，帮助开发者更高效地选取和操作网页...
### jQuery学习笔记精心整理 #### 一、什么是jQuery 1. **定义**： - **第三方**：jQuery是由第三方组织或个人编写的函数库，并非浏览器内置或开发者自定义的函数，因此使用前需从官方网站（[www.jquery.com]...
jQuery的选择器几乎与CSS选择器相同，但它们的功能不同：CSS用于设置样式，而jQuery用于添加行为。 - **基础选择器**：ID选择器（`$("#IDname")`），类选择器（`$(".className")`），标签选择器（`$("p")`），通配...
### Jquery 学习笔记1 本篇笔记主要围绕 jQuery 的基本使用方法展开，包括了 DOM 操作、选择器的使用、属性与过滤器等内容。jQuery 是一款优秀的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画等...
### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax？** Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用来创建快速动态网页的技术，通过在后台与服务器进行少量数据...
**jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分，旨在帮助开发者从初级到高级...
### JQuery学习笔记（技术文档） #### 一、JQuery能做什么？ JQuery 是一款轻量级的 JavaScript 库，它的设计宗旨是“write less, do more”，即“写得更少，做得更多”。通过JQuery，可以实现以下功能： 1. **...