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
- 大小: 266.2 KB
- 大小: 142.6 KB
- 大小: 297.5 KB
- 大小: 166.8 KB
- 大小: 43.8 KB
- 大小: 29.9 KB
- 大小: 77.2 KB
- 大小: 41.8 KB
- 大小: 249.2 KB
- 大小: 71.3 KB
分享到:
相关推荐
c# 随记.docx
NULL 博文链接:https://lobin.iteye.com/blog/2365756
java随记
网络原理随记.pdf
linux net 管理随记,留着个人备忘
互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf
学习c++过程中的一些知识点随记,我感觉重要的就稍微记了一下,比较简略,但是快速的阅读的话可以提醒自己想起那一部分的知识点。在复习c++知识点的时候,有些帮助。
Unity 随记1
git随记 git
JSP PDF打印 随记 复杂模板设计
面试随记???随时更新
重点小学生寒假记随记大全.doc
会计事务所毕业实习日记随记.docx
公司法务实习日记随记三篇.pdf
会计专业毕业实习日记随记篇.pdf
重点小学生母亲节日记随记大全.doc
VC++2010游戏开发随记之十三.pdf
小学三年级秋游日记随记五篇.pdf
电气相关的知识,随手写的,不知道行不行11111
数据分级存储及访问方式设计方案研究随记.docx数据分级存储及访问方式设计方案研究随记.docx