欢迎使用CSDN-markdown编辑器
来源:互联网 发布:java从入门到精通第4版 编辑:程序博客网 时间:2024/05/21 22:49
学习jquery笔记1
做做笔记才记得牢
css选择器
$(document).ready(function(){ $('#selected-plays>li').addClass('horizontal');});
上述代码中:
(document).ready();会在DOM加载成功之后立即执行的代码。(‘#selected-plays>li’)#selected-plays表示选中id为selected-plays的元素,‘>’表示选中该元素下的顶级子元素,值得注意的是L:有没有‘>’差别非常大,有的话只选择了selected-plays下的顶级子元素,没有就有选择所有子元素。‘li’表示选中子元素中的li元素,addClass()是添加类的函数。上述代码功能是:文档加载完DOM后立即为id为selected-plays下的li元素添加一个类属性“horizontal”
$(document).ready(function(){ $('#selected-plays>li').addClass('horizontal'); $('#selected-plays li:not(.horizontal)').addClass('sub-level');});
上述代码增加了第二行:其中selected-plays li:not(.horizontal)表示选择selected-plays元素下所有li元素中没有horizontal属性的li。
属性选择符
选择带有alt属性的所有图像元素,可以使用以下代码:
$('img[alt]')
为所有电子邮件链接添加类
$(ducument).ready(function(){ $('a[href^="mailto:"]').addClass('mailto');})
上述代码中,a[]表示选中a标签。href^=“mailto:”表示选择href属性中以mailto开头的元素。
$(document).ready(function() {$('tr:even').addClass('alt');});
上述代码中,选择元素tr的奇数行设置alt属性
等一等!为什么针对奇数行使用 :even 选择符呢?很简单, :eq() 选择符、 :odd 和 :even 选
择符都使用JavaScript内置从0开始的编号方式,因此,第一行的编号为0(偶数) ,第二行的编号
为1(奇数) ,依此类推。知道这一点之后,我们希望上面那几行代码能够生成如图2-9所示的
结果。
$(document).ready(function() {$('td:contains(Henry)').nextAll().addClass('highlight');});
上述代码选择表格中包含有“Henry”字符的表格的下面的所有元素
简单的样式转换器
$(document).ready(function(){ $('#switcher-change").on('click',function(){ $('body').removeClass('narrow'); $('body').addClass('large'); }); });
上述代码功能:文档加载完成后执行(就是监听的意思),id为swicther-change的点击事件为,body标签上移除narrow标签并加一个large的标签
事件的旅程
当页面上发生一个事件时,每个层次上的DOM元素都有机会处理这个事件。以下面的页面
模型为例:
<div class="foo"><span class="bar"><a href="http://www.example.com/">The quick brown fox jumps over the lazy dog.</a></span><p>How razorback-jumping frogs can level six piqued gymnasts!</p></div>
当在浏览器中形象化地呈现这些由嵌套的代码构成的元素时,我们看到的效果如图3-7所示。
图 3-7
从逻辑上看,任何事件都可能会有多个元素负责响应。举例来说,如果单击了页面中的链接
元素,那么
处于用户鼠标指针之下。而
元素则与这次交互操作无关。
允许多个元素响应单击事件的一种策略叫做事件捕获
① 。在事件捕获的过程中,事件首先会
交给最外层的元素,接着再交给更具体的元素。在这个例子中,意味着单击事件首先会传递给
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- Linux手册
- Xcode 7.1.1 下载失败的兄弟看过来
- Mastering Opencv ch3: markerless AR(三)
- (转)windows进程间通信(IPC)的方式
- 最近被node的post和get烦了一小下
- 欢迎使用CSDN-markdown编辑器
- 数据结构实验二--单链表的基本实现
- C-043.结构体的储存细节,以及#pragma pack(n)对齐方式
- Oracle 的INSTR函数MySQL实现
- javascript权威指南学习笔记-数组1(八)
- wamp上配置域名
- 算法复杂度分析——数学角度
- 高级多态(三):复杂的抽象层次结构
- (六十五)for循环