学习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
从逻辑上看,任何事件都可能会有多个元素负责响应。举例来说,如果单击了页面中的链接
元素,那么
处于用户鼠标指针之下。而
元素则与这次交互操作无关。
允许多个元素响应单击事件的一种策略叫做事件捕获
① 。在事件捕获的过程中,事件首先会
交给最外层的元素,接着再交给更具体的元素。在这个例子中,意味着单击事件首先会传递给