jQuery 安装

2021-04-28 13:12:33 更新

目录:

一、网页中添加 jQuery的2种方式【本地引入,线上引入】

二、下载 jQuery到本地

三、线上引入(有很多平台)



内容:

一、网页中添加 jQuery的2种方式

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:


1、引入本地下载后的 jQuery 库( jquery.com 下载 jQuery 库)

2、引入线上 jQuery 库(从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery)


二、下载 jQuery到本地

有两个版本的 jQuery 可供下载:

Production version - 用于实际的网站中,已被精简和压缩。

Development version - 用于测试和开发(未压缩,是可读的代码)

以上两个版本都可以从 jquery.com 中下载。

jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:

<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

提示: 将下载的文件放在网页的同一目录下,就可以使用jQuery。

您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ?在 HTML5 中,不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!


三、线上引入(有很多平台)


百度:

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" rel="external nofollow" >
</script>

又拍云:

<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js" rel="external nofollow" >
</script>

新浪:

<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js" rel="external nofollow" >
</script>

微软:

<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js" rel="external nofollow" >
</script>


谷歌:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" rel="external nofollow" >
</script>

国内不建议用谷歌。

使用百度、又拍云、新浪、谷歌或微软的 jQuery,有一个很大的优势:


许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。

演示:

<html>
    <head>
        <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    </head>
    <body>
        <div id="pageone">
          <div>
              <h1>欢迎来到我的主页</h1>
          </div>        
          <div data-role="content">
              <p>欢迎!</p>
          </div>                  
          <div data-role="footer">
              <h1>底部文本</h1>
          </div>
        </div>
        <script>
            $(function(){
                $("body").attr("style",'background:#ff0000;')
            })        	
        </script>
    </body>
</html>