jquery笔记

jQuery 简介

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。

jQuery 基本语法

$(selector).action()

• $ 是 jQuery 的别名
• selector 用于选择 HTML 元素
• action() 是对选中元素执行的操作

常用选择器

$("#id")          // ID 选择器  
$(".class")       // 类选择器  
$("element")      // 标签选择器  
$("parent child") // 后代选择器  

DOM 操作

$("#demo").text("Hello")     // 设置文本内容  
$("#demo").html("<b>Hi</b>") // 设置 HTML 内容  
$("#demo").val()             // 获取表单元素的值  
$("#demo").attr("href")      // 获取属性值  

事件处理

$("#btn").click(function() {  
    alert("Clicked");  
});  

$(document).ready(function() {  
    // 文档加载完成后执行  
});  

动画效果

$("#box").hide()       // 隐藏元素  
$("#box").show()       // 显示元素  
$("#box").fadeIn()     // 淡入  
$("#box").fadeOut()    // 淡出  
$("#box").slideUp()    // 向上滑动隐藏  
$("#box").slideDown()  // 向下滑动显示  

Ajax 请求

$.ajax({  
    url: "data.json",  
    method: "GET",  
    success: function(data) {  
        console.log(data);  
    },  
    error: function(err) {  
        console.log("Error:", err);  
    }  
});  

链式调用

jQuery 支持链式调用，多个操作可以连在一起执行：

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

实用方法

$.each(array, function(index, value) {  
    console.log(index, value);  
});  

$.trim("  text  ")  // 去除字符串两端空格  

注意事项

• 避免过度使用 jQuery，现代 JavaScript（ES6+）已能实现许多功能。
• 使用 $(document).ready() 确保 DOM 加载完成后再执行脚本。
• 注意选择器性能，优先使用 ID 或类选择器。

以上是 jQuery 的核心功能和常见用法，适合快速上手和日常开发参考。