jquery 入门

什么是 jQuery

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互的操作。它兼容多种浏览器，提供易于使用的 API，适合快速开发。

引入 jQuery

在 HTML 文件中通过 <script> 标签引入 jQuery。可以从官网下载或直接使用 CDN 链接：

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

基本语法

jQuery 的核心是通过选择器选取 DOM 元素，并对其进行操作。语法结构为 $(selector).action()：

• $ 是 jQuery 的别名。
• selector 用于查找 HTML 元素。
• action() 是对元素执行的操作。

常用选择器

• 元素选择器：$("p") 选取所有 <p> 元素。
• ID 选择器：$("#demo") 选取 ID 为 demo 的元素。
• 类选择器：$(".test") 选取所有 class 为 test 的元素。
• 组合选择器：$("p.intro") 选取 class 为 intro 的 <p> 元素。

事件处理

jQuery 简化了事件绑定。常见事件包括 click、mouseenter、keypress 等：

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

DOM 操作

• 获取/设置内容：text()、html()、val()。
• 修改 CSS：css("property", "value")。
• 添加元素：append()、prepend()、after()、before()。
• 删除元素：remove()、empty()。

动画效果

• 显示/隐藏：show()、hide()、toggle()。
• 淡入淡出：fadeIn()、fadeOut()、fadeToggle()。
• 滑动效果：slideDown()、slideUp()、slideToggle()。

Ajax 请求

jQuery 提供了简化的 Ajax 方法：

$.ajax({
    url: "demo_test.txt",
    success: function(result) {
        $("#div1").html(result);
    }
});

链式调用

jQuery 支持链式调用，可以在一条语句中执行多个操作：

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

插件扩展

jQuery 支持通过插件扩展功能。引入插件后，可以调用新增的方法：

<script src="jquery-plugin.js"></script>
<script>
    $("div").pluginMethod();
</script>

学习资源

• 官方文档：jQuery API Documentation
• 在线教程：W3School、MDN Web Docs。
• 实践项目：通过小型项目练习选择器、事件和动画的使用。

jQuery 虽然逐渐被现代框架取代，但在维护旧项目或快速原型开发中仍有价值。掌握基础后，可以进一步学习高级特性如自定义插件或性能优化。