菜单 搜索
首页 前端知识 jQuery 常用方法详解及示例

jQuery 常用方法详解及示例

2024-07-30 22:07:53 前端知识 前端哥 428 429 我要收藏

jQuery 常用方法详解及示例

jQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档操作、事件处理、动画效果以及 AJAX 交互。本文将详细介绍 jQuery 的一些常用方法，并通过示例说明它们的使用方法。

1. 基本选择器和过滤方法

$(selector)

用于选择 DOM 元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器示例</title>
</head>
<body>
    <p>段落 1</p>
    <p>段落 2</p>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("p").css("color", "blue"); // 选择所有段落，并将其文本颜色设置为蓝色
        });
    </script>
</body>
</html>

filter(selector)

筛选出与选择器匹配的元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filter 示例</title>
</head>
<body>
    <p>段落 1</p>
    <p class="selected">段落 2</p>
    <p>段落 3</p>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("p").filter(".selected").css("color", "red"); // 选择具有 'selected' 类的段落，并将其文本颜色设置为红色
        });
    </script>
</body>
</html>

not(selector)

移除与选择器匹配的元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>not 示例</title>
</head>
<body>
    <p>段落 1</p>
    <p class="exclude">段落 2</p>
    <p>段落 3</p>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("p").not(".exclude").css("color", "green"); // 选择不具有 'exclude' 类的段落，并将其文本颜色设置为绿色
        });
    </script>
</body>
</html>

eq(index)

选择具有指定索引值的元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>eq 示例</title>
</head>
<body>
    <p>段落 1</p>
    <p>段落 2</p>
    <p>段落 3</p>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("p").eq(1).css("color", "purple"); // 选择第二个段落，并将其文本颜色设置为紫色
        });
    </script>
</body>
</html>

2. 操作 DOM 元素

html(content)

获取或设置元素的 HTML 内容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html 示例</title>
</head>
<body>
    <div id="content">原始内容</div>
    <button id="changeContent">更改内容</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#changeContent").click(function() {
                $("#content").html("<p>新的内容</p>"); // 设置新的 HTML 内容
            });
        });
    </script>
</body>
</html>

text(content)

获取或设置元素的文本内容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text 示例</title>
</head>
<body>
    <div id="content">原始内容</div>
    <button id="changeContent">更改内容</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#changeContent").click(function() {
                $("#content").text("新的文本内容"); // 设置新的文本内容
            });
        });
    </script>
</body>
</html>

attr(attributeName, value)

获取或设置元素的属性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attr 示例</title>
</head>
<body>
    <img id="image" src="original.jpg" alt="Original Image">
    <button id="changeImage">更改图像</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#changeImage").click(function() {
                $("#image").attr("src", "new.jpg"); // 更改图像的 src 属性
            });
        });
    </script>
</body>
</html>

removeAttr(attributeName)

移除元素的属性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>removeAttr 示例</title>
</head>
<body>
    <img id="image" src="image.jpg" alt="Image" title="Sample Image">
    <button id="removeTitle">移除标题</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#removeTitle").click(function() {
                $("#image").removeAttr("title"); // 移除图像的 title 属性
            });
        });
    </script>
</body>
</html>

addClass(className)

为元素添加一个或多个类。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>addClass 示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p id="paragraph">这是一个段落。</p>
    <button id="highlightBtn">高亮段落</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#highlightBtn").click(function() {
                $("#paragraph").addClass("highlight"); // 添加 'highlight' 类
            });
        });
    </script>
</body>
</html>

removeClass(className)

移除元素的一个或多个类。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>removeClass 示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p id="paragraph" class="highlight">这是一个段落。</p>
    <button id="removeHighlightBtn">移除高亮</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#removeHighlightBtn").click(function() {
                $("#paragraph").removeClass("highlight"); // 移除 'highlight' 类
            });
        });
    </script>
</body>
</html>

toggleClass(className)

切换元素的一个或多个类。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toggleClass 示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p id="paragraph">这是一个段落。</p>
    <button id="toggleHighlightBtn">切换高亮</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#toggleHighlightBtn").click(function() {
                $("#paragraph").toggleClass("highlight"); // 切换 'highlight' 类
            });
        });
    </script>
</body>
</html>

val(value)

获取或设置表单元素的值。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>val 示例</title>
</head>
<body>
    <input type="text" id="textInput" value="原始值">
    <button id="changeValueBtn">更改值</button>
    <button id="getValueBtn">获取值</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#changeValueBtn").click(function() {
                $("#textInput").val("新值"); // 设置新值
            });

            $("#getValueBtn").click(function() {
                alert($("#textInput").val()); // 获取值并弹出
            });
        });
    </script>
</body>
</html>

3. 样式和 CSS

css(propertyName, value)

获取或设置元素的 CSS 属性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 示例</title>
</head>
<body>
    <p id="paragraph">这是一个段落。</p>
    <button id="changeColorBtn">更改颜色</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#changeColorBtn").click(function() {
                $("#paragraph").css("color", "red"); // 设置颜色为红色
            });
        });
    </script>
</body>
</html>

height(value)

获取或设置元素的高度。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>height 示例</title>
</head>
<body>
    <div id="box" style="background-color: lightblue; width: 100px; height: 100px;"></div>
    <button id="changeHeightBtn">更改高度</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#changeHeightBtn").click(function() {
                $("#box").height(200); // 设置高度为 200 像素
            });
        });
    </script>
</body>
</html>

width(value)

获取或设置元素的宽度。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>width 示例</title>
</head>
<body>
    <div id="box" style="background-color: lightblue; width: 100px; height: 100px;"></div>
    <button id="changeWidthBtn">更改宽度</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#changeWidthBtn").click(function() {
                $("#box").width(200); // 设置宽度为 200 像素
            });
        });
    </script>
</body>
</html>

show()

显示匹配的元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show 示例</title>
</head>
<body>
    <p id="paragraph" style="display: none;">这是一个段落。</p>
    <button id="showBtn">显示段落</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#showBtn").click(function() {
                $("#paragraph").show(); // 显示段落
            });
        });
    </script>
</body>
</html>

hide()

隐藏匹配的元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hide 示例</title>
</head>
<body>
    <p id="paragraph">这是一个段落。</p>
    <button id="hideBtn">隐藏段落</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#hideBtn").click(function() {
                $("#paragraph").hide(); // 隐藏段落
            });
        });
    </script>
</body>
</html>

toggle()

切换元素的显示状态。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toggle 示例</title>
</head>
<body>
    <p id="paragraph">这是一个段落。</p>
    <button id="toggleBtn">切换段落显示状态</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#toggleBtn").click(function() {
                $("#paragraph").toggle(); // 切换段落的显示状态
            });
        });
    </script>
</body>
</html>

4. 事件处理

on(event, selector, handler)

为元素及其子元素绑定事件处理程序。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>on 示例</title>
</head>
<body>
    <button class="btn">按钮 1</button>
    <button class="btn">按钮 2</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".btn").on("click", function() {
                alert("按钮被点击！"); // 绑定点击事件
            });
        });
    </script>
</body>
</html>

off(event, selector, handler)

移除事件处理程序。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>off 示例</title>
</head>
<body>
    <button class="btn">按钮 1</button>
    <button class="btn">按钮 2</button>
    <button id="removeEventBtn">移除事件</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            function alertMessage() {
                alert("按钮被点击！");
            }
            $(".btn").on("click", alertMessage); // 绑定点击事件

            $("#removeEventBtn").click(function() {
                $(".btn").off("click", alertMessage); // 移除点击事件
            });
        });
    </script>
</body>
</html>

click(handler)

绑定点击事件处理程序。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>click 示例</title>
</head>
<body>
    <button id="clickBtn">点击我</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#clickBtn").click(function() {
                alert("按钮被点击！"); // 绑定点击事件
            });
        });
    </script>
</body>
</html>

dblclick(handler)

绑定双击事件处理程序。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dblclick 示例</title>
</head>
<body>
    <button id="dblclickBtn">双击我</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#dblclickBtn").dblclick(function() {
                alert("按钮被双击！"); // 绑定双击事件
            });
        });
    </script>
</body>
</html>

hover(handlerIn, handlerOut)

绑定鼠标悬停事件处理程序。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover 示例</title>
    <style>
        #hoverBox {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="hoverBox"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#hoverBox").hover(
                function() {
                    $(this).css("background-color", "yellow

"); // 鼠标悬停时
                },
                function() {
                    $(this).css("background-color", "lightblue"); // 鼠标移开时
                }
            );
        });
    </script>
</body>
</html>

focus(handler)

绑定聚焦事件处理程序。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>focus 示例</title>
</head>
<body>
    <input type="text" id="textInput" value="聚焦我">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#textInput").focus(function() {
                $(this).css("background-color", "yellow"); // 聚焦时改变背景颜色
            });
        });
    </script>
</body>
</html>

blur(handler)

绑定失焦事件处理程序。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blur 示例</title>
</head>
<body>
    <input type="text" id="textInput" value="失焦我">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#textInput").blur(function() {
                $(this).css("background-color", "lightblue"); // 失焦时改变背景颜色
            });
        });
    </script>
</body>
</html>

5. 动画效果

animate(properties, duration, easing, complete)

用于创建自定义动画。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate 示例</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="animateBtn">开始动画</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#animateBtn").click(function() {
                $("#box").animate({
                    left: "200px",
                    height: "200px"
                }, 1000); // 创建自定义动画，动画时间为 1000 毫秒
            });
        });
    </script>
</body>
</html>

fadeIn(duration, complete)

淡入效果。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeIn 示例</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="fadeInBtn">淡入显示</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#fadeInBtn").click(function() {
                $("#box").fadeIn(1000); // 淡入显示，动画时间为 1000 毫秒
            });
        });
    </script>
</body>
</html>

fadeOut(duration, complete)

淡出效果。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeOut 示例</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="fadeOutBtn">淡出隐藏</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#fadeOutBtn").click(function() {
                $("#box").fadeOut(1000); // 淡出隐藏，动画时间为 1000 毫秒
            });
        });
    </script>
</body>
</html>

fadeToggle(duration, complete)

淡入或淡出效果的切换。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeToggle 示例</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="fadeToggleBtn">切换淡入淡出</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#fadeToggleBtn").click(function() {
                $("#box").fadeToggle(1000); // 切换淡入或淡出效果，动画时间为 1000 毫秒
            });
        });
    </script>
</body>
</html>

slideDown(duration, complete)

向下滑动显示元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slideDown 示例</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="slideDownBtn">向下滑动显示</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#slideDownBtn").click(function() {
                $("#box").slideDown(1000); // 向下滑动显示，动画时间为 1000 毫秒
            });
        });
    </script>
</body>
</html>

slideUp(duration, complete)

向上滑动隐藏元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slideUp 示例</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="slideUpBtn">向上滑动隐藏</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#slideUpBtn").click(function() {
                $("#box").slideUp(1000); // 向上滑动隐藏，动画时间为 1000 毫秒
            });
        });
    </script>
</body>
</html>

slideToggle(duration, complete)

向下或向上滑动显示或隐藏元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slideToggle 示例</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="slideToggleBtn">切换滑动显示隐藏</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#slideToggleBtn").click(function() {
                $("#box").slideToggle(1000); // 切换滑动显示或隐藏效果，动画时间为 1000 毫秒
            });
        });
    </script>
</body>
</html>

6. AJAX

$.ajax(options)

执行 AJAX 请求。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.ajax 示例</title>
</head>
<body>
    <button id="loadDataBtn">加载数据</button>
    <div id="dataContainer"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#loadDataBtn").click(function() {
                $.ajax({
                    url: "data.json", // 数据源 URL
                    method: "GET",
                    dataType: "json",
                    success: function(data) {
                        $("#dataContainer").html(JSON.stringify(data)); // 显示数据
                    },
                    error: function() {
                        alert("加载数据失败！");
                   

 }
                });
            });
        });
    </script>
</body>
</html>

$.get(url, data, success)

使用 HTTP GET 请求从服务器加载数据。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.get 示例</title>
</head>
<body>
    <button id="loadDataBtn">加载数据</button>
    <div id="dataContainer"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#loadDataBtn").click(function() {
                $.get("data.json", function(data) {
                    $("#dataContainer").html(JSON.stringify(data)); // 显示数据
                }).fail(function() {
                    alert("加载数据失败！");
                });
            });
        });
    </script>
</body>
</html>

$.post(url, data, success)

使用 HTTP POST 请求向服务器发送数据并获取响应。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.post 示例</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="name" placeholder="姓名">
        <input type="email" name="email" placeholder="电子邮件">
        <button type="submit">提交</button>
    </form>
    <div id="responseContainer"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#myForm").submit(function(event) {
                event.preventDefault(); // 阻止表单默认提交行为
                $.post("submit.php", $(this).serialize(), function(response) {
                    $("#responseContainer").html(response); // 显示响应
                }).fail(function() {
                    alert("提交数据失败！");
                });
            });
        });
    </script>
</body>
</html>

$.getJSON(url, data, success)

使用 HTTP GET 请求从服务器加载 JSON 编码的数据。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.getJSON 示例</title>
</head>
<body>
    <button id="loadDataBtn">加载数据</button>
    <div id="dataContainer"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#loadDataBtn").click(function() {
                $.getJSON("data.json", function(data) {
                    $("#dataContainer").html(JSON.stringify(data)); // 显示数据
                }).fail(function() {
                    alert("加载数据失败！");
                });
            });
        });
    </script>
</body>
</html>

$.getScript(url, success)

使用 HTTP GET 请求加载并执行 JavaScript 文件。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.getScript 示例</title>
</head>
<body>
    <button id="loadScriptBtn">加载脚本</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#loadScriptBtn").click(function() {
                $.getScript("script.js", function() {
                    alert("脚本加载并执行成功！");
                }).fail(function() {
                    alert("加载脚本失败！");
                });
            });
        });
    </script>
</body>
</html>

这些是 jQuery 提供的一些常用方法。通过这些方法，你可以更方便地操作 DOM 元素、处理事件、创建动画效果以及与服务器进行交互。掌握这些方法将极大提高你的前端开发效率。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/14635.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！