jQuery [JS库]

一、引入 jQuery

1. 下载本地文件

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

2. 使用 CDN（推荐）

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

二、基本语法

1. 入口函数

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

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

// 简写形式
$(function() {
    // 代码
});

2. 选择器

$("#id")          // ID 选择器
$(".class")       // 类选择器
$("div")          // 标签选择器
$("div.class")    // 组合选择器
$("ul > li")      // 子元素选择器
$("input[type='text']") // 属性选择器

三、DOM 操作

1. 获取/设置内容

$("#elem").text()     // 获取文本
$("#elem").text("新内容") // 设置文本
$("#elem").html()     // 获取 HTML
$("#elem").html("<b>加粗</b>") // 设置 HTML
$("#elem").val()      // 获取表单值

2. 属性操作

$("#img").attr("src")         // 获取属性
$("#img").attr("src", "new.jpg") // 设置属性
$("#img").removeAttr("alt")   // 删除属性

3. CSS 操作

$("#elem").css("color")             // 获取样式
$("#elem").css("color", "red")      // 设置样式
$("#elem").css({ "color": "red", "font-size": "20px" }) // 设置多个样式

4. 添加/删除元素

$("#list").append("<li>新项</li>")  // 内部末尾添加
$("#list").prepend("<li>首项</li>") // 内部开头添加
$("#elem").remove()                // 删除元素

四、事件处理

1. 绑定事件

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

// 更通用的方式（支持动态元素）
$(document).on("click", "#btn", function() {
    // 事件处理
});

2. 常见事件

.click()    // 点击
.dblclick() // 双击
.hover()    // 鼠标悬停
.focus()    // 获取焦点
.blur()     // 失去焦点
.keypress() // 键盘按下

五、动画效果

1. 基本动画

$("#box").hide(1000)        // 隐藏（1秒）
$("#box").show(1000)        // 显示
$("#box").toggle(1000)      // 切换显示/隐藏

2. 渐变效果

$("#box").fadeIn(1000)     // 淡入
$("#box").fadeOut(1000)    // 淡出
$("#box").fadeToggle(1000) // 切换淡入/淡出

3. 滑动效果

$("#box").slideDown(1000)  // 向下展开
$("#box").slideUp(1000)    // 向上收起
$("#box").slideToggle(1000)// 切换展开/收起

4. 自定义动画

$("#box").animate({
    left: "250px",
    opacity: "0.5"
}, 1000);

六、Ajax 请求

1. 基础用法

$.ajax({
    url: "data.php",
    type: "GET",
    data: { id: 123 },
    success: function(response) {
        console.log("成功:", response);
    },
    error: function(xhr) {
        console.log("错误:", xhr.status);
    }
});

2. 快捷方法

$.get("data.php", { id: 123 }, function(data) {
    // 处理 GET 响应
});

$.post("save.php", { name: "John" }, function(data) {
    // 处理 POST 响应
});

七、工具函数

1. 遍历操作

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

2. 数组处理

$.each(array, function(index, value) {
    // 遍历数组
});

3. 类型判断

$.isArray(obj)  // 是否为数组
$.isFunction(obj)// 是否为函数

八、插件扩展

1. 使用插件

<script src="jquery-plugin.js"></script>

$("#elem").pluginName();

2. 编写插件

(function($) {
    $.fn.myPlugin = function() {
        this.css("color", "red");
        return this; // 保持链式调用
    };
})(jQuery);

// 使用
$("#elem").myPlugin();

九、注意事项

1. 版本兼容性：jQuery 3.x 不再支持 IE8 及以下版本，若需兼容请使用 1.x 版本。

2. 性能优化：

   • 缓存选择器结果：var $elem = $("#elem");
   • 避免频繁操作 DOM
3. 现代替代方案：Vue/React 等框架更适合复杂应用，但 jQuery 仍适用于小型项目或旧系统维护。