（第1讲）jQuery选择器

本篇文章链接：

http://blog.csdn.net/xkcode/article/details/20047521

30中css选择器：

http://www.360doc.com/content/14/0104/22/15643_342679505.shtml

css官方文件：

https://www.w3.org/Style/CSS/specs

1.什么是jQuery选择器？

选择器就是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作有依赖于选择器。

2.jQuery选择器的优势

(1).  简洁的写法

document.getElementById("id") //使用JavaScript通过ID获取元素
$("#id") //使用jQuery通过ID获取元素
document.getElementsByTagName("div");  //使用JavaScript通过标签名获取元素
$("div")  //使用jQuery通过标签名获取元素

(2). 支持CSS1.0到CSS3.0选择器

(3). 完善的处理机制

3.jQuery基本选择器

jQuey基本选择器和css基本选择器相同，他继承了css选择器的语法和功能，主要由元素标签名、class、id和多个选择器组成通过基本选择器可以实现大多数页面元素的查找。

(1). 标签选择器  $("h2") 选取所有h2元素

(2). 类选择器 $(".title") 选取所有class为title的元素

(3). ID选择器 $("#title") 选取所有id为title的元素

(4). 并集选择器 $("div,#title,.title") 选取所有div、id为title和class为title的元素

(5). 交集选择器 $("h1.title") 选取所有class为title的h1元素

(6). 全局选择器 $("*") 选取所有元素

4.jQuery层次选择器

jQueyr层次选择器和css层次选择器相同，它们都是根据获取元素与其父元素、子元素、兄弟元素等关系而构成的选择器。

(1). 后代选择器 $("#menu span") 选取#menu下所有的<span>元素

(2). 子选择器 $("#menu>span") 选取#menu下的子元素<span>元素

(3). 相邻元素选择器 $(#menu+span) 选取紧邻#menu之后的同辈元素

(4). 同辈元素选择器 $("#menu~span") 选取#menu之后的所有同辈元素

5.jQuery属性选择器

属性选择器就是通过HTML元素属性选择元素的选择器，它与CSS中的属性选择器语法构成完全一致。

(1). $("[href]") 选取含有href属性的元素

(2). $("[href='#']") 选取href属性值为“#”的属性

(3). $("[href!='#']") 选取href属性不为“#”的元素

(4). $("[href^='ch']") 选取href属性值以“ch”开头的元素

(5). $("[href$='ch']") 选取href属性值为“ch”结尾的元素

(6). $("[href*='ch']") 选取href属性值含“ch”的元素

(7). $("li[id][title=name]") 选取含有id属性和title属性为“name”的<li>元素

6.基本过滤选择器

(1). $("li:first") 选取所有<li>元素中的第一个

(2). $("li:last") 选取所有<li>元素中的最后一个

(3). $("li:not(.three)") 选取class不是three的元素

(4). $("li:even") 选取索引是偶数的所有<li>元素

(5). $("li:odd") 选取索引是奇数的所有<li>元素

(6). $("li:eq(1)") 选取索引等于1的<li>元素

(7). $("li:gt(1)") 选取索引大于1的<li>元素

(8). $("li:lt(1)") 选取索引小于1的<li>元素

(9). $(":header") 选取网页中的所有标题元素 如：<h1>、<h2>、<h3>、<h4>...

(10). $(":focus") 选取当前获取焦点的元素

注：索引从0开始

7.可见性过滤选择器

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

(2). $(":hidden") 选取所有隐藏元素

8.jQuery选择器注意事项

(1).选择器中含有特殊符号

HTML:

<div id="id#a">aa</div>
<div id="id[2]">bb</div>

jQuery错误书写：

$("#id#a");
$("#id[2]");

jQuery正确书写：

$("#id\\#a");
$("#id\\[2\\]");

(2).选择器中含有空格

$(".test :hidden")    //选取class为test的内部隐藏元素
$(".test:hidden")    //选取class为test并且隐藏的元素