jquery编程

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 功能：

(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" });  

性能优化建议

• 缓存选择器结果：var $element = $("#element");
• 使用事件委托减少绑定次数：$("#parent").on("click", ".child", handler);
• 链式调用减少 DOM 操作：$("#element").addClass("cls").show();

jQuery 的链式语法和跨浏览器兼容性使其在传统项目中仍有广泛应用，但现代开发中可结合原生 JavaScript 或框架（如 React、Vue）使用。