jQuery下载与配置

要在自己的网站中应用jQuery库,需要下载并配置它,下面将介绍如何下载与配置jQuery。
一 下载jQuery
jQuery是一个开源的脚本库,我们可以从它的官方网站(http://jquery.com)中下载到。
下面介绍具体的下载步骤。
1、在浏览器的地址栏中输入http://jquery.com,并按下〈Enter〉键,将进入到jQuery官方网站的首页。
2、在jQuery官方网站的首页中,进入下载页面:http://jquery.com/download/。
可以下载最新版本的jQuery库,下载截图如下:

 
 
二 配置jQuery
将jQuery库下载到本地计算机后,还需要在项目中配置jQuery库。
即将下载后的jquery-3.1.1.min.js文件放置到项目的指定文件夹中,通常放置在JS文件夹中,然后在需要应用jQuery的页面中使用下面的语句,将其引用到文件中。
<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
或者
<script src="JS/jquery-3.1.1.min.js" type="text/javascript"></script>
引用jQuery的<script>标签,必须放在所有的自定义脚本文件的<script>之前,否则在自定义的脚本代码中应用不到jQuery脚本库。
 
三 我的第一个jQuery脚本
在了解了如何下载和配置jQuery后,我们就来通过一个简单的例子来体验一下jQuery脚本。
应用jQuery弹出一个提示对话框。
1、创建一个名称为JS的文件夹,并将jquery-3.1.1.min.js复制到该文件夹中。
2、创建一个名称为14.01.html的文件,在该文件的<head>标记中引用jQuery库文件,关键代码如下:
<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
3、编写jQuery代码,实现在页面载入完毕后,弹出一下提示对话框,具体代码如下:
  1. <script>
  2. $(document).ready(function()
  3. {
  4. alert("我的第一个jQuery脚本!");
  5. });
  6. </script>
实际上,上面的代码还可以更简单,也就是将$(document).ready用“$”符代替,替换后的代码如下:
  1. <script>
  2. $(function()
  3. {
  4. alert("我的第一个jQuery脚本!");
  5. });
  6. </script>
 
四 运行效果


 
 
五 补充说明
熟悉JavaScript的读者知道,要实现例该效果,还可以通过下面的代码实现:
  1. <script>
  2. window.onload=function()
  3. {
  4. alert("我的第一个jQuery脚本!");
  5. }
  6. </script>
这时,读者可能要问,这两种方法有什么区别,究竟哪种方法更好呢。
下面我们就来介绍二者的区别。window.load()方法是在页面所有的东西都载入完毕后才会执行,例如图片、横幅等。
而$(document).ready()方法则是在DOM元素载入就绪后执行。
在一个页面中可以放置多个$(document).ready()方法,而window.load()方法在页面上只允许放置一个(常规情况)。
这两个方法可以同时在页面中执行,两者并不矛盾。不过,$(document).ready()方法比window.load()方法载入更快。

猜你喜欢

转载自cakin24.iteye.com/blog/2365715