jQuery 快速入门：选择器、事件与 AJAX

FreeGuideOnline 最新 2026-06-15

jQuery 快速入门：选择器、事件与 AJAX

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它极大地简化了 HTML 文档遍历和操作、事件处理、动画以及 AJAX 交互。本教程将带你从零开始，掌握 jQuery 中最核心的选择器、事件绑定以及 AJAX 数据请求，让你快速上手项目开发。

1. 引入 jQuery

在使用 jQuery 之前，你需要在 HTML 页面中引入它。你可以通过 CDN（推荐）或本地文件引入。

<!-- 使用 CDN 引入最新版 jQuery（3.x） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

将这段代码放置在页面的 <head> 中或 </body> 前。一旦引入，全局变量 jQuery 和它的别名 $ 就可以使用了。

2. jQuery 核心语法

jQuery 的基本语法是 $(selector).action()：

$ 代表 jQuery。
selector 用于“查找” HTML 元素。
action() 对元素执行某种操作。

示例：$("p").hide() 会隐藏所有 <p> 标签。

所有 jQuery 代码最好写在文档就绪事件中，确保 DOM 完全加载后再执行 JavaScript。

$(document).ready(function(){
   // 你的 jQuery 代码
});

// 简写形式（更常用）
$(function(){
   // 代码写在这里
});

3. 选择器：精准定位元素

jQuery 选择器基于 CSS 选择器，并扩展了更多实用功能。它们能够帮助你快速选取所需元素。

3.1 基本选择器

元素选择器：$("p") 选取所有 <p> 元素。
ID 选择器：$("#myId") 选取唯一 ID 为 myId 的元素。
类选择器：$(".myClass") 选取所有 class 为 myClass 的元素。
通配选择器：$("*") 选取所有元素。

$(function(){
    $("button").click(function(){
        $("p").css("color", "red");   // 所有 p 变红
        $("#title").hide();           // 隐藏 id 为 title 的元素
        $(".highlight").fadeOut();    // 淡出所有带 highlight 类的元素
    });
});

3.2 组合与层级选择器

你可以组合选择器或利用元素之间的层级关系来定位。

$("p.intro")      // 选取 class 为 intro 的 <p> 元素
$("div span")     // 选取 <div> 内部的所有 <span>（后代）
$("div > span")   // 选取 <div> 的直接子元素 <span>
$("ul li:first")  // 选取第一个 <ul> 下的第一个 <li>
$("ul li:last")   // 选取最后一个 <li>

3.3 过滤选择器

jQuery 提供了丰富的过滤选择器，方便对结果集进行筛选。

$("li:even")          // 选取索引为偶数的 <li>，从 0 开始
$("li:odd")           // 选取索引为奇数的 <li>
$(":header")          // 选取所有标题元素（h1 - h6）
$("div:visible")      // 选取所有可见的 <div>
$("input:checked")    // 选取所有被选中的复选框或单选框
$(":input")           // 选取所有 input、select、textarea、button 元素

3.4 属性选择器

根据元素的属性及属性值进行选择，非常灵活。

$("[href]")               // 所有带有 href 属性的元素
$("a[target='_blank']")   // target 属性等于 _blank 的 <a> 元素
$("input[name^='user']")  // name 以 'user' 开头的 input
$("input[name$='email']") // name 以 'email' 结尾的 input
$("img[src*='logo']")     // src 属性包含 'logo' 的图片

4. 事件：让页面动起来

jQuery 让你能够以简洁的方式为元素绑定事件，处理用户交互。

4.1 常用事件方法

鼠标事件：click, dblclick, mouseenter, mouseleave
键盘事件：keypress, keydown, keyup
表单事件：submit, change, focus, blur
文档/窗口事件：load, resize, scroll

$("#btn").click(function(){
   alert("按钮被点击了");
});

$("input").focus(function(){
   $(this).css("background-color", "#e0f0ff");
});

$("form").submit(function(event){
   // 阻止表单默认提交
   event.preventDefault();
   alert("表单提交被拦截");
});

4.2 事件绑定：on() 方法

on() 方法是 jQuery 中推荐的事件绑定方式，尤其是动态创建的元素，你需要使用事件委托。

基本绑定：

$("button").on("click", function(){
   console.log("常规绑定");
});

事件委托： 为当前存在和未来动态添加的元素绑定事件。语法为 $(祖先选择器).on(事件, 子元素选择器, 处理函数)。

// 为 #list 下的所有现有和未来的 <li> 绑定点击事件
$("#list").on("click", "li", function(){
   alert($(this).text());
});

绑定多个事件：

$("#myDiv").on({
   mouseenter: function(){
      $(this).css("background-color", "lightgray");
   },
   mouseleave: function(){
      $(this).css("background-color", "white");
   },
   click: function(){
      $(this).toggleClass("active");
   }
});

4.3 事件对象

事件处理函数中可以通过参数 event 获取事件信息，并执行常见操作。

$("a").click(function(event){
   event.preventDefault();          // 阻止默认行为
   event.stopPropagation();        // 阻止事件冒泡
   console.log(event.target);      // 触发事件的元素
   console.log("X: " + event.pageX + ", Y: " + event.pageY);
});

5. AJAX：异步数据交互

jQuery 封装了 AJAX 方法，让你无需编写复杂的 XMLHttpRequest 代码即可与服务器进行数据交换。

5.1 load() 方法

最简单的 AJAX 方法，直接从服务器加载数据，并把返回的 HTML 放入匹配的元素中。

// 将 "data.html" 的内容加载到 id 为 result 的区块中
$("#result").load("data.html");

// 带选择器的加载：只加载 data.html 中 id 为 container 的部分
$("#result").load("data.html #container");

// 加载完成后执行回调
$("#result").load("data.html", function(response, status, xhr){
   if(status == "success"){
      console.log("数据加载成功");
   } else {
      console.log("加载失败: " + status);
   }
});

5.2 $.get() 和 $.post()

快捷方法用于发送 GET 或 POST 请求。

GET 请求：

$.get("server.php", { id: 1, name: "John" })
 .done(function(data){
    $("#result").html(data);
 })
 .fail(function(){
    alert("请求失败");
 });

或者使用回调参数：

$.get("test.php", { page: 5 }, function(response){
   console.log("服务器返回数据: ", response);
});

POST 请求：

$.post("submit.php", {
   username: "admin",
   password: "123456"
}, function(data, status){
   if(status == "success"){
      alert("提交成功");
   }
});

5.3 $.ajax() 方法（全面控制）

$.ajax() 是底层方法，可通过配置参数实现所有 AJAX 功能。

$.ajax({
   url: "api/data",
   type: "POST",           // 请求方法 GET/POST/PUT/DELETE
   data: { key: "value" }, // 发送到服务器的数据
   dataType: "json",       // 预期的服务器响应数据类型
   beforeSend: function(){
      // 请求前显示加载动画
      $("#loading").show();
   },
   success: function(response){
      // 处理成功返回的数据
      console.log(response);
   },
   error: function(xhr, status, error){
      // 处理错误
      alert("请求出错: " + error);
   },
   complete: function(){
      // 请求完成（无论成功失败）
      $("#loading").hide();
   }
});

5.4 全局 AJAX 事件处理器

可以在整个页面上统一监听 AJAX 生命周期，常用于全局加载指示器。

// AJAX 请求开始时触发
$(document).ajaxStart(function(){
   $("#global-loader").show();
});

// AJAX 请求全部完成时触发
$(document).ajaxStop(function(){
   $("#global-loader").hide();
});

5.5 处理表单数据与序列化

jQuery 提供了方便的序列化方法，将表单数据转换为 URL 编码字符串。

// 将 form 内所有元素序列化为字符串
var formData = $("#myForm").serialize();

// 发送序列化表单数据
$.post("process.php", formData, function(response){
   console.log(response);
});

6. 实战小练习

综合运用选择器、事件和 AJAX，编写一个简单的用户搜索功能。

HTML 结构：

<input type="text" id="search" placeholder="输入用户名">
<button id="searchBtn">搜索</button>
<ul id="userList"></ul>

jQuery 代码：

$(function(){
   $("#searchBtn").click(function(){
      var query = $("#search").val();
      if(query.trim() === ""){
         alert("请输入搜索关键词");
         return;
      }
      $.ajax({
         url: "https://api.example.com/users",
         type: "GET",
         data: { q: query },
         dataType: "json",
         success: function(users){
            // 清空列表
            var $list = $("#userList").empty();
            if(users.length > 0){
               $.each(users, function(i, user){
                  $list.append(`<li>${user.name} - ${user.email}</li>`);
               });
            } else {
               $list.append("<li>没有找到用户</li>");
            }
         },
         error: function(){
            alert("搜索请求失败，请稍后重试");
         }
      });
   });

   // 支持回车键触发搜索
   $("#search").keypress(function(e){
      if(e.which === 13){
         $("#searchBtn").click();
      }
   });
});

通过上述练习，你巩固了元素选取、点击事件、AJAX 调用以及动态 DOM 操作。

7. 总结与下一步

本教程覆盖了 jQuery 的三大支柱：选择器让你轻松获取元素，事件机制让你处理交互，AJAX 让你实现异步数据交换。掌握这些知识后，你可以继续学习：

jQuery 动画与效果（fade, slide, animate）
DOM 操作（append, prepend, replaceWith 等）
jQuery 插件开发

jQuery 体积小、兼容性好，即使是现代前端框架盛行的今天，仍然大量用于维护旧项目或快速原型开发。希望这篇教程帮你打下了坚实的基础。现在，动手实践吧！