《锋利的JQuery》读书笔记——第二章 JQuery选择器

原创文章，转载请标明出处

第二章  JQuery选择器

1 JQuery选择器概述

         JQuery选择器继承了css选择器的风格，JQuery的所有行为规则都建立在获取元素的基础上。

       例1：给class为demo的元素添加行为

       $(“.demo”){ }

2 JQuery选择器的优势

2.1写法简洁

         $(“#ID”)可以用来代替document.getElementById()函数；$(“tagName”)用来代替document.getElementsByTagName()

2.2支持从CSS1到CSS3

2.3完善的处理机制

       使用JQuery获取对象时不需要判断获取的对象是否存在，如果获取的对象不存在，JQuery也不会报错失效。

       要特别注意的是，$(“#tt”)永远是正确的，因此不能使用if($(“#tt”))语句来判断$(“#tt”)对象是否存在，如果需要判断对象是否存在，则可以通过以下方法：

       if($(“#tt”).length > 0 )

       或

       if($(“#tt”)[0])

3 JQuery选择器

3.1基本选择器

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	$(“#test”)选取id为test元素
.class	根据给定的类名匹配元素	集合元素	$(“.test”)选取class为test元素
Element	根据给定的元素名匹配元素	集合元素	$(“p”)选取所有<p>元素
*	匹配所有元素	集合元素	$(“*”)选取所有元素
Selector1, selector2……	将每一个选择器匹配到元素合并后一起返回	集合元素	$(“div,span,p.myClass”)选取所有<div>，<span>和拥有class为myClass的<p>标签的一组元素

3.2层次选择器

选择器	描述	返回	示例
$(“a b”)	选取a元素里的所有b元素，即a的后代中所有b元素	集合元素	$(“div span”)选取<div>里的所有<span>元素
$(“parent > child”)	选取parent元素下的child元素，即只有子元素	集合元素
$(“prev + next”)	选取紧接在prev元素后的next元素	集合元素
$(“prev ~ siblings”)	选取prev元素之后的所有siblings元素	集合元素

注：这里$(“a b”)和$(“parent >child”)效果是不一样的，前者获取的是所有后代，而后者获取的只是子元素。例如

<div id=”one”>

       <div id=”two_1”>

              <div id=”three”></div>

</div>

       <div id=”two_2”></div>

</div>

这里one的后代包括two_1、two_2和three，而one的子元素只包括two_1和two_2。

另外，$(“prev + next”)可以用next()方法代替：$(“.one + div”)等价于$(“.one”).next(“div”)。

$(“prev ~ siblings”)可以用nextAll()方法代替：$(“#prev ~ siblings”)等价于$(“#prev”).nextAll(“div”);

3.3过滤选择器

选择器	描述	返回	示例
:first	选取第1个元素	单个元素	$(“div:first”)
:last	选取最后1个元素	单个元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素
:even	选取索引为偶数的元素	集合元素
:odd	选取索引为奇数的元素	集合元素
:eq(index)	选取索引等于index的元素	单个元素
:gt(index)	索引大于index的元素	集合元素
:lt(index)	选取索引小于index的元素	集合元素
:header	选取所有标题元素h1、h2、h3等	集合元素
:animated	选取当前正在执行动画的所有元素	集合元素

注：以上的选择器index都是从0开始算的

3.4内容过滤选择器

选择器	描述	返回	示例
:contains(text)	选取含有文本内容为”text”的元素	集合元素
:empty	选取不包含子元素或者文本的空元素	集合元素
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素	$(“div:has(p)”)选取含有p的div元素
:parent	选取含有子元素或者文本的元素	集合元素	$(“div:parent”)选取有子元素的div

3.5可见性过滤选择器

选择器	描述	返回	示例
:hidden	选取所有不可见元素	集合元素
:visible	选取所有可见元素	集合元素

3.6属性过滤选择器

选择器	描述	返回	示例
[attr]	选择拥有此属性的元素	集合元素	$(“div[id]”)选取有id属性的div
[attr=value]	选取属性的值为value的元素	集合元素
[attr！=value]	选取属性的值不等于value的元素	集合元素
[attr^=value]	选取属性的值以value开始的元素	集合元素
[attr$=value]	选取属性的值以value结束的元素	集合元素
[attr*=value]	选取属性的值含有value的元素	集合元素
[s1][s2]……	用属性选择器合并成一个符合属性选择器，同时满足多个条件	集合元素

3.7子元素过滤选择器

选择器	描述	返回	示例
:nth-child	见表格下方备注	集合元素
:first-child	选取每个父亲元素的第1个子元素	集合元素
:last-child	选取每个父亲元素的最后1个子元素	集合元素
:only-child	如果某个元素是它父元素中的唯一子元素，那么将会被匹配；如果不是唯一子元素则不匹配	集合元素

这边特别要说一下nth-child这个选择器，nth-child的作用就是取得索引满足括号里表达式的子元素，表达式可以为index/even/odd/equation：

1)  index就是具体数值，取第index个子元素

2)  even就是取其中索引值为奇数的子元素

3)  odd取其中索引值为偶数的子元素

4)  equation即一表达式，例如4n+1，其中n从0算起

nth-child和eq有两个比较重大的区别：

1)  eq的索引从0算起，nth-child则从1算起的

2)  :nth-child前面是一个集合，则会从集合中所有节点的子节点中取得满足要求的子节点，而eq只对一个节点有效。

有不明白的可以做一下实验，把JQuery官网的例子复制下来动手改改看看效果。

3.8表单对象属性过滤选择器

选择器	描述	返回	示例
:enabled	选取所有可用远	集合元素
:disabled	选取所有不可用元素	集合元素
:checked	选取所有被选中的元素（单选框，复选框）	集合元素
:selected	选取所有被选中的选择元素（下拉列表）	集合元素

 

3.9表单选择器

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

 

4 选择器的一些主要事项

1）如果选择器含有特殊字符，则需要使用”\\”转义字符

2）注意选择器中的空格，例如：

a)       $(‘.test:hidden’); 是后代选择器，获取的是class为”test”的元素里面的隐藏元素

b)       $(‘.test:hidden’);是过滤选择器，获取的是隐藏的class为”test”的元素