【读书笔记】《锋利jQuery》第一章

第一章 认识JQuery

1.1 JavaScript和JavaScript库

1.1.1 JavaScript简介

1.1.2 JavaScript库作用及对比

• Prototype
• Dojo
• YUI
• ExtJS
• MooTools
• JQuery

1.2 加入JQuery

1.2.1 JQuery简介

1.2.2 JQuery的优势

• 轻量级
• 强大的选择器
• 出色的DOM操作的封装
• 可靠的事件处理机制
• 完善的Ajax
• 不污染顶级变量
• 出色的浏览器兼容性
• 链式操作方式
• 隐式迭代
• 行为层与结构层的分离
• 丰富的插件支持
• 完善的文档
• 开源

1.3 jQuery代码的编写

1.3.1 配置JQuery环境

• 1.获取jQuery最新版本
• 2.jQuery库类型说明（完全五压缩和min）
• 3.环境配置
• 4.在页面中引入jQuery:

    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></javascript>

1.3.2 编写简单的jQuery代码·

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></javascript>
    <script type="text/javascript">
        $(document).ready(function(){
            alert("hello world");
        }
    </script>

window.onload与$(document).ready()的对比
执行时机：全部内容加载完 和 DOM结构绘制完毕
编写个数：不能同时编写多个 和 可以同时编写多个

1.3.3 jQuery代码风格

• 1.链式操作风格

    $(this).addClass("highlight").children("a").show().end().siblings().removeClass("hightlight").children("a").hide()));

  或者可以改写成

    $(".has_children").click(function(){
        $(this.addClass("highlight")
            .children("a").show().end()
        .siblings().removeClass("hightlight")
            .children("a").hide();
    ));

  • (1)对于同一个对象不超过三个操作的，可以直接写成一行
  • (2)对于同一个对象的较多操作，建议每行写一个操作、
  • (3)对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。
• 1. 为代码添加注释

1.4 jQuery对象和DOM对象

1.4.1 DOM对象和jQuery对象简介

• 1.DOM对象
• 2.jQuery对象
  jQuery对象就是通过jQuery包装DOM对象后产生的对象

  1.4.2 jQuery对象和DOM对象的相互转换

• 1.jQuery对象转换成DOM对象 jQuery对象提供了两种方法讲一个jQuery对象转换成DOM对象，即[index]和get(index)
  • （1） jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象

      var $cr = $("#cr"); //jQuery对象
      var cr = $cr[0];    //DOM对象

  • （2） 另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。

      var $cr = $("#cr"); //jQuery对象
      var cr = $cr.get(0);    //DOM对象

• 2.DOM对象转成jQuery对象
  对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)。

    var cr = document.getElementById("cr");
    var $cr = $(cr);

最后再次强调，DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但jQuery对象提供了一套更加完善的工具用于操作DOM

1.5 解决jQuery和其他库的冲突

在jQuery库中，几乎所有的插件都被限制在它的命名空间里。通常，全局（global）对象都被很好地存储在jQuery命名空间里 ，因此当把jQuery和其他JavaScript库（例如Prototype、MooTools或YUI）一起使用时不会引起冲突。
默认情况下，jQuery用$作为自身的快捷方式
* 1.jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕之后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库 示例如下：

<script language="javascript>
        jQuery.noConflict();//将变量$的控制权交给Prototype.js
        jQuery(function(){//使用jQuery
            jQuery("p").click(function(){
                alert(jQuery(this).text());
            })
        })

    $("pp").style.display='none';//使用Prototype
<script>

然后就可以在程序里将jQuery()函数作为jQuery对象的制造工厂。 此外还有另一种选择。如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以进行如下操作：

var $j = jQuery.noConflict();//自定义一个快捷方式
$j(function(){//使用jQuery，利用自定义快捷方式--$j
    $j("p").click(function(){
        alert($j(this).text());
    })
})
$("pp").style.display = 'none'; //使用Prototype

如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时又不想与其他库相冲突，那么可以使用 以下两种解决方法
其一：

jQuery.noConflict();    //将变量$的控制权让渡给Prototype.js  
jQuery(function($){     //使用jQuery设定页面加载时执行的函数  
    $("p").click(functioin(){   //在函数内部继续使用$()方法
        alert($(this).text());
    })
})

 $("pp").style.display = 'none'; //使用Prototype

其二：

jQuery.noConflict();    //将变量$的控制权让渡给Prototype.js  
（function($){          //定义匿名函数并设置形参为$  
    $("p").click(function(){    //匿名函数的$均为jQuery
         alert($(this).text()); //继续使用$()方法  
    })
})(jQuery);                 //执行匿名函数并且传递实参jQuery  

 $("pp").style.display = 'none'; //使用Prototype

• 2.jQuery库在其他库之前导入
  如果jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。同时，可以使用$()方法 作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。示例如下：

   

1.6 jQuery开发工具和插件

1. Dreamweaver
2. Aptana
3. jQueryWTP和Spket插件
   这两款插件都可以使Eclipse支持jQuery自动提示代码功能。
4. Visual Studio
5. 任意编辑器