当前位置：首页 > jquery

jquery基本语法

2026-03-17 09:09:15jquery

jQuery 基本语法

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。其核心语法基于 CSS 选择器，易于上手。

选择器语法

jQuery 使用 $ 符号作为核心函数，通过选择器获取 DOM 元素：

$("selector")

标签选择器：$("p") 选择所有 <p> 元素。
类选择器：$(".class") 选择所有 class="class" 的元素。
ID 选择器：$("#id") 选择 id="id" 的元素。
组合选择器：$("p.class") 选择 <p> 且 class="class" 的元素。

事件处理

jQuery 提供简洁的事件绑定方法：

$("selector").event(function() {
  // 事件触发时执行的代码
});

点击事件：$("#btn").click(function() { alert("Clicked!"); });
鼠标悬停：$("div").hover(function() { $(this).css("background", "red"); });

DOM 操作

jQuery 简化了 DOM 元素的增删改查：

$("#container").append("<p>New paragraph</p>"); // 添加内容
$("p").remove(); // 删除所有 <p> 元素
$("h1").text("New Title"); // 修改文本内容
$("img").attr("src", "new-image.jpg"); // 修改属性

动画效果

内置动画方法实现平滑过渡：

$("div").hide(1000); // 1 秒内隐藏
$("div").slideUp(); // 向上滑动隐藏
$("div").fadeIn("slow"); // 淡入显示

Ajax 请求

简化异步数据加载：

$.get("url", function(data) {
  $("#result").html(data); // 加载数据到元素
});

$.post("url", { key: "value" }, function(response) {
  console.log(response);
});

链式调用

jQuery 支持方法链式调用：

$("p")
  .css("color", "blue")
  .slideUp(200)
  .slideDown(200);

实用工具函数

提供辅助功能如遍历和数组操作：

jquery基本语法

$.each(array, function(index, value) {
  console.log(index + ": " + value);
});

var trimmed = $.trim("  hello  "); // 去除空格

注意事项

使用前需引入 jQuery 库：<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
确保 DOM 加载完成后执行代码：$(document).ready(function() { /* code */ }); 或简写为 $(function() { /* code */ });