欢迎使用CSDN-markdown编辑器

学习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
从逻辑上看，任何事件都可能会有多个元素负责响应。举例来说，如果单击了页面中的链接
元素，那么

、 和 全都应该得到响应这次单击的机会。毕竟，这3个元素同时都
处于用户鼠标指针之下。而

元素则与这次交互操作无关。
允许多个元素响应单击事件的一种策略叫做事件捕获
① 。在事件捕获的过程中，事件首先会
交给最外层的元素，接着再交给更具体的元素。在这个例子中，意味着单击事件首先会传递给

，然后是 ，最后是