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" οnclick='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")选取当前聚焦点元素


可见性过滤器：选取所有不可见元素 :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")