当前位置：首页 > jquery

jquery基础知识

2026-03-17 02:43:22jquery

jQuery 基础知识

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 的核心知识点：

引入 jQuery

在 HTML 文件中通过 CDN 引入 jQuery：

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

选择器

jQuery 使用 CSS 选择器语法选取 DOM 元素：

$("#id")          // ID 选择器
$(".class")       // 类选择器
$("div")          // 标签选择器
$("div.class")    // 组合选择器

DOM 操作

常见 DOM 操作方法：

$("p").text("新内容")      // 设置文本
$("p").html("<b>加粗</b>") // 设置 HTML
$("input").val("值")       // 设置表单值
$("div").append("<p>新段落</p>") // 追加内容
$("div").remove()          // 删除元素

事件处理

绑定事件的方法：

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

$("input").keyup(function(event) {
  console.log(event.key);
});

// 事件委托
$("ul").on("click", "li", function() {
  $(this).toggleClass("active");
});

动画效果

基础动画方法：

$("div").hide(1000)                 // 隐藏元素
$("div").show("slow")               // 显示元素
$("div").toggle(500)                // 切换显示状态
$("div").fadeIn()                   // 淡入
$("div").fadeOut()                  // 淡出
$("div").animate({left: "250px"}, 1000) // 自定义动画

Ajax 请求

发送 Ajax 请求的基本方式：

$.ajax({
  url: "test.html",
  method: "GET",
  dataType: "html",
  success: function(data) {
    $("#result").html(data);
  },
  error: function(xhr, status, error) {
    console.error(error);
  }
});

// 简写方法
$.get("test.php", {name: "John"}, function(data) {
  console.log(data);
});

$.post("test.php", {name: "John"}, function(data) {
  console.log(data);
});

实用工具方法

常用工具函数：

$.trim("  hello  ")         // 去除空格
$.each(array, function(index, value) {})  // 遍历数组/对象
$.extend({}, obj1, obj2)    // 合并对象
$.isArray(obj)              // 检查是否为数组
$.isFunction(obj)           // 检查是否为函数

链式调用

jQuery 支持链式调用：

$("div")
  .addClass("highlight")
  .css("color", "red")
  .fadeOut(1000)
  .fadeIn(1000);

插件扩展

创建 jQuery 插件的基本模式：

(function($) {
  $.fn.myPlugin = function(options) {
    // 插件逻辑
    return this.each(function() {
      $(this).html("插件内容");
    });
  };
})(jQuery);

// 使用插件
$("div").myPlugin();