【html、CSS、javascript-9】jquery-选择器及过滤器

一、选择器与过滤器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	class="intro" 的所有元素
.class,.class	$(".intro,.demo")	class 为 "intro" 或 "demo" 的所有元素
element	$("p")	所有 <p> 元素
el1,el2,el3	$("h1,div,p")	所有 <h1>、<div> 和 <p> 元素
:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:odd	$("tr:odd")	所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:first-child	$("p:first-child")	属于其父元素的第一个子元素的所有 <p> 元素
:first-of-type	$("p:first-of-type")	属于其父元素的第一个 <p> 元素的所有 <p> 元素
:last-child	$("p:last-child")	属于其父元素的最后一个子元素的所有 <p> 元素
:last-of-type	$("p:last-of-type")	属于其父元素的最后一个 <p> 元素的所有 <p> 元素
:nth-child(n)	$("p:nth-child(2)")	属于其父元素的第二个子元素的所有 <p> 元素
:nth-last-child(n)	$("p:nth-last-child(2)")	属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数
:nth-of-type(n)	$("p:nth-of-type(2)")	属于其父元素的第二个 <p> 元素的所有 <p> 元素
:nth-last-of-type(n)	$("p:nth-last-of-type(2)")	属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数
:only-child	$("p:only-child")	属于其父元素的唯一子元素的所有 <p> 元素
:only-of-type	$("p:only-of-type")	属于其父元素的特定类型的唯一子元素的所有 <p> 元素
parent > child	$("div > p")	<div> 元素的直接子元素的所有 <p> 元素
parent descendant	$("div p")	<div> 元素的后代的所有 <p> 元素
element + next	$("div + p")	每个 <div> 元素相邻的下一个 <p> 元素
element ~ siblings	$("div ~ p")	<div> 元素同级的所有 <p> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 值从 0 开始）
:gt(no)	$("ul li:gt(3)")	列举 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列举 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的输入元素
:header	$(":header")	所有标题元素 <h1>, <h2> ...
:animated	$(":animated")	所有动画元素
:focus	$(":focus")	当前具有焦点的元素
:contains(text)	$(":contains('Hello')")	所有包含文本 "Hello" 的元素
:has(selector)	$("div:has(p)")	所有包含有 <p> 元素在其内的 <div> 元素
:empty	$(":empty")	所有空元素
:parent	$(":parent")	匹配含有子元素或者文本的元素。
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格
:root	$(":root")	文档的根元素
:lang(language)	$("p:lang(de)")	所有 lang 属性值为 "de" 的 <p> 元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='default.htm']")	所有带有 href 属性且值等于 "default.htm" 的元素
[attribute!=value]	$("[href!='default.htm']")	所有带有 href 属性且值不等于 "default.htm" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有带有 href 属性且值以 ".jpg" 结尾的元素
[attribute|=value]	$("[title|='Tomorrow']")	所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
[attribute^=value]	$("[title^='Tom']")	所有带有 title 属性且值以 "Tom" 开头的元素
[attribute~=value]	$("[title~='hello']")	所有带有 title 属性且值包含单词 "hello" 的元素
[attribute*=value]	$("[title*='hello']")	所有带有 title 属性且值包含字符串 "hello" 的元素
[name=value][name2=value2]	$( "input[id][name$='man']" )	带有 id 属性，并且 name 属性以 man 结尾的输入框
:input	$(":input")	所有 input 元素
:text	$(":text")	所有带有 type="text" 的 input 元素
:password	$(":password")	所有带有 type="password" 的 input 元素
:radio	$(":radio")	所有带有 type="radio" 的 input 元素
:checkbox	$(":checkbox")	所有带有 type="checkbox" 的 input 元素
:submit	$(":submit")	所有带有 type="submit" 的 input 元素
:reset	$(":reset")	所有带有 type="reset" 的 input 元素
:button	$(":button")	所有带有 type="button" 的 input 元素
:image	$(":image")	所有带有 type="image" 的 input 元素
:file	$(":file")	所有带有 type="file" 的 input 元素
:enabled	$(":enabled")	所有启用的元素
:disabled	$(":disabled")	所有禁用的元素
:selected	$(":selected")	所有选定的下拉列表元素
:checked	$(":checked")	所有选中的复选框选项
.selector	$(selector).selector	在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
:target	$( "p:target" )	选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素

1、基本选择器

$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

2、层级选择器

 $("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

3、过滤选择器（重点）

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于4的li
$("li:gt(2)")    //下标大于2的li
$("li:lt(2)")    //下标小于2的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

3.2内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")       

3.3可见性过滤器

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素

3.4属性过滤器

$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

3.5状态过滤器

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

4、表单过滤器

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

 二、筛选器及遍历方法

方法	描述
add()	把元素添加到匹配元素的集合中
addBack()	把之前的元素集添加到当前集合中
andSelf()	在版本 1.8 中被废弃。addBack() 的别名
children()	返回被选元素的所有直接子元素
closest()	返回被选元素的第一个祖先元素
contents()	返回被选元素的所有直接子元素（包含文本和注释节点）
each()	为每个匹配元素执行函数
end()	结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态
eq()	返回带有被选元素的指定索引号的元素
filter()	把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find()	返回被选元素的后代元素
first()	返回被选元素的第一个元素
has()	返回拥有一个或多个元素在其内的所有元素
is()	根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true
last()	返回被选元素的最后一个元素
map()	把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象
next()	返回被选元素的后一个同级元素
nextAll()	返回被选元素之后的所有同级元素
nextUntil()	返回介于两个给定参数之间的每个元素之后的所有同级元素
not()	从匹配元素集合中移除元素
offsetParent()	返回第一个定位的父元素
parent()	返回被选元素的直接父元素
parents()	返回被选元素的所有祖先元素
parentsUntil()	返回介于两个给定参数之间的所有祖先元素
prev()	返回被选元素的前一个同级元素
prevAll()	返回被选元素之前的所有同级元素
prevUntil()	返回介于两个给定参数之间的每个元素之前的所有同级元素
siblings()	返回被选元素的所有同级元素
slice()	把匹配元素集合缩减为指定范围的子集