jQuery 特性操作详解及实例代码

什么是 jQuery？

jQuery 是一款快速、简洁的 JavaScript 库。它是设计用于简化 HTML 文档树遍历、事件处理、动画设计和 Ajax 交互的。jQuery 的核心特性包括：

• 具有出色的操作 DOM 的能力
• 链式调用和代码压缩
• 遍历与过滤（可以选取指定的 HTML 元素）
• 以及其他很多实用的功能

jQuery 特性操作详解

1. 选择器

jQuery 的最大特色之一是能够通过简洁的选择器轻松选取页面元素。下面是几种 jQuery 的选择器方法：

• 元素选择器

使用格式为 $("[element]")，可以选取所有拥有该元素名的 HTML 元素。

例如，$("div") 就可以选取页面上的所有 div 元素。

• ID 选择器

使用格式为 $("[#id]")，可以选取给定 ID 的页面元素。

例如，$("#myDiv") 就可以选取 id 为 myDiv 的元素。

• 类选择器

使用格式为 $("[.class]")，可以选取给定类名的页面元素。

例如，$(".myClass") 就可以选取所有带有 myClass 类名的元素。

2. 事件绑定

通过 jQuery 可以轻松地对 HTML 元素绑定事件。下面是一个实现点击事件的例子：

$("#myButton").click(function() {
  alert("Hello world!");
});

上述代码，先选取到 id 为 myButton 的按钮，然后为其绑定 click 事件。当点击该按钮时，会弹出提示框，内容为 Hello world!。

3. AJAX 请求

Ajax 的全称为 Asynchronous JavaScript and XML，目的是在不重新加载整个网页的情况下，实现局部更新。jQuery 提供了方便的 Ajax 方法，下面是一个使用 jQuery 实现 Ajax 请求的例子：

$.ajax({
  url: "https://api.example.com/data",
  dataType: "json",
  success: function(response) {
    // 处理响应数据
  },
  error: function(xhr, status, error) {
    // 处理错误响应
  }
});

上述代码使用 jQuery 的 ajax() 方法，向 https://api.example.com/data 发送一个 Ajax 请求。当请求成功时，回调函数 success 将执行。当请求出错或失败时，回调函数 error 将执行。

实例代码

例子 1：基本操作

下面是一个使用 jQuery 提交一个表单的例子。当用户提交表单数据时，使用 Ajax 方式向服务器发送请求，然后将服务器返回的响应展示在当前页面：

<form id="myForm" method="post" action="/submit">
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="password" name="password" placeholder="请输入密码">
  <button type="submit">提交</button>
</form>

<div id="myResponse"></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $("#myForm").submit(function(event) {
    event.preventDefault();
    $.ajax({
      url: "/submit",
      type: "POST",
      data: $(this).serialize(),
      success: function(response) {
        $("#myResponse").html(response);
      },
      error: function(xhr, status, error) {
        alert("请求出错，请稍后再试。");
      }
    });
  });
</script>

上述代码指定了一个表单，当用户提交表单时，首先使用 preventDefault() 方法阻止表单默认行为，然后使用 jQuery Ajax 方法向服务器发送请求。当请求成功时，将 myResponse 元素中的内容设置为服务器返回的响应内容。

例子 2：图像全屏查看

下面是一个使用 jQuery 实现的图像全屏查看功能。用户点击图片时，使用 jQuery 创建一个覆盖整个浏览器窗口的遮罩层，然后在遮罩层中展示图片。

<img class="fullscreen" src="/images/myImage.jpg">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(".fullscreen").click(function() {
    // 创建遮罩层
    var overlay = $("<div class='overlay'></div>");
    overlay.css({
      "background-color": "rgba(0, 0, 0, 0.8)", // 设置遮罩层的颜色
      "position": "fixed", // 设置遮罩层的定位方式
      "top": 0, // 设置遮罩层的上边距
      "left": 0, // 设置遮罩层的左边距
      "width": "100%", // 设置遮罩层的宽度
      "height": "100%", // 设置遮罩层的高度
      "z-index": 9999 // 设置遮罩层的 z-index 值，使其覆盖所有页面元素
    });
    // 创建图片容器
    var image = $("<div class='image'></div>");
    image.css({
      "position": "absolute", // 设置图片容器的定位方式为绝对定位
      "top": "50%", // 设置图片容器的上边距为页面里程碑的中心
      "left": "50%", // 设置图片容器的左边距为页面里程碑的中心
      "transform": "translate(-50%, -50%)" // 设置图片容器的位置为页面的中心
    });
    // 创建图片元素
    var img = $("<img class='fullscreen' src='" + $(this).attr("src") + "'>");
    img.css({
      "max-width": "90%", // 设置图片最大宽度为 90%
      "max-height": "90%", // 设置图片最大高度为 90%
      "display": "block", // 设置图片元素为块级元素
      "margin": "0 auto" // 水平居中
    });
    // 将图片元素添加到图片容器中
    image.append(img);
    // 将图片容器添加到遮罩层中
    overlay.append(image);
    // 将遮罩层添加到页面中
    $("body").append(overlay);
  });
  $(document).on("click", ".overlay", function() {
    // 移除遮罩层
    $(this).remove();
  });
</script>

上述代码为全屏图像查看器，当用户单击图像（.fullscreen 类）时，在页面上创建一个遮罩层覆盖所有页面元素。该代码会创建一个新的图片容器，在容器中展示传递过来的图片，并将该容器添加到遮罩层中。

当用户单击遮罩层时，遮罩层将从页面中移除。