jQuery入门简单介绍

1、什么是jQuery？

jQuery是继Prototype之后又一款非常优秀的JavaScript框架，由John Resig创建于2006年1月。jQuery体积小，运行速度快，它独有的极为强大的选择器，使得页面元素的查找变得非常简单，其出色的DOM操作、可靠的事件处理、完善的浏览器兼容性和链式操作等优点，吸引了一批批JavaScript开发者去学习它、研究它，然后疯狂的爱上它！

2、为什么要学习jQuery？

总结6个字：做得多，写的少。

①、强大的选择器：

jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于jQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易的切入到jQuery的学习中来。

②、出色的DOM封装

jQuery封装了大量常用的DOM操作，使开发者在编写DOM相关程序的时候能够得心应手。使用jQuery能轻松的完成各种原本非常复杂的操作，让JavaScript新手也能写出很出色的程序。

③、可靠的事件处理机制

jQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面，jQuery也做得非常不错。

④、完善的Ajax

jQuery将所有的Ajax操作封装到一个函数中，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容和XMLHttpRequest对象的创建和使用的问题

⑤、jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。该特性使jQuery可以与其他JavaScript框架共存，在项目中放心地引用而不需要考虑到后期可能存在的冲突。

⑥、出色的浏览器兼容

⑦、链式操作

所谓隐式迭代，即当用jQuery找到多个元素后，无需循环遍历就可以对所有的元素进行操作。同样，jQuery中的几乎所有方法都被设计成自动操作对象的集合，而不是在循环中对每个单独的对象进行操作，这使得大量的循环结构变得不再必要，从而大幅地减少了代码量。

$(“div”).xxx(“color”,”red”);

⑧、丰富的插件支持

jQuery具有非常好的可扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有超过几百种的官方插件支持，而且还会不断有新插件面世。这将使得jQuery变得无比强大！

⑨、开源、免费

jQuery是一个开源的产品，而且完全免费，任何人都可以自由地使用并提出改进建议等。

3、jQuery官方网站：http://jquery.com/

4、【软件包问题】

下载的软件包有两种：发布版（压缩版，迷你版）和开发版（未压缩版、完整版）

5、第一个jQuery程序

①、传统方式

②、jQuery的加载
 

a、在项目中加入jQuery的js文件

b、将文件引入到页面

c、编写jQuery代码

6、window.onload和jQuery的ready区别

6.1、执行时机不同

window.onload 会在DOM（Document Object Model：文档对象模型）载入就绪（整个文档的架子已加载完成，可以获取到所有的DOM节点），并且DOM中的所有内容全部加载完毕后才执行，举个典型的例子：当页面中有大量的图片时，浏览器会先载入 DOM，而当DOM载入完成时，DOM中的图片内容还没有完全加载到页面中，此时，window.onload并不会执行。而实际上此时已经可以执行你想要执行的脚本了，很显然，window.onload的执行时机在大多数情况下不是我们想要的。

而jQuery 提供的jQuery(document).ready(回调函数);会在页面 DOM 加载就绪后，回调函数便会立即执行！因此，jQuery的ready会先于window.onload执行。

6.2、编写个数不同

window.onload采用js中的赋值操作，为其指定了一个函数：window.οnlοad=function(){...};

当再次为window.onload赋值一个新的函数时，之前的函数会被新的函数覆盖，因此window.onload的方式只能编写一个加载事件

而jQuery采用其特有的ready方法，可以同时编写多个加载事件，不会产生覆盖的问题，而且会按照编写的顺序依次执行

代码举例如下：

运行结果：

alert("Hello World！---------jquery方式");

alert("Hello World！---------jquery方式2");

alert("Hello World！---------传统js方式2");

结论：先按顺序执行jQuery的每一个ready事件，最后执行最后一次绑定的window.onload事件

 

7、jQuery的别名$

为了简化代码，jQuery定义了一个全局的变量$作为别名来代替jQuery，即$=jQuery，$是jQuery的别名

例如，jQuery(document).ready(回调函数);  可以简写为 $(document).ready(回调函数);

​​​​​​​8、jQuery的核心函数

$(callback)                    //页面onload函数，相当于jQuery(document).ready(callback) $(html片段,[ownerDocument])      //将html片段转换为jQuery对象$(“<div>1</div>”) $( selector ,[context])         //根据选择器查找页面元素，默认查找整个文档 $.holdReady(hold)           //暂停或恢复.ready() 事件的执行。（了解）

​​​​​​​9、$(callback)：页面加载完成事件

用法：

简化过程：

jQuery(document).ready(callback) ——>  $(document).ready(callback)  ——>  $(callback)

通常写成：为了防止其他框架也使用$

jQuery(function($) {

// 继续使用$作为别名使用jQuery，编写onload代码

});

 

​​​​​​​10、$(html片段)：将html转换为jQuery对象

用法：

 

 

​​​​​​​11、$(selector)：根据选择器查找页面元素

用法：

 

 

12、jQuery对象和DOM对象jQuery对象和DOM对象的区别

什么是jQuery对象？

jQuery对象是jQuery框架独有的，通过jQuery的核心函数$(selector)获取。

什么是DOM对象？

DOM的全称是“Document Object Model”，即文档对象模型，而DOM对象指的是

某个或某些具体的节点对象，通过document.getElementXXX()获取。

两者之间的区别？

jQuery对象只能使用jQuery对象的属性和方法，不能直接使用DOM对象的属性和方法；

同样，DOM对象只能使用DOM对象的属性和方法，不能直接使用jQuery对象的属性和方法。两种对象的属性和方法不通用！

jQuery对象在使用其属性和方法的时候，实际上底层使用的依然是DOM对象中的属性和方法。

 

那么，在页面中如何区分jQuery对象和DOM对象呢？在开发中有个约定：在jQuery对象的前面加$，例如：

var $mydiv = $(“#mydiv”); // $mydiv是jQuery对象

var mydiv = document.getElementById(“mydiv”); // mydiv是DOM对象

​​​​​​​13、jQuery对象和DOM对象的相互转换

【最后特别强调】

jQuery对象和dom对象的属性和方法的调用不通用！

如果要使用jQuery对象的属性和方法，就必须使用jQuery对象来调用。

一切从选择器开始★★★★★（参考官方文档，就不一一进行举例介绍）

我们学习jQuery，主要是学习jQuery中的方法，来简化js开发。因此，学习jQuery主要是学习jQuery对象的各种方法，

但前提是要先获取jQuery对象，即操作必先选中（获取），一切从选择器开始！可以参考官方文档，查询对应的方法