jQuery选择器

1.jQuery-选择器

1)基本选择器

　　 #id

　　根据给定的ID匹配一个元素

$("#myDiv");　

　　

　　 element

　　根据给定的元素名匹配所有元素

$("div");

　　 .class

　　根据给定的类匹配元素

$(".myClass");

　　 *

　　匹配所有元素

$("*")

　　

　　selector1,selector2,selectorN

　　将每一个选择器匹配到的元素合并后一起返回。

$("div,span,p.myClass")

2）层级选择器

　　ancestor descendant

 　　在给定的祖先元素下匹配所有的后代元素

$("form input")

　　parent > child

　　匹配父级元素下的子级元素

$("form > input")

　　prev + next

　　匹配所有紧接在 prev 元素后的 next 元素（相当于css中的相邻选择器）

$("label + input")

　　prev ~ siblings

　　匹配 prev 元素的所有同辈 siblings 元素（相当于css中的兄弟选择器）

$("form ~ input")

 3)基本过滤选择器

 　　:first

　　获取第一个元素

$('li:first');   //获取第一个li元素

　　:last　　

　　获取最后个元素

$('li:last')            //获取最后一个li元素

　　:not(selector)

　　匹配没有指定的selector元素/选择器的元素。

$("div:not(.one)")        //匹配class名不为one的div

　　:even

　　匹配所有索引值为偶数的元素，从 0 开始计数(但在表格中实际匹配的是第1,3,5...行)

$("tr:even")            //匹配索引为偶数的所有行,实际是第1,3,5....(奇数)行

 　　:odd

　　匹配所有索引值为奇数的元素，从 0 开始计数(实际匹配的是第偶数行)

$("tr:odd")

　　:eq()

　　匹配一个给定索引值的元素

$("div:eq(3)")            //匹配索引为3的div

　　:gt()

　　匹配所有大于给定索引值的元素

$("tr:gt(0)")　　　　　　//匹配除第一行之外，以后的所有行

　　:lt(3)

　　匹配所有小于给定索引值的元素

$("tr:lt(2)")        //查找索引小于2，即第1.2行

　　:header

　　匹配如 h1, h2, h3之类的标题元素

$(":header").css("background", "#EEE");            //给所有的标题加上背景色

　　:animated

　　匹配所有正在执行动画效果的元素

 $("div:not(:animated)").animate({ left: "+=20" }, 1000);    //    对不在执行动画效果的元素执行一个动画特效

4）可见性过滤选择器

　　:visible

　　匹配所有的可见元素

$("tr:visible")

　　:hidden

　　匹配所有不可见元素，或者type为hidden的元素

$("tr:hidden")

 5)内容过滤选择器

 　　:contains(text)

　　匹配包含给定文本的元素

$("div:contains('John')")

　　:empty

　　匹配所有不包含子元素或者文本的空元素

$("td:empty")　　　　　　　//返回所有内容为空的td

　　 :has(selector)

　　匹配含有selector这个选择器的元素

$("div:has(p)").addClass("test");            //给所有包含 p 元素的 div 元素添加一个 text 类

　　:parent

　　匹配含有子元素或者文本的元素

$("td:parent")        //查找所有含有子元素或者文本的 td 元素

 6）子元素过滤器

　　:nth-child( )　

　　匹配其父元素下的第N个子元素

$("ul li:nth-child(2)")            //在每个 ul 查找第 2 个li

　　:first-child　

　　获取匹配的第一个元素

$('li').first()                //获取第一个li

　　:last-child　　

　　匹配最后一个子元素

$("ul li:last-child")        //    在每个 ul 中查找最后一个 li

　　:only-child

　　如果某个元素是父元素中唯一的子元素，那将会被匹配(如果父元素中含有其他元素，那将不会被匹配)

$("ul li:only-child")                    //在 ul 中查找是唯一子元素的 li

 7)属性选择器

　　 [attribute]

　　匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可

$("div[id]")        //查找所有含有 id 属性的 div 元素

　　[attribute=value]

　　匹配给定的属性是某个特定值的元素

$("input[name='newsletter']").attr("checked", true);        //查找所有 name 属性是 newsletter 的 input 元素

　　[attribute!=value]

　　匹配所有不含有指定的属性，或者属性不等于特定值的元素。

$("input[name!='newsletter']").attr("checked", true);         //查找所有 name 属性不是 newsletter 的 input 元素

　　[attribute^=value]

　　匹配给定的属性是以某些值开始的元素

$("input[name^='news']")            //查找所有 name 以 'news' 开始的 input 元素

　　[attribute$=value]　

　　匹配给定的属性是以某些值结尾的元素

$("input[name$='letter']")            //查找所有 name 以 'letter' 结尾的 input 元素

　　[attribute*=value]

　　匹配给定的属性是以包含某些值的元素

$("input[name*='man']")            //查找所有 name 包含 'man' 的 input 元素

//比如 <input name="man-news" />, <input name="milkman" />, <input name="letterman2" />都可以匹配到

　　[selector1][selector2][selectorN]

　　复合属性选择器，需要同时满足多个条件时使用

$("input[id][name$='man']")            //找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的