从零开始学jQuery（一）：jQuery库的介绍与准备

2019-02-22 本文已影响0人江江酱酱233

最近在学习jQuery，会在这里持续更新学习笔记，希望能够对陌生的你有所帮助！笔记会尽可能的简洁和通俗易懂，喜欢的话记得点赞喔 ~

一、什么是jQuery？

jQuery是一个JavaScript函数库，它极大简化了JavaScript语法，让Web开发中的HTML文档遍历、事件处理、动画和Ajax交互等操作变得更加简单。它的宗旨是Write less, do more。

需要注意的是，在学习jQuery之前，你应该对HTML、 CSS、 JavaScript和Document Object Model (DOM) 的基础知识有一定的了解。

二、如何引用jQuery库？

引用jQuery有两种方法：

本地安装
基于CDN引用

1. 本地安装

首先，在Github jQuery上下载最新的jQuery版本，并解压。在这里我们选择3.3.1版本。
然后，在解压文件的dist目录下找到jquery.js文件，把它的路径放到<script>的src属性中。例如：

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery-3.3.1/dist/jquery.min.js"></script>
   </head>
    
   <body>
      <h1>Hello</h1>
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </body>
</html>

2. 基于CDN引用

如果你不想在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。只需把<script>中的路径改为相应资源的URL即可。这些URL都可以从jQuery Download中找到。
例如：

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

三、如何调用jQuery函数？

所有的 jQuery 事件和函数都应该置于ready事件中，因为$(document).ready()定义了当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
语法：

$(document).ready(function() {
// jQuery 事件和函数
});

举例：

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "jquery-3.3.1/dist/jquery.min.js"></script>
   </head>
    
   <body>
      <div id = "mydiv">
         点击查看弹出框
      </div>
      <script type = "text/javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </body>
</html>