你的位置:首页 > Java教程

[Java教程]【锋利的jQuery】学习笔记01


第一章 认识jQuery

一、常见的JS库

  1. Prototype 最早的js库之一。把好用JS方法组合,缺点结构松散。
  2. Dojo 离线存储API、生成图标组件、矢量图形库、Comet支持。企业级JS库,缺点文档不全、API不稳定。
  3. YUI 雅虎开发的富交互网页程序工具集。
  4. Exit JS侧重界面
  5. MooTools 模块化思想的轻量级JS框架
  6. jQuery 轻量级、强大选择器等。

二、jQuery优势

  1. 轻量级 30K左右
  2. 强大选择器
  3. 出色DOM封装
  4. 可靠的事件处理机制
  5. Ajax完善
  6. 不污染顶级变量
  7. 浏览器兼容
  8. 链式调用
  9. 隐式迭代
  10. 行为结构分离
  11. 插件丰富
  12. 文档完善
  13. 开源

三、编写注意事项

链式调用是应该注意:

  • 同一对象不超过3个操作,直接写为一行
  • 同一对象较多操作,每行写一个操作
  • 多个对象的少量操作,每对象写一行(子元素缩进)

四、jQuery对象和DOM对象

DOM对象是直接从DOM树获取的对象,可以使用JS方法,不可以使用jQuery方法。jQuery对象是指jQuery包装后的DOM对象,可以使用jQuery方法,不可以使用JS方法(通过jQuery对象获取的变量在前面加$以作区分)。

两者相互转换:

  • jQuery对象转换为DOM对象:
  1. [index]        var dom=$("div")[0];
  2. get(index)   var dom=$("div").get(0);
  • DOM对象转换为jQuery对象: 直接使用$()打包DOM对象即可。

五、jQuery与其他JS库冲突解决($的让渡问题)

对于jQuery,全局变量被存储在自己的命名空间中一般与其他库没有冲突

  • jQuery库在其他库后引入
  1.        jQuery.noConflict();  //将变量$控制权让给其他库

                 jQuery(function(){   //使用jQery

                            书写jQuery程序;

                 })

      2.        var $j=jQuery.noConflict();  //自定义一个快捷方式

                 $j(function(){                    //使用jQery,利用自定义的快捷方式——$j

                      书写jQuery程序;

                 })

如果不想自定义还想使用$(),不管其他库$()方法,又不想与其他库冲突。使用:

  1.        jQuery.noConflict();  //将变量$控制权让给其他库

                     jQuery(function($){   //使用jQery设定页面加载时执行的函,在函数内部继续使用$()

                                书写jQuery程序;

                     })

  2.         jQuery.noConflict();  //将变量$控制权让给其他库

                  (function($){         //定义匿名函数并设置形参为$,匿名函数内部的$均为jQery,在函数内部继续使用$()

                       $(function(){

                            书写jQuery程序;

                        })

                   })(jQuery) ;

  • jQuery库在其他库前引入

        无需调用jQuery.noConflict(),直接使用jQuery做jQuery的是,其他函数库使用$()。