jQuery选择器

jQuery选择器类似于css选择器，可以选取网页中的元素。

1、jQuery中的选择器有很多，主要可以通过以下选取：

通过CSS选择器选取元素：

• 基本选择器
• 层次选择器
• 属性选择器

通过过滤选择器选取元素：

• 基本过滤选择器
• 可见性过滤选择器

2、基本选择器：标签，类，ID，并集，全局选择器。

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$("h2" )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,...,selectorN	将每一个选择器匹配的元素合并后一起返回	$("div,p,.title" )选取所有div、p和拥有class为title的元素
全局选择器	*	匹配所有元素	$("*" )选取所有元素

代码如下：

//1.标签选择器
$("p").css("color","red");

//选择所有的p元素，设置样式颜色为红色

//2.类选择器
$(".price").css("background","blue");

//3.id选择器
$("#conten").css("font-size","12px");

//4.并集选择器
$(".price,li").css("color","green");

//5.全局选择器
$("*").css("font-weight","bold");

3、层次选择器

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的<span>元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素<span>
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

代码如下：

//1.选择后代元素   
$(".textRight p").css("color","red");


//2.子代选择器
$(".textRight>p").css("color","red");

//3.相邻选择器
 $("h1+p").css(text-decoration","underline");

//4.同辈（兄弟）选择器
$("h1~p").css("text-decoration","underline");

4、属性选择器

通过HTML元素的属性来选择元素：

[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^='en']" )选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* ='txt']" )选取href属性值中含有txt的元素

代码如下：

//1.选取a标签里面带有class属性的元素
$("#news a[class]").css("background","#c9cbcb");

//2.选择class值不等于zoo的元素
$("#news a[class!='zoo']").css("background","#c9cbcb")；

//3.选择a标签href属性以www开头的元素
$("#news a[href^='www']").css("background","#c9cbcb")；

//4.选择a标签href属性以html结尾的元素
$("#news a[href$='html']").css("background","#c9cbcb");

//5.a标签href属性值包含“x”的元素
$("#news a[href*='x']").css("background","#c9cbcb");

5、过滤选择器

主要分类有：

• 基本过滤选择器
• 可见性过滤选择器
• 表单对象过滤选择器
• 内容过滤选择器
• 子元素过滤选择器

基本过滤选择器：

语法	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有<li>元素中的第一个<li>元素
:last	选取最后一个元素	$(" li:last" )选取所有<li>元素中的最后一个<li>元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有<li>元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有<li>元素
:eq(index)	选取索引等于index的元素（index从0开始）	$("li:eq(1)" )选取索引等于1的<li>元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素

代码如下：

//1.选择标题元素h1~h6
$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"})；

//2.选择奇数行，偶数行   注意：下标是从0开始的
$(".contain li:even").css("background","#f0f0f0");
$(".contain li:odd").css("background","#cccccc");

//3.选择第一个和最后一个
$(".contain li:first").css({"font-size":"16px","color":"#e90202"});
$(".contain li:last").css("border","none");

//4.gt是大于，lt是小于，注意下标也是从0开始
$(".contain li:lt(2)").css({"color":"#708b02"});
$(".contain li:gt(3)").css({"color":"#b66302"})

可见性过滤选择器：

语法	描述	示例
:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

代码如下：

//选择p里面所有的隐藏的元素，显示出来
$("p:hidden").show();

//选择p里面所有的可见的元素，隐藏起来
$("p:visible").hide();

6、特殊符号的转义

标签都含有特殊符号，需要转义符来进行转义
<div id="id#a">aa</div>
<div id="id[2]">cc</div>

正确的转义是：
//给特殊符号#号进行转义
$("#id\\#a");

//给特殊符号[]进行转义
$("id\\[2\\]");

7、在jQuery选择器中的空格，都是代表有着各自的含义，在书写的时候一定要规范！！！

var $t_a = $(".test :hidden"); //带空格的jQuery选择器

//注意：这个带空格的表示，选择test里面的隐藏元素，相当于选择子元素


var $t_b = $(".test:hidden");  //不带空格的jQuery选择器

//这个是隐藏的class为test的元素