上一节:
下一节:

  jQuery 简介/安装

  • 什么是jQuery？

    jQuery是一个轻量级的“少写，做多”的JavaScript库。
    jQuery的目的是让您在网站上使用JavaScript变得更加容易。
    jQuery需要执行许多需要多行JavaScript代码的常见任务，并将它们包装到可以使用一行代码调用的方法中。
    jQuery还简化了许多来自JavaScript的复杂事物，比如AJAX调用和DOM操作。
    jQuery库包含以下功能：
    • HTML/DOM操作
    • CSS 操作
    • HTML事件方法
    • 效果和动画
    • AJAX
    • Utilities

  • 为什么选择jQuery？

    还有很多其他的JavaScript框架，但jQuery似乎是最受欢迎的，也是最具扩展性的。
    Web上许多大公司都使用jQuery，例如：
    • Google
    • Microsoft
    • IBM
    • Netflix
    jQuery会在所有浏览器中运行吗？
    jQuery团队了解所有关于跨浏览器的问题，他们已将这些知识写入jQuery库。 jQuery将在所有主流浏览器中运行完全相同。

  • 向您的页面添加jQuery库

    jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
    可以通过下面的标记把 jQuery 添加到网页中： 
        
       <head>
       <script type="text/javascript" src="jquery.js"></script>
       </head>
    请注意，<script> 标签应该位于页面的 <head> 部分。

  • 基础 jQuery 实例

    下面的例子演示了 jQuery 的 hide() 函数，隐藏了 HTML 文档中所有的 <p> 元素。 
         
            <html>
               <head>
                 <script type="text/javascript" src="jquery.js"></script>
                 <script type="text/javascript">
                   $(document).ready(function(){
                      $("button").click(function(){
                         $("p").hide();
                      });
                   });
                 </script>
               </head>
               
               <body>
                 <h2>This is a heading</h2>
                 <p>This is a paragraph.</p>
                 <p>This is another paragraph.</p>
                 <button type="button">点击我</button>
               </body>
            </html>
    尝试一下

  • 下载 jQuery

    共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。
    这两个版本都可从 jQuery.com 下载。

  • 库的替代

    Bootstrap 和 百度 对 jQuery 的支持都很好。
    如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Bootstrap 或 百度 加载 CDN jQuery 核心文件。
    使用 Bootstrap 的 CDN 
     
       <head>
       //此版本是1.11.2，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
       <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
       </head>
    使用 百度 的 CDN 
     
       <head>
       //此版本是1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
       <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
       </head>
    提示：使用Bootstrap或百度的 jQuery，有一个很大的优势：
    许多用户在访问其他站点时，已经从Bootstrap或百度加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
上一节:
下一节: