当前位置：首页 > jquery

jquery笔记

2026-02-03 20:14:00jquery

jQuery 基础语法

jQuery 的核心是通过选择器选取 DOM 元素，并对其进行操作。基本语法结构为 $(selector).action()，其中 $ 是 jQuery 的别名，selector 用于查找元素，action() 是执行的操作。

// 选取所有 <p> 元素并隐藏
$("p").hide();

// 选取 id 为 "test" 的元素并设置文本内容
$("#test").text("Hello, jQuery!");

// 选取 class 为 "demo" 的元素并添加点击事件
$(".demo").click(function() {
    alert("Clicked!");
});

常用选择器

jQuery 支持 CSS 选择器语法，同时扩展了部分专用选择器：

// 元素选择器
$("p") // 所有 <p> 元素

// ID 选择器
$("#myId") // id="myId" 的元素

// 类选择器
$(".myClass") // class="myClass" 的元素

// 属性选择器
$("[href]") // 所有带 href 属性的元素
$("a[target='_blank']") // 所有 target="_blank" 的 <a> 元素

// 表单选择器
$(":input") // 所有 input 元素
$(":checked") // 所有被选中的复选框或单选按钮

DOM 操作

jQuery 提供了丰富的 DOM 操作方法：

// 获取或设置内容
$("#div1").html(); // 获取 HTML 内容
$("#div1").html("<p>New content</p>"); // 设置 HTML 内容

// 获取或设置属性
$("#img1").attr("src"); // 获取 src 属性
$("#img1").attr("src", "new-image.jpg"); // 修改 src 属性

// 添加元素
$("#div1").append("<p>Appended text</p>"); // 在内部末尾添加
$("#div1").prepend("<p>Prepended text</p>"); // 在内部开头添加

// 移除元素
$("#div1").remove(); // 删除元素及其子元素
$("#div1").empty(); // 仅删除子元素

事件处理

jQuery 简化了事件绑定和处理：

// 点击事件
$("#btn1").click(function() {
    alert("Button clicked");
});

// 鼠标悬停事件
$("#hoverDiv").hover(
    function() { $(this).css("background-color", "yellow"); }, // 鼠标进入
    function() { $(this).css("background-color", "white"); }  // 鼠标离开
);

// 表单提交事件
$("#myForm").submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交
    alert("Form submitted");
});

动画效果

jQuery 内置了多种动画效果：

// 显示/隐藏
$("#box").hide(1000); // 1秒内渐隐
$("#box").show(500);  // 0.5秒内渐显

// 淡入淡出
$("#box").fadeOut(800); // 0.8秒淡出
$("#box").fadeIn(600);  // 0.6秒淡入

// 滑动效果
$("#panel").slideUp();   // 向上滑动隐藏
$("#panel").slideDown(); // 向下滑动显示

// 自定义动画
$("#box").animate({
    left: '250px',
    opacity: '0.5',
    height: '+=150px'
}, 1000); // 1秒内完成动画

AJAX 请求

jQuery 简化了 AJAX 操作：

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

// POST 请求
$.post("submit.php", 
    { name: "John", age: 30 },
    function(data) {
        alert("Response: " + data);
    }
);

// 完整的 AJAX 请求
$.ajax({
    url: "process.php",
    type: "POST",
    data: { user: "admin", pass: "123" },
    success: function(response) {
        console.log("Success:", response);
    },
    error: function(xhr) {
        console.log("Error:", xhr.statusText);
    }
});

实用工具方法

jQuery 提供了一些实用工具函数：

// 遍历数组
$.each([ "a", "b", "c" ], function(index, value) {
    console.log(index + ": " + value);
});

// 合并对象
var newObj = $.extend({}, obj1, obj2);

// 检测数据类型
$.isArray([]);  // true
$.isFunction($); // true

// 去除字符串两端空格
var str = $.trim("  hello  "); // "hello"

链式调用

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

$("#content")
    .css("color", "red")
    .slideUp(200)
    .slideDown(200)
    .animate({ opacity: 0.5 });

插件扩展

jQuery 允许通过插件机制扩展功能：

jquery笔记

// 定义插件
(function($) {
    $.fn.highlight = function(options) {
        var settings = $.extend({
            color: "#fff",
            backgroundColor: "#ff0"
        }, options);

        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });
    };
}(jQuery));

// 使用插件
$("p").highlight({
    backgroundColor: "#fcc"
});