深入浅出谈jQuery（一）~~~ 新手入门必读

  在谈jQuery之前，我想先谈谈Javascript库。

 所谓Javascript库其实就是苦逼的程序员“偷懒”的直接证据，由于库里封装了数量丰富，功能齐全的js框架，提供了各式各样的API，让程序猿在编写代码的时候有了“朝发夕至”的感觉，简直是要上天了！

 一、简介

      出现最早的是一款叫做“Prototype”的js库，对js内置对象（例如String,Number,Array）做了大量的扩展，它其实可以看做由好多好使的js方法组成，所以它有最大的一个特         点，那就是可以在使用的时候依据自己的需求把其中的一部分代码单独的掏出来，正因如此，他的编写比较松散，整体结构不是很健壮，下图是Prototype的logo；

               

       而后 又出现了Dojo js库，什麽ExtJS啊，MoolTools JS啊  等等一系列的js库，我们言归正传，下面我们来谈jQuery.

       jQuery是由John Resig 在2006年创建的开源项目。现在的jQuery团队主要包括核心库，UI，插件，还有jQuery Mobile等开发人员以及推广人员，网站设计，维护人员。

       他的主要优势主要有一下几点：

      

二、优势：

1.轻量级

2.强大的选择器。jQuery中的选择器多达几十种

3.出色的浏览器兼容

4.出色的dom操作封装

5.可靠的事件处理机制

6.完整的Ajax

7.不污染顶级变量

8.链式操作方式

9.隐式迭代集合（可以对选择对象的集合自动的迭代不需要用for in循环）如$("div:lt(2)").css("border-color","red")/*对前两个div增加css*/

10.行为层与结构的分离 （如想对dom添加事件，在javascript中添加要声明一次函数，在dom中还要使用一次，jquery只需在jquery部分声明某个元素的某种事件就可以了：

$("#myButton").click(function(){代码部分})）

11.支持扩展

12.完善的学习资源

13.开源

 

三、与原生js的window.onload 入口函数的区别：

      JavaScript 中的以下代码 :
      Window.onload = function (){// 代码 }
      等价于
      Jquery 代码如下：
      $(window).load(function (){// 代码 });

1.执行时机
window.load——必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行

$(document).ready()//$(function(){})——网页中所有 DOM 结构绘制完毕后就执行，可以能 DOM 元素关联的内容并没有加载完

以 浏览器装载文档为例，在页面加载完毕后，浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中，通常使用 window.onload 方法，而在 Jquery 中，使用的是$(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高Web 应用程序的速度。
另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。

2.编写个数
window.load——不能同时编写多个以下代码无法正确执行：
window.onload = function(){ alert(“text1”);};window.onload = function(){ alert(“text2”);};结果只输出第二个

$(document).ready()——能同时编写多个以下代码正确执行：
$(document).ready(function(){ alert(“Hello World”);});$(document).ready(function(){ alert(“Hello again”);});
结果两次都输出

四、关于在同时引用jQuery和其他的js库的注意问题；

    同时引用jQuery和其他的js库可能会产生$符号控制权冲突的问题。为此有以下几个解决方案；

    1. 当jQuery在其他库的引用之后，解决方案如下；

         ①jQuery.noconflict();// 将变量$的控制权交给了另外一个js库；

        ② 当然，如果我们想既不与其他js库冲突，又想自定义一个快捷方式（毕竟每次写jQuery是很累的）；我们就可以这样：

           var j = $jQuery.noconflict();

           $j(function (){/*代码*/});

       ③ 那么问题来了，如果既不想冲突，又不想自定义快捷方式怎么办？？

            第一种解决方案：

                         jQuery.noconflict();

                         jQuery（function（$）{/*代码*/}）；

        第二种解决方案；

                         jQuery.noconflict();

                       （function（$）{

                                       $(function(){/*代码*/})    // 有点闭包的意味

                           }）

     2. 当jQuery在其他库的引用之前，解决方案如下；

               jQuery（function（$）{/*代码*/}）；//  直接使用jQuery，无需调用$jQuery.noconflict();

 

 

 

好了既然解决了这些问题，以后的jQuery就任由你遨游了，建议有时间多看看jQuery源码，对以后的编程有莫大的好处，他会潜移默化的影响编码风格的！