[随记]锋利的jQuery 第二章 jQuery选择器

yeshaoting

浏览: 684101 次
性别:
来自: 北京

最近访客更多访客>>

lengrenhanbing

goldtoad

天涯a海角

yinbangmin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery/javascript

2.1 jQuery选择器是什么
常用的CSS选择器

把CSS应用到网页中有3种方式，即行间样式表、内部样式表和外部样式表。内部样式表的缺点是不能被多个页面重复使用的。

2.2 jQuery选择器的优势
$()函数在很多JavaScript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。其中，$("#ID")用来代替document.getElementById()函数，即通过ID获取元素；$("tagName")用来代替document.getElementsByTagName()函数，即通过标签名获取HTML元素。

为了能有更快的选择器解析速度，从1.1.3.1版以后，jQuery废弃了不常使用的XPath选择器，但在引用相关插件后，依然可以支持XPath选择器。(XPath知识略过)

即使用jQuery获取网页中不存在的元素也不会报错。(避免浏览器报错)
$("#tt")获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时，不能使用以下代码：
if($("tt"))
{
//do something
}

而应该根据获取到元素的长度来判断，代码如下：
if($("tt").length > 0)
{
//do something
}

或者转化成DOM对象来判断，代码如下：
if($("tt")[0])
{
//do something
}

2.3 jQuery选择器

JavaScript中选择器：
1. document.getElementById() 通过标签id获取元素
2. document.getElementsByTagName() 通过标签名获取元素
3. document.getElementsName() 通过标签的name字段获取元素

HTML页面示例：

<div class="one" id="one">
 id为one,class为one的div
 <div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
 id为two,class为one,title为test的div
 <div class="mini" title="other">class为mini,title为other</div>
 <div class="mini" title="test">class为mini,title为test</div>
</div>

<div class="one">
 <div class="mini">class为mini</div>
 <div class="mini">class为mini</div>
 <div class="mini">class为mini</div>
 <div class="mini"></div>
</div>

<div class="one">
 <div class="mini">class为mini</div>
 <div class="mini">class为mini</div>
 <div class="mini">class为mini</div>
 <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>
 包含input的type为"hidden"的div
 <input type="hidden" size="8" />
</div>

<span id="mover">正在执行动画的span元素.</span>

div,span,p
{
 width:140px;
 height:140px;
 margin:5px;
 background:#aaa;
 border:#000 1px solid;
 float:left;
 font-size:17px;
 font-family:Verdana;
}

div.mini
{
 width:55px;
 height:55px;
 background-color:#aaa;
 font-size:12px;
}

div.hide
{
 display:none;
}

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

2.3.1 基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。

2.3.2 层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。

2.3.3 过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1. 基本过滤选择器

2. 内容过滤选择器
过滤规则主要体现在它所包含的子元素或文本内容上。

3. 可见性过滤选择器
根据元素的可见或不可见状态来选择相应的元素。
在可见性过滤选择器中，需要注意选择器:hidden，这不仅包括样式属性display为“none”的元素，也包括文本隐藏域(<input type="hidden" />)和visibility:hidden之类的元素。

show()是jQuery的方法，它的功能是显示元素，3000是时间，单位是毫秒。

4. 属性过滤选择器
过滤规则是通过元素的属性来获取相应的元素。

5. 子元素过滤选择器
过滤规则相对于其它的选择器稍微有些复杂。

:nth-child()选择器是很常用的子元素过滤选择器，详细功能如下。
(1):nth-child(even)能选取每个父元素下的索引值是偶数的元素。
(2):nth-child(odd)能选取每个父元素下的索引值是奇数的元素。
(3):nth-child(2)能选取每个父元素下的索引值等于2的元素。
(4):nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素，(n从0开始)。
(5):nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素，(n从0开始)。

6. 表单对象属性过滤选择器
主要是对所选择的表单元素进行过滤。

2.3.4 表单选择器
为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器。

2.5 选择器中的一些注意事项
1. 选择器中含有“.”、“#”、“(”或“]”等特殊字符
根据W3C的规定，属性值中是不能含有这些特殊字符的。这种特殊字符通过\\来转义。
例如：
<div id="id[1]">cc</div>
$("#id\\[1\\]");

2. 选择器中含有空格
多一个空格或少一个空格也许会得到截然不同的结果。

2.6 案例研究-某网站品牌列表的效果
几个jQuery方法如下：
1. show()：显示隐藏的匹配元素。
2. css(name, value)：给元素设置样式。
3. text(string)：设置所有匹配元素的文本内容。
4. filter(expr)：筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。
5. addClass(class)：为匹配的元素添加指定的类名。
6. toggle(fn,fn,...)：用来交替一组动作。

必须要考虑到禁用或者不支持JavaScript浏览器(用户代理)。另外，这点对于搜索引擎优化也特别有帮助，毕竟当前的搜索引擎爬虫基本都不支持JavaScript。

附: jQuery选择器总结 http://abe.iteye.com/blog/1075479