jQuery选择器

什么是jQuery想着器

1、选择器的作用就是用来访问元素，而后为其增加css样试
2.jQuery拥有着良好的兼容性

jQuery基本选择器

$(this)	当前 HTML 元素

$("p")	所有 <p> 元素

$("p.intro")	所有 class="intro" 的 <p> 元素

$(".intro")	所有 class="intro" 的元素

$("#intro")	id="intro" 的元素

$("ul li:first")	每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery层次选择器

$("ancestor descendant")	选取ancenstor元素中所有descendant（后代）元素，不仅仅是直接子元素	集合元素	$("div span")选取<div>里的所有<span>元素

$("parent>child")	选取parent元素下的child（子）元素，直接子元素，例如：不包括子元素中的子元素	集合元素	$("div>span")选取<div>元素下名为<span>的元素

$("prev+next")	选取紧接在prev元素后的next元素	集合元素	$(".one+div")选取class为one的下一个<div>元素

$("prev~siblings")	选取prev元素之后所有siblings元素	集合元素	$("#two~div")选取id为two的元素后面的所有<div>同辈与阿奴

jQuery属性选择器

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

$("[attribute*=value]")属性选择器匹配含有指定属性并且属性值包含value的元素。

$("[attribute^=value]")属性选择器匹配含有指定属性并且属性值以value开头的元素。

jQuery基本过滤选择器

:first 　　 　　     获取数组中第一个元素

:last 　　 　　      获取数组中最后一个

:eq(selector)　　 获取指定索引

:gt(index) 　　     大于指定索引

:lt(index) 　　      小于指定索引

:even 　　           偶数，从0开始计数（0、2、4即1/3/5行）

:odd　　              奇数

:not(selector) 　  去除所有与指定选择器匹配的元素

:header 　　       获得所有标题元素

:animated 　　    获得所有动画

:focus 　　         获得焦点

jQuery可见性过滤选择器详细说明

$(":visible ")选取所有可见的元素

$(":hidde")选取所有隐藏的元素

jquery选择器注意事项

根据w3c的规定,属性值中是不能包含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符,如果按照普通的方式去处理出来的话就会出错。解决此类错误的方法是使用转义符转义。
html代码如下:

<div id="id#b">bb</div>
<div id="id[1]">cc</div>
如果按照普通的方式来获取,例如:

$("#id#b");
$("#id[1]");
以上代码不能正确的获取到元素,正确的写法如下:

$("#id\\#b");
$("#id\\[1\\]");
1.2 属性选择器的@符号问题

在jQuery升级版本过程中,jQuery在1.3.1版本中彻底放弃了1.1.0版本遗留下的@符号,假如使用1.3.1以上的版本,那么不需要在属性前添加@符号,比如:

$(" div[@title='test'] ");
正确的写法是去掉符号@,比如：

$(" div[title='test'] ");
如果你的项目中已使用较早的jQuery代码和插件,若把jQuery升级到最新后,出现代码报错或不能运行,那么很有可能是因为代码中使用了属性选择器的@符号而引起的。

2. 选择器中含有空格的注意事项

选择器中多一个空格或少一个空格也许会得到截然不同的结果。

如后代选择器与过滤选择器的不同造成的效果如下:

var $t_a=$('.test :hidden');//带空格的
以上代码是选取class为"test"的元素里面的隐藏元素。

而代码：

var $t_b=$('.test:hidden');//不带空格的
以上代码则是选取隐藏的class为"test"的元素。