Jquery基础教程之-选择元素
来源:互联网 发布:网络布线从入门到精通 编辑:程序博客网 时间:2024/05/21 22:59
jQuery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松地获取元素或元素集合。
本章将介绍如下内容:
网页中元素的结构;
如何通过CSS选择符在页面中查找元素;
扩展jQuery标准的CSS选择符;
让选择页面元素更灵活的DOM遍历方法
2.1.网页元素DOM结构
<html> <head> <title>the title</title> </head> <body> <div> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>This is yet another paragraph.</p> </div> </body></html>
DOM树结构如下:
2.2使用 $() 函数
我们通过jQuery的各种选择符和方法取得的结果集合会被包装在jQuery对象中。通过 jQuery对象实际地操作这些元素会非常简单。可以轻松地为jQuery对象绑定事件、添加漂亮的效果,也可以将多重修改或效果通过jQuery对象连缀到一起。
三种基本选择符:标签名、ID和类。这些选择符可以单独使用,也可以与其他选择符组合使用:
2.3 CSS选择符
jQuery支持CSS规范1到规范3中的几乎所有选择符
为了学习在jQuery中如何使用CSS选择符,我们选择了一个很多网站中都会有的通常用于导航的结构——嵌套的无序列表
<body> <div id="container"> <h2>Selected Shakespeare Plays</h2> <ul id="selected-plays" class="clear-after"> <li>Comedies <ul> <li><a href="/asyoulikeit/">As You Like It</a></li> <li>All's Well That Ends Well</li> <li>A Midsummer Night's Dream</li> <li>Twelfth Night</li> </ul> </li> <li>Tragedies <ul> <li><a href="hamlet.pdf">Hamlet</a></li> <li>Macbeth</li> <li>Romeo and Juliet</li> </ul> </li> <li>Histories <ul> <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>) <ul> <li>Part I</li> <li>Part II</li> </ul> </li> <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li> <li>Richard II</li> </ul> </li> </ul> <h2>Shakespeare's Plays</h2> <table> <tr> <td>As You Like It</td> <td>Comedy</td> <td></td> </tr> <tr> <td>All's Well that Ends Well</td> <td>Comedy</td> <td>1601</td> </tr> <tr> <td>Hamlet</td> <td>Tragedy</td> <td>1604</td> </tr> <tr> <td>Macbeth</td> <td>Tragedy</td> <td>1606</td> </tr> <tr> <td>Romeo and Juliet</td> <td>Tragedy</td> <td>1595</td> </tr> <tr> <td>Henry IV, Part I</td> <td>History</td> <td>1596</td> </tr> <tr> <td>Henry V</td> <td>History</td> <td>1599</td> </tr> </table> <h2>Shakespeare's Sonnets</h2> <table> <tr> <td>The Fair Youth</td> <td>1–126</td> </tr> <tr> <td>The Dark Lady</td> <td>127–152</td> </tr> <tr> <td>The Rival Poet</td> <td>78–86</td> </tr> </table> </div></body>
我们注意到,其中第一个
- 的ID值为 selected-plays ,但
- 标签则全都没有与之关
联的类。在没有应用任何样式的情况下,这个列表的外观如图2-2所示。
图2-2中的嵌套列表按照我们期望的方式显示——一组带符号的列表项垂直排列,并且每个
列表都按照各自的级别进行了缩进
基于列表项的级别添加样式:
假设我们想让顶级的项(Comedies、Tragedies和Histories),而且只有顶级的项水平排列,那
么可以先在样式表中定义一个 horizontal 类:
.horizontal { float: left; list-style: none; margin: 10px;}
这里,我们没有直接在HTML中添加 horizontal 类,而只是将它动态地添加给位于顶级的
列表项Comedies、Tragedies和Histories,以便示范jQuery中选择符的用法,如代码清单2-1所示
代码清单:2-1
$(document).ready(function() { $('#selected-plays > li').addClass('horizontal');});
第2行代码使用子元素组合符( > )将 horizontal 类只添加到位于顶级的项中。实际上,位于 $() 函数中的选择符的含义是,查找ID为 selected-plays 的元素( #selected-plays )的子元素( > )中所有的列表项( li )
效果图如下:
要为其他项(非顶级的项)添加样式,有很多种方式。因为已经为顶级项添加了 horizontal
类,所以取得全部非顶级项的一种方式,就是使用否定式伪类选择符来识别没有 horizontal 类的所有列表项。注意代码清单2-2添加的第3行代码。
代码清单2-2
$(document).ready(function() { $('#selected-plays > li').addClass('horizontal'); $('#selected-plays li:not(.horizontal)').addClass('sub-level');});
这一次取得的每个列表项(
是ID为 selected-plays 的元素( #selected-plays )的后代元素。
没有 horizontal 类( :not(.horizontal) )。
在为这些列表项添加了 sub-level 类之后,它们的背景颜色变为在样式表规则中定义的浅
灰色。
.sub-level { background: #ccc;}
效果图如下:
- Jquery基础教程之-选择元素
- jQuery基础教程笔记-选择元素
- 《jQuery基础教程》4th 笔记- 选择元素
- JQuery 干货篇之选择元素
- jQuery 笔记(一)之选择元素
- 【练习向】jQuery基础教程第四版课后练习——Book02_jQuery_选择元素
- jQuery元素选择
- jquery 排除选择元素
- jquery选择元素....
- jquery元素选择
- Jquery选择兄弟元素
- JQuery选择元素
- jQuery选择元素
- 1jquery选择元素
- jQuery基础教程之jquery事件
- jquery之选择将被操作的元素(CSS选择器)
- jquery的学习总结之元素选择、查找、过滤
- jquery的学习总结之元素选择、查找、过滤
- 机房重构 报表 “不能传泛型?”
- MySQL从5.5升级到5.6,TIMESTAMP的变化
- apt-get常用命令
- 2015河南ACM省赛 - 小记
- Centos 6.5安装git
- Jquery基础教程之-选择元素
- xts可扩展的时间序列
- CloudSimExample1-仿真步骤
- 动态配置连接数据库
- 循环链表 ——解决约瑟夫环
- linux里的shell环境变量
- IE下判断IE版本的语句...[if lte IE 8]……[endif]
- 内容提供器--2、创建内容提供器
- PHP学习笔记:1.PHP基本语法详解整型