1.配置jQuery环境
1.1获取jQuery最新版本
进入jQuery的官方网址 http://jquery.com ,下载最新的jQuery库。
1.2 jQuery库类型说明
目前jQuery库分为三个大版本:
jquery-1.x版本,兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。一般项目来说,使用1.x版本就可以了,例如:jquery-1.11.3。
jquery-2.x版本,不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,例如:jquery-2.1.4。
jquery-3.x版本,不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本,目前该版本是官方主要更新维护的版本,例如:jquery-3.2.1。
jQuery官方手册:http://api.jquery.com
1.3 jQuery.js和jQuery.min.js的区别
jQuery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js,例如:
jquery.js是完整的未压缩的jQuery库,文件比较大,一般用于阅读学习源码或修改源码,一般不用于线上项目。
jquery.min.js是由完整版的jQuery库经过压缩得来,压缩后功能与未压缩的完全一样,只是将其中的空白字符、注释、空行等与逻辑无关的内容删除,并进行一些优化。这个版本一般用于网站引用使用(项目上线的时候使用),减小文件体积,降低网站流量,提升访问速度等。
1.4 在页面中引入jQuery
1.4.1 引入本地jQuery
先把我们已经下载好的jQuery源文件添加到我们的项目里面来,然后再我们的页面中引用jQuery文件。
<
1.4.2 CDN引入jQuery
CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。
目前谷歌、微软和百度等的服务器都存有jQuery,下面我们就用百度静态资源公共库来为大家做演示。
<
2. 编写jQuery程序
在开始编写第一个jQuery程序之前,首先应该明确一点。在jQuery库中,$就是jQuery的一个简写的形式,例如$("#car")和jQuery("#car")是等价的,$.ajax和jQuery.ajax是等价的。如果没有特别说明,程序中的$符号都是jQuery的一个简写形式。
jQuery入口函数完整写法:
<
简化写法:
<
以上两种jQuery的入口函数,类似于传统的JavaScript中的window.onload方法,不过与window.onload还是有一些区别。
| 描述 | window.onload | $(document).ready() | | :---: | :---: | :---: | | 执行时机 | 必须等待网页中所有的内容都加载完毕后(包括图片)才能执行 | 网页中所有DOM结构绘制完毕后就执行,可能DOM元素相关联的东西并没有加载完成(例如图片还没下载完成) | | 编写个数 | 不能同时编写多个 | 可以同时别写多个 |