《jQuery基础教程》读书笔记

时间：2023-01-03 09:48:08

最近在看《jQuery基础教程》这本书，做了点读书笔记以备回顾，不定期更新。

第一章第二章比较基础，就此略过了。。。

第三章 事件

  • jQuery中$(document).ready()与javascript原生的window.onload()区别：
$(document).ready()：通过该方法注册的事件处理程序，会在DOM完全就绪并使用时调用。虽然这意味着所有元素对脚本而言都是可访问的，但是，却不意味着所有关联的文件都下载完毕。当HTML下载 完成并解析成DOM树之后，代码就可以开始运行了。并且在脚本中可以多次使用该方法，不用担心之前标记的方法被覆盖掉，而原生的window.onload()存在被覆盖的问题。
// window.onload()：当文档完全下载到浏览器中时，就会触发该事件。 

          $(document).read(function(){   //较长的形式能更清楚的表现代码在做什么

               //方法实现

          });

          //上述调用在jQuery中可以简写为:

          $(function(){

              //方法实现

          });

如果在项目中有其他的javascript库用到$关键字，可以在jQuery中调用jQuery.noConflict()方法来出让$的使用权，在代码中用jQuery取代$符号

多个元素响应单击事件的策略事件捕获：

1）在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。

2）事件冒泡：当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到更一般的元素。

最终出台的DOM标准规定应该同时使用这两种策略：首先，事件要从一般元素到具体元素逐层捕获，然后，事件再通过冒泡返回DOM树的顶层。而事件处理程序可以注册到这个过程中的任何一个阶段。为了提供跨浏览器的一致性，jQuery始终会在模型的冒泡阶段注册事件处理程序。因此，我们总是可以假定最具体的元素会首先获得响应事件的机会。

为了了解决事件冒泡带来的不利影响，我们在函数中必须要访问事件对象。事件对象是一种DOM结构，它会在元素获得处理事件的机会时传递交给被调用的事件处理程序，该对象中包含着与事件有     关的信息，也提供了来影响事件在DOM中传递进程的一些方法。

看以下代码：

$(document).ready(function() {

  var toggleSwitcher = function(event) {

    if (!$(event.target).is('button')) {

      $('#switcher button').toggleClass('hidden');

    }

  };

通过判断event.taget属性值来避免了因为事件冒泡带来的不利影响。当然，在具体元素绑定方法的末尾加上event.stopPropagation()方法同样可以阻止事件冒泡。通过使用.toggle()交替地扩展和折叠页面元素通过使用.hover()图书显示位于鼠标指针下方的页面元素通过.trigger()引发执行绑定的事件处理程序。

第四章 样式与动画

  • jQuery与CSS
jQuery提供了css()方法，这个方法集getter与setter于一体。该方法能够接受的参数有两种，一种是为它传递一个单独的样式属性和值，另一种是为它传递一个由属性-值对构成的映射，即javascript对象字面量。
  • 创建自定义动画
 jQuery提供了一个强大的.animate()方法，用于创建控制更加精细的自定义动画。.animate()方法有两种形式，第一种形式接受以下4个参数。 1）一个包含样式属性以及值的映射--与之前说过的.css()方法中的映射类似。 2）可选的速度参数--既可以是预置的字符串，也可以是毫秒数值。 3）可选的缓动（easing）类型。 4）可选的回调函数
.animate({

     param1: value1,

     param2: value2},

     speed, function() {

     /* stuff to do after animation is complete */

});
第二种形式接受两个参数，一个属性映射和一个选项映射：

.animate({properties}, {options}); 这其中的第二个参数是把第一种形式的后三种封装在另一个映射之中。

第五章 DOM树操作

  • DOM元素属性与HTML属性：在大多数情况下，二者的作用是一样的。但也存在些许差异。
譬如在DOM中有个属性为className，而对应的类属性在HTML中为class；DOM中的checked属性是一个布尔值，而在HTML中checked属性值是一个字符串。
  • $()函数的作用：
1）利用css选择器选择元素

2）传入参数为HTML字符串，可创建一个DOM元素。
  • 移动DOM元素的方法（以及相对的反向方法。例如 appendTo()--append()）
1）.insertBefore()在现有元素外部、之间添加内容

2）.prependTo()在现有元素内部、之前添加内容 

3）.appendTo()在现有元素内部、之后添加内容 

4）.insertAfter( 在现有元素外部、之后添加内容
  • 元素复制：
可以使用Jquery的.clone()方法来创建任何匹配的元素集合的副本。单纯的.clone()方法不会复制匹配的元素及其后代元素中绑定的事件。如果要连同事件一起复制，应调用.clone(true)方法。
  • .text()方法可以取得匹配元素的内容或者用新字符串替换匹配元素内容。
.text()方法始终会取得或设置纯文本内容，所有的HTML标签都将被忽略，而所有的HTML实体也会被转换成对应的字符。
  • 总结：
1）要在HTML中创建新元素，使用$()函数

2）要在每个匹配的元素中插入新元素，使用：.append() .appendTo() .prepend() .prependTo()

3）要在每个匹配的元素相邻的位置上插入新元素，使用：.after() .insertAfter() .before() .insertBefore()

4）要在每个匹配的元素外部插入新元素，使用：.wrap() .warpAll() .warpInner()

5）要用新元素或文本替换每个匹配的元素使用：.html() .text() .replaceAll() .replaceWith()

6）要移除每个匹配的元素中的元素，使用 .empty()

7）要从文档中移除每个匹配的元素及其后代元素，但不实际删除它们，使用： .remove()  .detach()

第六章 通过AJAX发送数据

  • AJAX解决方案中涉及到的技术（无需刷新页面就能从服务器/客户端上加载数据的手段）
1）Javascript，通过用户或其他与浏览器相关事件捕获交互作用。

2）XMLHttpRequest对象，通过这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求。

3）服务器上的文件，以XML、HTML或JSON格式保存文本数据。

4）其他javascript，解释来自服务器的数据并将其呈现到页面上。
  • $.each()函数不操作jQuery对象，它以数组或映射作为第一个参数，以回调函数作为第二个参数。此外，还需要将每次循环中数组或映射的当前索引和当前项作为回调函数的两个参数。
  • .serialize()方法将匹配的DOM元素转换成能够随AJAX请求传递的查询字符串。
  • 安全限制：尽管构建动态的Web应用程序非常实用，但XMLHTTPRequest常常会受到严格限制。为了了防止各种跨站点脚本攻击，一般情况下从提供原始页面的服务器之外的站点请求文档是不可能的。但是，有时候必须要从第三方来源中加载数据。有如下解决办法：
1）通过服务器加载远程数据，然后再客户端请求时提供给浏览器，因为服务器能够对数据进行预处理。 

2）根据请求注入<script>标签来加载外部Javascript文件。
$(document.createElement('script')).attr('src', 'http://example.com/example.js').appendTo('head');
3）使用<iframe>这个HTML标签来加载远程数据，为该元素指定任何URL作为其获取数据的来源，包括与提供页面的服务器不匹配的URL；位于iframe中的脚本需要明确地向父文档中的对象提供数据。

第七章 使用插件

  • 使用jQuery的插件很简单。只要找到查件的URL，在HTML中引用它，然后再脚本中使用即可。
  • jQuery官方的插件库 http://plugins.jquery.ocm/  需要什么插件上去搜索，并看文档和教程。

相关文章