当前位置：首页 > jquery

jquery编程

2026-03-16 22:10:54jquery

jQuery 编程基础

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。以下是核心功能和使用方法。

引入 jQuery

通过 CDN 引入最新版本的 jQuery：

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

选择器

jQuery 使用 CSS 选择器定位 DOM 元素：

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

DOM 操作

动态修改元素内容和属性：

$("#element").text("新文本");      // 修改文本  
$("#element").html("<b>加粗</b>"); // 修改 HTML  
$("#element").attr("href", "url"); // 修改属性  
$("#element").addClass("active");  // 添加类

事件处理

绑定和触发事件：

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

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

动画效果

内置动画方法：

$("#box").hide(500);               // 隐藏元素  
$("#box").show(500);               // 显示元素  
$("#box").fadeIn(500);             // 淡入  
$("#box").animate({left: "250px"}); // 自定义动画

Ajax 请求

异步加载数据：

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

jQuery 插件开发

扩展 jQuery 功能：

jquery编程

(function($) {  
    $.fn.myPlugin = function(options) {  
        const settings = $.extend({  
            color: "red",  
            text: "插件默认文本"  
        }, options);  

        return this.each(function() {  
            $(this).css("color", settings.color).text(settings.text);  
        });  
    };  
})(jQuery);  

// 使用插件  
$("#element").myPlugin({ color: "blue" });