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")