jQuery学习－选择器

CSS选择器

首先了解一下CSS选择器，CSS即层叠样式表他将网页结构和表现样式完全分离出来，利用CSS选择器可以轻松在不改变HTML结构的前提下改变样式。他是利用获取目标元素后施加样式，有三种方式：行间样式表、内部样式表、外部样式表。

选择器	语法	描述	示例
标签选择器	E{   样式 }	以标签作为选择符	td{ font-size:14px; }
ID选择器	#ID{ 样式 }	以文档元素的唯一ID作为选择符	#info{ font-size:14px; }
类选择器	E.className{ } .className{ }	以文档元素的class作为选择器符	div.info{ font-size:14px; } .info{ font-size:14px; }
群组选择器	E1,E2,E3{ 样式 }	多个选择符共用同样的样式	div,p,a{ font-size:14px; }
后台选择器	E F{ 样式 }	元素E的后代元素F作为选择符	#links a{ font-size:14px; }
通配符选择器	*{ 样式 }	以文档的所有元素作为选择符	*{ font-size:14px; }

如果是内部样式表则将其放在HTML中的<style>标签内，如果是外部样式表则直接在外部css文件中编辑。

<style>

#info{

font-size:14px;

}

.demo{

font-size:13px;

}

</style>

jQuery选择器

jQuery选择器完全继承了CSS的风格，通过选择器轻松获取到DOM元素后，然后为其添加行为。

function click(){
    alert("success");
}
<p id="cl" onclick='click()'>Click me</p>

$("#cl").click(function(){
    alert("click me!");
});

上面是分别利用js和jQuery完成的事件，可以看到jQuery可以有效的将js代码和HTML分离开来，只需要为标签添加ID属性。CSS选择器找到元素后是为其添加样式，而jQuery是为其添加行为，并且jQuery操作CSS比单纯CSS功能更加强大。

js获取页面元素，如果元素不存在则会报错，所以要对其进行检验。而jQuery中获取对象后，即使该元素不存在也不会抱错，使用js判断元素是否存在：

<script>
    if(document.getElementById("demo")){
     ...
    }
    //如果使用jQuery判断该元素是否存在
    if($("#demo").length>0){
      .....
    }
    //或者转化为DOM对象
    if($("#demo")[0]){
      ...
    }
</script>

jQuery选择器分类

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器

基本选择器

选择器	描述	返回	示例
#id	根据指定的ID匹配元素	单个元素	$("#info")获取id为info的元素
.class	根据指定的类名匹配元素	集合元素	$(".info")获取class属性为info的元素
element	根据指定标签匹配元素	集合元素	$("p")选取所有p标签的元素
＊	匹配所有元素	集合元素	$("p")选区所有元素
select1,select2....	匹配每一个指定的元素	集合元素	$("div,span,p.myClass")选区所有<div>元素、<span>元素、class为myClass的<p>元素

$("#demo").css("background","#ffffff")改变ID为demo的背景颜色。

$("p").css("background","#ffffff")改变所有p元素的背景颜色。

$(".demo").css("background","#ffffff")改变所有class为demo的背景颜色。

$("span,div.demo,#demo").css("background","#ffffff")改变所有span元素、div元素中class为demo、id为demo的元素背景颜色。

层次选择器

如果想要通过DOM元素间的层次关系获取元素，可以使用层次选择器。比如：后代元素、子元素、相邻元素和同辈元素等。

选择器	描述	返回	示例
$("sele1 sele2")	后代元素，获取sele1元素后的所有sele2元素	集合元素	$("div span")获取div元素内的span元素
$("parent > child")	子代元素，这个是获取parent子代元素，上面的那个是获取其下的所有元素。	集合元素	$("div > span")获取div元素下的<span>元素
$("selec1 + selec2")	相邻元素，选取selec1元素后的selec2元素	集合元素	$(".demo + div")选取class属性为demo的下一个<div>元素
$("sele1~sele2")	同代元素，选取sele1元素后的所有sele2元素	集合元素	$("#demo~div") 选取id为demo元素后的所有div元素

相邻元素选择器和同代元素选择器有更简单的替代

$(".demo + div") 相当于 $(".demo").next("div");

$("#demo ~ div")相当于$("#demo").nextAll("div");这个只能获取其后面的所有元素

$("#demo").siblings("div")无论前后都能获取。

过滤选择器

通过特定的过滤规则筛选所需的DOM元素。

选择器	描述	返回	示例
:first	获取第一个元素	单个元素	$("div:first")获取div元素中的第一个div元素
:last	获取最后一个元素	单个元素	$("div:last")获取div元素中的最后一个元素
:not(selector)	去除指定匹配的元素	集合元素	$("div:not(.demo)")选取div中class属性不是demo的元素
:even	选取索引是偶数的元素，索引从0开始	集合元素	$("input:even")选取input元素中索引是偶数的<input>元素
:odd	选取索引是奇数的元素，索引从0开始	集合元素	$("input:odd")选取input元素中索引是奇数的<input>元素
:eq(index)	选取索引等于index的元素	单个元素	$("input:eq(1)")选取input元素中索引等于1的<input>元素
:gt(index)	索引大于index元素	集合元素	$("div:gt(1)")选取div中索引大于index的元素
:lt(index)	索引小于index元素	集合元素	同上小于
:header	选取所有head元素	集合元素	$(":header")选取页面中所有标题元素
:animated	选取正在执行动画的所有元素	集合元素	$("div:animated")选取正在执行动画的<div>元素
:focus	选取当前聚焦点元素	单个元素	$(":focus")选取当前聚焦点元素

以上是过滤选择器中基本过滤器，还有内容过滤器：包含指定文本过滤器:contains(text)、文本为空过滤器:empty、含有指定元素的过滤器:has(selector)、拥有子元素过滤器:parent

可见性过滤器：选取所有不可见元素 :hidden ，可见元素:visible。属性过滤器$("div[id]")选取div中含有id属性的元素，$("div[title=test]")选取属性tile为test的div元素，$("div[title!=test]")属性不为test的元素$("div[title^=test]")属性值以test开头,$("div[title$=value]")属性值以value结尾，$("div[title*=test]")属性值含有test，$(div[id][title=value])含有属性id并且含有属性title属性值为value的元素。另外后有自元素过滤器ntlochild()、first-child()、last-child()、only-child.

表单属性过滤器：$("#form1:enabled")id为form1的表单内所有可用元素$("$form2:disabled")id为form2的表单内所有不可用元素,$(input:checked)input元素被选中的元素,$(select option:selected)菜单被选中的元素。

表单选择器

选择器	描述	返回	示例
:input	选取所有<input>,<textarea>,<select><button>元素	集合元素	$(":input")
:text	选取所有单行文本框	集合元素	$(":text")
:password	选取所有密码框	集合元素	$(":password")
:radio	选取所有单选框	集合元素	$(":radio")
:checkbox	选取所有复选框	集合元素	$(":checkbox")
:submit	选取所有提交按钮	集合元素	$(":submit")
:reset	选取所有重置按钮	集合元素	$(":reset")
:button	选取所有按钮	集合元素	$("button")
:file	选取所有上传域	集合元素	$(":file")
:hidden	选取所有不可见元素	集合元素	$(":hidden")
:image	选取所有图像的按钮	集合元素	$(":image")