JQuery最全常用方法指南，前端开发架构

在前端开发中，jQuery是一个非常流行的JavaScript库，它简化了许多常见的JavaScript任务。以下是一些最常用的jQuery方法：

$(document).ready(): 当DOM完全加载并可以操作时执行一段脚本。




$(document).ready(function() {
    // 在这里编写你的代码
});

$(selector).click(function): 为一个元素的点击事件绑定处理函数。




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

$(selector).hover(functionIn, functionOut): 当鼠标指针悬停在元素上时执行一个函数，当鼠标指针离开元素时执行另一个函数。




$("#myElement").hover(
    function() {
        // 鼠标悬停时执行
        $(this).css("background-color", "yellow");
    }, 
    function() {
        // 鼠标离开时执行
        $(this).css("background-color", "white");
    }
);

$(selector).toggle(function, function): 每次点击元素时切换执行两个以上的函数。




$("#myButton").toggle(
    function() {
        // 第一次点击时执行
        $(this).css("background-color", "red");
    }, 
    function() {
        // 再次点击时执行
        $(this).css("background-color", "blue");
    }
);

$(selector).show() 和 $(selector).hide(): 控制元素的显示和隐藏。




$("#myElement").show();  // 显示元素
$("#myElement").hide();  // 隐藏元素

$(selector).fadeIn() 和 $(selector).fadeOut(): 通过淡入或淡出动画显示或隐藏元素。




$("#myElement").fadeIn();  // 淡入元素
$("#myElement").fadeOut(); // 淡出元素

$(selector).slideDown() 和 $(selector).slideUp(): 通过上下滑动动画显示或隐藏元素。




$("#myElement").slideDown();  // 向下滑动显示元素
$("#myElement").slideUp();    // 向上滑动隐藏元素

$(selector).text(): 获取或设置匹配元素集合中第一个元素的文本内容。




var text = $("#myElement").text(); // 获取文本内容
$("#myElement").text("新文本");    // 设置文本内容

$(selector).val(): 获取或设置匹配元素集合中第一个元素的值。




var value = $("#myInput").val(); // 获取输入框的值
$("#myInput").val("新值");       // 设置输入框的值

$(selector).css(propertyName, value): 在匹配的元素集中设置一个或多个样式属性。




$("#myElement").css("background-color", "yellow"); // 设置背景颜色

$(selector).addClass(className) 和 $(selector).removeClass(className): 向匹配的元素添加或删除一个或多个类。




$("#myElement").addClass("myClass"); // 添加类
$("#myElement").removeClass("myClass"); // 移除类

$(selector).append(content): 把内容添加到每个匹配元素的内部末尾处。




$("#myElement").append("<p>新段落</p>"

JQuery最全常用方法指南，前端开发架构

评论已关闭

推荐阅读