JQuery简介与配置

一、jQuery简介

 

jQuery是一个javaScript函数库

jQuery具备简洁的语法和跨平台的兼容性

1.1.1jQuery优势：

（1）轻量级的“主旨：以更少的代码，实现更多的功能”

（2）强大的选择器

（3）出色的DOM操作的封装

（4）可靠的事件处理机制

（5）完善的Ajax

（6）不污染顶级变量

（7）出色的浏览器兼容性

（8）链式操作方式

（9）隐式迭代

（10）行为层与机构层的分离

（11）丰富的插件支持

（12）完善的文档

（13）开源

jQuery库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

1.1.2 为什么使用 jQuery ？

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

很多大公司都在使用 jQuery， 例如:

• Google
• Microsoft
• IBM
• Netflix

二、jQuery 安装

1.2.1 配置JQuery环境

    1.获取JQuery最新版本

        进入JQUery的官方网站http://jquery.com/  

下载最新的jQuery库文件。

2   .jQuery库类型说明

有两个版本

生产版（最小化和压缩版）：jQuery.min.js  大小约31KB     经过工具压缩或者经过服务器开启Gzip压缩主要用于产品和项目

开发版（未压缩版）： jQuery..js  大小约229KB   是一个完整无压缩版本，主要用于测试，学习和开发。

3.jQuery环境配置

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

4.在页面中引入jQuery    

        将jQuery.js放在目录scripts下，在所提供的jQuery例子中为了方便调试，引用时使用的时相对路径。在实际项目中，读者可以根据实际需要调整jQuery库的路径

        在编写的页面代码中标签内引入jQuery库后，就可以使用jQuery库了，程序如下：

1.2.2 编写简单的jQuery代码

        在开始写第一个jQuery程序之前，首先应该明确一点，在jQuery库中，$就是jQuery的一个简写形式

        例如：

            $("#Wannabe") 和 jQuery("#Wannabe")是等价的；

            $.ajax 和 jQuery.ajax是等价的；

               如果没有特别的说明，程序中的$符号都是一个jQuery的简写形式。

在上图的代码有一个陌生的代码片段，如下：

$(document).ready(function(){
//```
})

这段代码的作用类似与传统的JavaScript中的window.onload方法，不过与window.onload还是有些区别

如表：

	window.onload	$(documetn).ready(){}
执行时机	必须等待网页中的所有的内容加载完毕后（包括图片）才能执行	网页中所有的DOM结构绘制完毕后机执行，可能DOM元素关联的东西并没有加载完
编写个数	不能同时编写多个 一下代码无法正确执行： window.onload = function(){ alert("test1") } window.onload = function(){ alert("test2") } 结果只会输出”test2“	能同时编写多个 一下代码正确执行： $(document).ready(function(){ alert(”hello world!“)； }) $(document).ready(function(){ alert(”hello jQuery!“)； }) 以上两个的结果都会被输出
简写	无	写法一： $(document).ready(function(){ //`````` }) 写法二： $().ready(function(){ //`````` }) 写法三： $(function(){ //`````` })