学习jQuery初级中级高级用法 一篇就够了_jquery-3

$(document).ready(function() {
    // 示例1: 点击按钮时隐藏或显示一个段落
    $("#hideButton").click(function() {
        $("#myParagraph").toggle();
    });
 
    // 示例2: 输入框获得焦点时改变其背景色
    $("#myInput").focusin(function() {
        $(this).css("background-color", "yellow");
    });
 
    // 示例3: 当鼠标悬停在一个图片上时，改变其透明度
    $("img").mouseenter(function() {
        $(this).fadeTo(200, 0.5); // 半透明
    });
 
    // 示例4: 使用jQuery动态创建一个列表项
    var $newListItem = $("<li>新的列表项</li>");
    $("ul").append($newListItem);
 
    // 示例5: 使用jQuery AJAX加载外部内容
    $("#loadButton").click(function() {
        $("#myDiv").load("external.html");
    });
 
    // 示例6: 使用jQuery each函数遍历一个集合
    $("p").each(function(index) {
        $(this).html("段落 " + index);
    });
 
    // 示例7: 使用jQuery的serialize()函数序列化表单数据
    $("#myForm").submit(function(event) {
        event.preventDefault(); // 阻止表单的默认提交行为
        var formData = $(this).serialize();
        console.log(formData);
    });
});

这个代码实例展示了如何使用jQuery来处理常见的DOM操作、事件绑定、动画、AJAX请求以及遍历集合。每个示例都是独立的，并且都包含了必要的注释。通过这个例子，开发者可以学习到jQuery的基本用法和高级技巧。