jquery入门教程

jQuery入门教程

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

引入jQuery库

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

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

或下载本地文件引入：

<script src="jquery-3.6.0.min.js"></script>

基础语法

jQuery通过$符号定义，基本语法为：

$(selector).action()

• selector：选择HTML元素（类CSS选择器）
• action()：对元素执行的操作

示例：隐藏所有<p>元素

$("p").hide();

常用选择器

• 元素选择器：$("p")
• ID选择器：$("#demo")
• 类选择器：$(".test")
• 组合选择器：$("div, p, .class")

DOM操作

修改元素内容：

$("#demo").text("新文本"); // 修改文本
$("#demo").html("<b>新HTML</b>"); // 修改HTML

修改属性：

$("img").attr("src", "new-image.jpg"); // 修改src属性
$("input").val("新值"); // 修改表单值

事件处理

常见事件方法：

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

$("input").change(function() {
  console.log("输入值变化");
});

动画效果

隐藏/显示：

$("#box").hide(); // 隐藏
$("#box").show(); // 显示
$("#box").toggle(); // 切换状态

淡入淡出：

$("#box").fadeIn(); // 淡入
$("#box").fadeOut(); // 淡出

滑动效果：

$("#box").slideUp(); // 上滑隐藏
$("#box").slideDown(); // 下滑显示

AJAX请求

GET请求示例：

$.get("test.php", function(data) {
  $("#result").html(data);
});

POST请求示例：

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

链式调用

jQuery支持链式写法：

$("#box")
  .css("color", "red")
  .slideUp(1000)
  .slideDown(1000);

实用技巧

遍历元素：

$("li").each(function() {
  console.log($(this).text());
});

动态添加元素：

$("body").append("<div>新内容</div>");

过滤元素：

$("div").filter(".important").css("background", "yellow");

注意事项

• 确保DOM加载完成后执行jQuery代码：

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

  或简写为：

  $(function() {
  // jQuery代码
  });

• 避免选择器过于复杂，影响性能

• 新项目建议考虑现代框架（如Vue/React），但jQuery仍适合维护旧项目或快速原型开发