jQuery 入门级学习笔记及源码攻略

jQuery 是目前最流行的 JavaScript 库之一，通过简洁易用的语法，提供了一种十分便捷的方式来操纵 HTML 文档、处理事件、发送 Ajax 请求等操作。本文将介绍 jQuery 的基本语法和常用操作，并提供示例源码来帮助学习和理解。

jQuery 基本语法

在使用 jQuery 前，需要引入 jQuery 库。可以通过以下方式引入：

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

其中，src 属性指向 jQuery 的地址，这里引用的是 jQuery 最新版的地址。

引入成功后，在 HTML 文档中引用 jQuery 变量（一般使用 $ 符号），即可使用 jQuery 提供的方法来操作 HTML 结构。

$(document).ready(function() {
  // 执行需要添加的 jQuery 方法
});

这里的 $ 符号表示 jQuery，用来选中 HTML 元素，以及调用 jQuery 提供的方法。$(document).ready() 表示文档加载完成后执行的一些操作，比如事件绑定。

jQuery 选择器

jQuery 选择器用于选择 HTML 文档中的元素，其基本语法如下：

$("selector")

其中，selector 表示选择器，可以是元素的标签名、class、id 等。

元素选择器

用标签名即可选择元素，如：

$("p") // 选择所有 <p> 元素

id 选择器

用 # 符号加上元素的 id 即可选择元素，如：

$("#intro") // 选择 id 为 intro 的元素

class 选择器

用 . 符号加上元素的 class 即可选择元素，如：

$(".demo") // 选择 class 为 demo 的元素

多重选择器

用逗号分隔多个选择器，可以同时选择多个元素，如：

$("h1, p") // 选择所有 <h1> 和 <p> 元素

jQuery 操作 HTML 元素

jQuery 提供了许多操作 HTML 元素的方法，包括修改属性、内容、样式等。

修改属性

通过 attr() 方法可以修改元素的属性：

$("#myImage").attr("src", "cat.jpg") // 将 id 为 myImage 的图片的 src 改为 cat.jpg

修改内容

通过 html() 方法可以修改元素的内容：

$("#myParagraph").html("New content") // 将 id 为 myParagraph 的段落的内容改为 New content

修改样式

通过 css() 方法可以修改元素的样式：

$("h1").css("font-size", "32px") // 将所有 <h1> 元素的字体大小改为 32px

jQuery 事件处理

jQuery 可以通过 on() 方法来处理事件：

$("#myBtn").on("click", function() {
  // 在按钮被点击时执行的操作
})

这里的 click 是事件名，代表按钮被点击的事件。function() 是事件的处理函数，代表按钮被点击时执行的操作。

示例

下面提供两条使用 jQuery 的示例代码：

示例一：鼠标移动时的提示信息

<!DOCTYPE html>
<html>
<head>
  <title>Tooltip example</title>
  <style>
    .tooltip {
      position: absolute;
      z-index: 1;
      background-color: #ddd;
      padding: 8px;
      border-radius: 5px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $(".tooltip").hide();  // 隐藏提示框
      $("button").mousemove(function(event) {  // 移动鼠标时触发事件
        var x = event.pageX + 10;  // 获取鼠标的位置
        var y = event.pageY + 10;
        $(".tooltip").css({"top": y, "left": x}).show();  // 设置提示框位置并显示
      });
      $("button").mouseout(function() {
        $(".tooltip").hide();   // 鼠标移出时隐藏提示框
      })
    });
  </script>
</head>
<body>
  <button>Hover me!</button>
  <div class="tooltip">Hello, world!</div>
</body>
</html>

这个示例代码会在鼠标移动到按钮上方时弹出一个提示框，提示框的内容为 "Hello, world!"。提示框的位置会随着鼠标的移动而改变，移出按钮范围时会隐藏提示框。

示例二：点击按钮修改文本和样式

<!DOCTYPE html>
<html>
<head>
  <title>Modify content example</title>
  <style>
    .text {
      font-size: 24px;
    }
    .red {
      color: red;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        $(".text").html("New content").addClass("red");
      });
    });
  </script>
</head>
<body>
  <button>Change content</button>
  <p class="text">Original content</p>
</body>
</html>

这个示例代码会在点击按钮时，将 <p> 元素中的文本内容修改为 "New content"，同时添加 red 类，使文本变为红色。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 入门级学习笔记及源码 - Python技术站

jQuery 入门级学习笔记及源码