Jquery学习（一）

17-01-11 来源：[db:作者]

收藏我要投稿

目标：

•了解什么是jQuery

•使用jQuery的好处

•jQuery环境的配置

•编写简单的jQuery代码

jQuery 是一个JavaScript库，是一个由JohnResig创建于2006年1月的开源项目。jQuery 凭借着简洁的语法和跨平台的兼容性，极大简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。

jQuery有以下优势:

(1)轻量级。jQuery非常轻巧，经过最好的压缩工具UglifyJS压缩之后,大小保持在30KB左右。

(2)强大的选择器。jQuery支持CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。

(3)出色的DOM操作的封装。jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序时能够得心应手。

(4)可靠地事件处理机制。jQuery的事件处理机制吸收了JavaScript事件处理函数的精华，使jQuery在处理事件绑定的时候相当可靠。

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

(6)不污染顶级变量。jQuery只建立一个名为jQuery 的对象，所有的函数方法都在这个对象之下。

(7)出色的浏览器兼容性。jQuery几乎支持所有的主流浏览器，同时jQuery 还修复了一些浏览器之间的差异。

(8)链式操作方式。jQuery最具有特色的莫过于他的链式操作方式——即同时发生在同一个jQuery 对象的一组动作，可以直接连写而无需重复获取对象。

(9)隐式迭代。当用jQuery找到带有“.myClass”类的全部元素，然后隐藏他们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作对象集合，这使得大量的循环结构变得不再必要，从而大量的减少了代码量。

(10)行为层和结构层的分离。开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层和结构层完全分离的思想，可以使jQuery开发人员和HTML或者其他页面开发人员各司其职。同时，后期维护也非常方便。

(11)丰富的插件支持。jQuery的易扩张性，吸引了来自全球的开发者来编写jQuery 的扩展插件。目前已经有成百上千的官方插件支持，而且还不断地有新的插件面世。

配置jQuery环境：

jQuery不需要安装，只需将下载好的jQuery.js文件放到网站上的一个公共的位置，想要在某个页面使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可。

在Visual Studio中,一般统一将jQuery.js文件放在目录scripts下。在编写的页面代码中的标签中引入jQuery.js后，就可以使用jQuery库了。程序如下：

<head>
<scriptsrc="scripts/jQuery.js"  type="text/javascript"></script>
</head>

学习基础$(document).ready()函数：

在编写一个jQuery代码时，必须以$(document).ready()开头，所有的jQuery代码都必须写在$(document).ready(){}里，格式如下:

$(document).ready(function(){
              //jQuery代码块
});

$(document).ready()括号中的所有代码都会提前执行，而不是在页面所有内容加载完毕之后才执行事件。它允许用户在第一眼看到元素时，就能立即看到元素产生的效果。

为了书写简单，可使用$(function(){......})来代替$(document).ready()函数，作为它的缩写形式，缩写方式如下:

$(function(){
                      //jQuery代码块
});