jquery教程

jQuery 简介

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。其核心特点是“写得更少，做得更多”（Write Less, Do More），兼容主流浏览器。

安装 jQuery

从官方 CDN 引入最新版本（以 3.7.1 为例）：

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

或下载本地文件：

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

基础语法

通过 $() 或 jQuery() 选择元素并执行操作：

$(document).ready(function() {  
    // 文档加载完成后执行  
    $("button").click(function() {  
        $("p").hide(); // 隐藏所有 <p> 元素  
    });  
});  

常用方法

选择器

$("#id")          // ID 选择器  
$(".class")       // 类选择器  
$("div")          // 标签选择器  
$("div p")        // 后代选择器  

DOM 操作

$("#el").text("新内容")    // 修改文本  
$("#el").html("<b>加粗</b>") // 修改 HTML  
$("#el").val()            // 获取表单值  
$("#el").attr("href")     // 获取属性  

事件处理

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

$(window).resize(function() {  
    console.log("窗口大小改变");  
});  

动画效果

$("#box").hide(1000);          // 淡出  
$("#box").show("slow");        // 淡入  
$("#box").toggle();            // 切换显示状态  
$("#box").fadeTo(500, 0.5);    // 透明度渐变  

Ajax 示例

$.ajax({  
    url: "data.json",  
    method: "GET",  
    success: function(data) {  
        console.log(data);  
    },  
    error: function(error) {  
        console.error("请求失败:", error);  
    }  
});  

链式调用

jQuery 支持链式写法：

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

插件扩展

通过 $.fn 扩展自定义方法：

$.fn.highlight = function() {  
    this.css("background", "yellow");  
    return this; // 保持链式调用  
};  

$("p").highlight();  

学习资源推荐

• 官方文档：jQuery API Documentation
• 交互式教程：Codecademy jQuery 课程
• 书籍：《jQuery in Action》

jQuery 虽然逐渐被现代框架取代，但在维护旧项目或快速原型开发中仍有广泛应用。