jquery写法

jQuery是一种快速、简洁的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是jQuery常见写法的归纳：

基本语法结构

jQuery的核心是通过$()函数选择元素并对其进行操作。基本语法为：

$(selector).action()

selector用于查询HTML元素，action()定义对元素执行的操作。

文档就绪事件

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

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

简写形式：

$(function() {
    // 代码内容
});

选择器用法

通过CSS选择器获取元素：

$("p")                  // 选择所有<p>元素
$("#test")              // 选择id="test"的元素
$(".demo")              // 选择class="demo"的元素
$("ul li:first")        // 选择第一个<li>元素

事件处理

绑定事件处理函数：

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

其他常见事件：

.hover()    // 鼠标悬停
.focus()    // 获取焦点
.blur()     // 失去焦点

DOM操作

修改内容或属性：

$("#id").text("新文本")     // 设置文本内容
$("#id").html("<b>加粗</b>") // 设置HTML内容
$("img").attr("src", "new.jpg") // 修改属性

插入元素：

$("p").append("追加内容")    // 在元素内部末尾插入
$("p").prepend("前置内容")   // 在元素内部开头插入

CSS操作

动态修改样式：

$("p").css("color", "red")           // 单个属性
$("p").css({"color":"red", "font-size":"20px"}) // 多个属性

动画效果

基础显示/隐藏：

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

滑动效果：

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

Ajax请求

发送GET请求：

$.get("test.php", {name:"John"}, function(data) {
    alert("返回数据: " + data);
});

发送POST请求：

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

链式调用

jQuery支持方法链式调用：

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

实用工具方法

通用工具函数：

$.trim("  hello  ")       // 去除字符串两端空格
$.each(array, function(index, value) { // 遍历数组
    console.log(index + ": " + value);
});

注意：jQuery 3.0+版本不再支持IE8及以下浏览器。现代开发中，原生JavaScript的querySelector和fetch等API已能实现多数功能，但jQuery在遗留项目维护中仍有广泛使用。