JQuery最全常用方法指南

在这个指南中，我们将介绍一些在日常开发中最常用的jQuery方法。

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

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

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

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

3. $(selector).change(function): 当元素的值发生改变时触发。

$("#mySelect").change(function() {
    alert("选项改变了！");
});

4. $(selector).hover(enterFunction, leaveFunction): 当鼠标指针放在元素上时执行一个函数，当鼠标指针离开元素时执行另一个函数。

$("#myDiv").hover(
    function() {
        $(this).addClass("hovered");
    }, 
    function() {
        $(this).removeClass("hovered");
    }
);

5. $(selector).focus(function): 当元素获得焦点时触发。

$("#myInput").focus(function() {
    $(this).addClass("focused");
});

6. $(selector).blur(function): 当元素失去焦点时触发。

$("#myInput").blur(function() {
    $(this).removeClass("focused");
});

7. $(selector).each(function): 遍历一个jQuery对象集合，为每个匹配元素执行一个函数。

$("p").each(function(index) {
    $(this).text("这是第" + index + "个段落。");
});

8. $(selector).show(): 显示匹配的元素集合。

$("#myDiv").show();

9. $(selector).hide(): 隐藏匹配的元素集合。

$("#myDiv").hide();

10. $(selector).toggle(): 切换元素的可见状态。

$("#myDiv").toggle();

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

alert($("#myDiv").text()); // 获取文本内容
$("#myDiv").text("新文本内容"); // 设置文本内容

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

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

13. $(selector).attr(): 获取或设置匹配元素集合的属性值。

alert($("#myImage").attr("src")); // 获取图片的src属性
$("#myImage").attr("src", "newImage.jpg"); // 设置图片的src属性

14. $(selector).css(propertyNameOrObject, value): 获取或设置匹配元素集合的CSS属性。

alert($("#myDiv").css("color")); // 获取颜色属性
$("#myDiv").css("color", "red"); // 设置颜色属性

15. $(selector).append(content): 在匹配元素内部的末尾插入内容。

$("#myDiv").append("<p>新段落。</p>");

16. $(selector).empty(): 移除匹配元素集合中的所有子节点。

$("#myDiv").empty();