jQuery基础语法

已于 2022-10-08 10:38:56 修改
阅读量853 收藏 1
点赞数 2
分类专栏： 前端 文章标签： jquery javascript css
于 2022-09-27 16:37:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62486602/article/details/127073714
版权

文章目录

jQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单
write less,do more.

选择器

基础选择器

名称语法构成
类选择器$(“.class”)
元素选择器$(“element”)
ID选择器$(“#id”)
子元素选择器$(“parent > child”)
后代元素选择器$(“parent child”)
类，元素，ID

JavaScript实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="box">类选择器</div>
    <div class="box">类选择器</div>
    <span>元素选择器</span>
    <a id="it" href="#">ID选择器</a>

    <script>

        // 类选择器
        var div1 = document.getElementsByClassName("box")[0]
        var div2 = document.getElementsByClassName("box")[1]
        div1.innerHTML = "JS类选择器1"
        div2.innerHTML = "JS类选择器2"

        // 元素选择器
        var span = document.getElementsByTagName("span")[0]
        span.innerHTML = "JS元素选择器"

        // ID选择器(ID是唯一的)
        var a = document.getElementById("it");
        a.innerHTML = "JSID选择器"

    </script>
    
</body>

jQuery实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>

    <div class="box">类选择器</div>
    <div class="box">类选择器</div>
    <span>元素选择器</span>
    <a id="it" href="#">ID选择器</a>


    <script>

        // $就是jQuery的缩写，他就代表了jQuery
        // 类选择器
        $(".box").html("jQuery类选择器")

        // 元素选择器
        $("span").html("jQuery元素选择器")

        // ID选择器
        $("#it").html("jQuery ID选择器")
    </script>
    
</body>
</html>
子元素选择器,后代元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>

    <ul class="topnav">
        <li>Item 1</li>
        <li>
            <ul>
                <li>child item 1</li>
                <li>child item 2</li>
                <li>child item 3</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>

    <script>

        // jQuery子元素选择器 
        //选择所有指定“parent”元素中指定的"child"的直接子元素
        // .css(样式属性，样式属性值)
        // $(".topnav > li").css("border","3px solid red")

        // jQuery后代元素选择器 
        //选择所有指定“parent”元素中指定的"child"的后代元素
        $(".topnav li").css("border","3px solid red")


    </script>
    
</body>
</html>

属性选择器

语法构成描述
[name=“value”]完美匹配
[name|=“value”]前缀
[name*=“value”]包含
[name^=“value”]开头
[name$=“value”]结尾
[name~=“value”]空格

属性选择器有很多操作方式（6个）

[name=“value”]

选择指定属性是给定值的元素

name: 选中的属性

value: 属性值

<body>
    <div>
        <input type="radio" name="user" value="username">
        <span>name</span>
    </div>
    <div>
        <input type="radio" name="user" value="age">
        <span>age</span>
    </div>
    <script>

        //  利用属性选择器：选中第一个input，修改对应的span文本：name -> username
        //  next(): 找到同级的下一个标签
        //  html() === innerHTML
        $("input[value='username']").next().html("useranme");
    </script>
</body>
[name|=“value”]

选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <a href="#" alt="abc">abc</a>
    <a href="#" alt="abc-d">abc-d</a>
    <a href="#" alt="abcd">abcd</a>

    <script>
        //  1. 属性选择器，完美匹配或者前缀匹配(-)
        $('a[alt|="abc"]').css("border","2px solid red")
    </script>
</body>
</html>
[name*=“value”]

选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）

<body>
    <a href="#" alt="abc">abc</a>
    <a href="#" alt="abc-defg">abc-defg</a>
    <a href="#" alt="abcdefg">abcdefg</a>
    <a href="#" alt="defg">defg</a>
    <script>
        //  属性选择器，匹配包含关系即可  匹配abc
        $("a[alt*='abc']").css("border","2px solid red")
    </script>
</body>
</html>
[name~=“value”]

选择指定属性用空格分隔的值中包含一个给定值的元素

<body>
    <input type="text" name="abcdefg">
    <input type="text" name="abc defg">
    <input type="text" name="defgabchi">

    <script>
        // 属性选择器，空格隔开的独立的单词可以匹配  匹配abc
        $("input[name~='abc']").css("border","2px solid red")
    </script>
</body>
[name$=“value”]

选择指定属性是以给定值结尾的元素。这个比较是区分大小写的

<body>
    <input name="abc-defg" />   
    <input name="abc defg" />
    <input name="defgabc" />
    <script>
        // 属性选择器，匹配给定结尾的字符串 匹配abc
        $("input[name$='abc']").css("border","2px solid red")
    </script>
</body>
[name^=“value”]

选择指定属性是以给定字符串开始的元素

<body>
    <input name="abc-defg" />   
    <input name="abc defg" />
    <input name="defgabc" />

    <script>
        // 属性选择器，匹配开头元素  匹配abc
        $("input[name^='abc']").css("border","2px solid red")
    </script>
</body>

jQuery扩展选择器

语法构成描述
:eq(index)在匹配的集合中选择索引值为index的元素。
:even选择索引值为偶数的元素
:odd选择索引值为奇数的元素
:first选择第一个匹配的元素
:last选择最后一个匹配的元素
:gt(index)选择匹配集合中所有大于给定index（索引值）的元素。
:lt(index)选择匹配集合中所有小于给定index（索引值）的元素。
:eq(index)

在匹配的集合中选择索引值为index的元素。

温馨提示

index下标计算是从0开始的

<body>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    
    <script>
        // jquery 扩展选择器：:eq(index)  index：下标从0开始  选中第三个li标签
        $("li:eq(2)").css("border","2px solid red")
    </script>
</body>
:even

选择所引值为偶数的元素

特别注意

这是基于0的索引，所以:even选择器是选择第一个元素，第三个元素，依此类推在匹配。

<body>
    <table border="1">
        <tr>
            <td>Row with Index #0</td>
        </tr>
        <tr>
            <td>Row with Index #1</td>
        </tr>
        <tr>
            <td>Row with Index #2</td>
        </tr>
        <tr>
            <td>Row with Index #3</td>
        </tr>
    </table>

    <script>
        // jquery扩展选择器，even偶数选择器  注意，从0开始
        $("tr:even").css("background-color","red")
    </script>
</body>
:odd

选择索引值为奇数元素

特别注意

这是基于0的索引，所以:odd选择器是选择第二个元素，第四个元素，依此类推在匹配。

<body>
    <table border="1">
        <tr>
            <td>Row with Index #0</td>
        </tr>
        <tr>
            <td>Row with Index #1</td>
        </tr>
        <tr>
            <td>Row with Index #2</td>
        </tr>
        <tr>
            <td>Row with Index #3</td>
        </tr>
    </table>
    
    <script>
        // jquery扩展选择器，even偶数选择器  注意，从0开始
        $("tr:odd").css("background-color","red")
    </script>
</body>
:first

选择第一个匹配的元素

<body>
  <table border="1">
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
  </table>
  <script>$("tr:first").css("background-color", "red");</script>
</body>
:last

选择最后一个匹配的元素

<body>
  <table border="1">
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
  </table>
  <script>$("tr:last").css("background-color", "red");</script>
</body>
:gt(index)

选择匹配集合中所有大于给定index（索引值）的元素。

<body>
  <table border="1">
    <tr>
      <td>TD #0</td>
      <td>TD #1</td>
      <td>TD #2</td>
    </tr>
    <tr>
      <td>TD #3</td>
      <td>TD #4</td>
      <td>TD #5</td>
    </tr>
    <tr>
      <td>TD #6</td>
      <td>TD #7</td>
      <td>TD #8</td>
    </tr>
  </table>
  <script>
    $("td:gt(4)").css("backgroundColor", "yellow");
  </script>
</body>
:lt(index)

选择匹配集合中所有索引值小于给定index参数的元素

<body>
  <table border="1">
    <tr>
      <td>TD #0</td>
      <td>TD #1</td>
      <td>TD #2</td>
    </tr>
    <tr>
      <td>TD #3</td>
      <td>TD #4</td>
      <td>TD #5</td>
    </tr>
    <tr>
      <td>TD #6</td>
      <td>TD #7</td>
      <td>TD #8</td>
    </tr>
  </table>
  <script>
    $("td:lt(4)").css("backgroundColor", "yellow");
  </script>
</body>

DOM操作

Class操作

语法描述
.addClass()给元素添加class
.removeClass()移除元素中每个匹配元素上一个，多个或全部样式
.toggleClass()存在删除，不存在添加
.hasClass()判断一个元素上是否具有某个class
addClass()

给元素添加class，值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

$("p").addClass("myClass");

也可以同时添加多个class

$("p").addClass("myClass1 myClass2");
removeClass()

移除元素中每个匹配元素上一个，多个或全部样式

通过class名字移除元素

$('p').removeClass('myClass yourClass')

移除全部class

$('p').removeClass()

配合addClass() 一起使用用来切换元素的样式

$('p').removeClass('myClass noClass').addClass('yourClass');
toggleClass()

这是一个开关方法，如果class存在则删除，如果class不存在则添加

$('#foo').toggleClass(className, addOrRemove);
hasClass()

判断一个元素上是否具有某个class

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gt demo</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="mydiv" class="foo bar"></div>
  <script>
    var flag = $('#mydiv').hasClass('foo')
    if(flag){
      $('#mydiv').html("div具有foo class")
     }
  </script>
</body>
</html>

文本和属性操作

语法描述
.html()获取元素中的HTML内容
.text()获取元素中的HTML内容
.val()用于获取<input>标签中的内容
.attr()获取匹配的元素的属性的值 或 设置匹配元素的一个或多个属性
.removeAttr()为匹配的元素集合中的每个元素中移除一个属性
html()

获取元素中的HTML内容

$('div.demo-container').html();

html()方法还可以设置元素的html内容

$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');
val()

用于获取<input>标签中的内容

$(".input").val();

也可以设置<input>标签内容

$(".input").val("username")
attr()

获取匹配的元素的属性的值 或 设置匹配元素的一个或多个属性

<body>
    <img class="img1" src="./1.jpg" alt="小姐姐">
    <img class="img2" src="" alt="">
    
    <script>
        var content = $(".img1").attr("alt");
        $(".img2").attr("src","./1.jpg")
        
        // 同时设置多个属性
        $(".img2").attr({
            src:"./1.jpg",
            alt:"美女",
            title:"小姐姐"
        })
    </script>
    
</body>
removeAttr()

为匹配的元素集合中的每个元素中移除一个属性（attribute）

img.removeAttr("title")

DOM 插入并包裹现有内容

语法描述
.wrap()在每个匹配的元素外层包上一个html元素
.unwrap()将匹配元素集合的父级元素删除，保留自身在原来的位置
.wrapAll()在所有匹配元素外面包一层HTML结构
.wrapInner()在所有匹配元素外面包一层HTML结构
.wrap()

在每个匹配的元素外层包上一个html元素

<body>
    <p id="text">Hello</p>
    <p>World</p>

    <script>
        // 创建一个div容器，包裹p标签
        $("#text").wrap("<div class='container'></div>");
    </script>
</body>
.unwrap()

将匹配元素集合的父级元素删除，保留自身在原来的位置

<body>
    <div>
        <p id="text">Hello</p>
    </div>
    <div>
        <p>Hello</p>
    </div>

    <script>
        // 删除p标签的父级元素
        $("#text").unwrap();
    </script>
    
</body>
.wrapAll()

在所有匹配元素外面包一层HTML结构

<body>
    <p>齐世浩</p>
    <p>好好学习</p>
    <span>Hello</span>
    <p>web</p>

    <script>
        // 将三个p标签包裹在一个容器中div
        $("p").wrapAll("<div></div>");
    </script>
    
</body>
.wrapInner()

在匹配元素里的内容外包一层结构

<body>
    <p><a>Hello</a></p>

    <script>    
        // 包裹p标签里的内容
        $("p").wrapInner("<i></i>");
    </script>
</body>

DOM 插入现有元素内

语法描述
.append()在每个匹配元素里面的末尾处插入参数内容
.prepend()将参数内容插入到每个匹配元素的前面（元素内部）
.append()

在每个匹配元素里面的末尾处插入参数内容

<body>
  <p>I would like to say: </p>
    
  <script>
    $("p").append("<strong>I love u</strong>");
  </script>
</body>
.prepend()

将参数内容插入到每个匹配元素的前面（元素内部）

<body>
  <p>,齐世浩</p>
  <script>
    $("p").prepend("<strong>Hello</strong>");
  </script>
</body>

DOM 插入现有元素外

语法描述
.after()在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
.before()根据参数设定，在匹配元素的前面插入内容，作为其兄弟节点
.after()

在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点

<body>
  <p>I would like to say: </p>
  <script>$("p").after("<b>Hello</b>");</script>
</body>
.before()

根据参数设定，在匹配元素的前面插入内容，作为其兄弟节点

<body>
  <p>I would like to say: </p>
  <script>$("p").before("<b>Hello</b>");</script>
</body>

DOM移除和替换

DOM 移除

从 DOM 树中删除元素

语法描述
.empty()从DOM中移除集合中匹配元素的所有子节点
.remove()将匹配元素集合从DOM中删除
.empty()

从DOM中移除集合中匹配元素的所有子节点

<body>
    <div id="box">
        <p>Hello</p>
        <span>Wrold</span>
    </div>

    <script>
        // 清空div中的内容：empty
        $("#box").empty();
    </script>
</body>
.remove()

将匹配元素集合从DOM中删除

<body>
  <p>Hello</p>
  <script>
    $("p").remove();
  </script>
</body>

DOM 替换

从 DOM 树中移除已有的内容并将其替换为新内容

语法描述
.replaceAll()用集合的匹配元素替换每个目标元素
.replaceWith()用提供的内容替换集合中所有匹配的元素
.replaceAll()

用集合的匹配元素替换每个目标元素

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>Hello</p>
  <script>
    $("<b>World</b>").replaceAll("p");
  </script>
</body>
</html>
.replaceWith()

用提供的内容替换集合中所有匹配的元素

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>Wrold</p>
  <script>
    $("p").replaceWith("<div>Hello</div>");
  </script>
</body>
</html>

CSS操作

大小

语法描述
.css获取和设置匹配元素的样式
.height() & .width()获取元素的当前高度值宽度值或设置元素的高度值宽度值
.innerHeight() & .innerWidth()为元素的当前计算高度值和宽度值,包括padding，但是不包括border
.outerHeight() & .outerWidth()获取元素的当前宽度值和高度值,包括padding，border和选择性的margin
.css()

获取和设置匹配元素的样式

获取样式值

<body>
    <div class="box"></div>
    <div class="container"></div>

    <script>
        // 通过.css获取当前元素的样式
        var color = $(".box").css("background-color");

        $(".container").css("height","200px")

        $(".container").css({
            width:"200px",
            height:"200px",
            // 如果涉及到-的形式，写成驼峰命名法：font-size -> fontSize
            backgroundColor:"green"
        })
    </script>
</body>
.height()，.width()

获取元素的当前高度值宽度值或设置元素的高度值宽度值

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

    <script>   
        // 获取box1宽度和高度
        var width = $(".box1").width();
        var height = $(".box1").height();
        console.log(width,height);
        // 设置box2的宽度和高度  链式调用
        $(".box2").width(200).height(200);
    </script>
</body>
</html>
.innerHeight()，.innerWidth()

为元素的当前计算高度值和宽度值,包括padding，但是不包括border

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 5px solid red;
      margin: 10px;
      background: rgb(255, 140, 0);
     }
  </style>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div></div>
  <script>
     // innerHeight和innerWidth获取一个元素的宽度高度+padding
    var currentHeight = $("div").innerHeight();
    var currentWidth = $("div").innerWidth();
    console.log(currentHeight,currentWidth);
  </script>
</body>
</html>
.outerHeight()，.outerWidth()

获取元素的当前宽度值和高度值,包括padding，border和选择性的margin

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 20px;
            border: 10px solid green;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
        // 获取一个div的宽度高度+padding+border
        var height1 = $(".box").outerHeight();
        var width1 = $(".box").outerWidth();
        console.log(height1,width1); // 260 260

        //  获取一个div的宽度高度+padding+border+margin
        var height2 = $(".box").outerHeight(true);
        var width2 = $(".box").outerWidth(true);
        console.log(height2,width2); // 320 320
    </script>
</body>
</html>

位置

语法描述
.offset()获取元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档
.position()获取元素的当前坐标，相对于offset parent的坐标
.scrollLeft(), & .scrollTop()获取元素的当前水平和垂直滚动条的位置。设置每个匹配元素的水平和垂直滚动条位置
.offset()

获取元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档

获取位置

<!DOCTYPE html>
<html>
<head>
  <style>
     *{
      margin: 0;
      padding: 0;
     }
    p {
      margin: 10px;
     }
  </style>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p class="text1">Hello</p>
  <p class="text2"></p>
  <script>
    var offset = $(".text1").offset();
    $(".text2").html("left: " + offset.left + ", top: " + offset.top);
  </script>
</body>
</html>

设置位置

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
     }
  </style>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div></div>
  <script>
    $("div").offset({ top: 100, left: 100 });
  </script>
</body>
</html>
.position()

获取元素的当前坐标，相对于offset parent的坐标

温馨提示

.position()方法可以取得元素相对于父元素的偏移位置。与.offset()不同, .offset()是获得该元素相对于documet的当前坐标 当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。

获取位置

<!DOCTYPE html>
<html>
<head>
  <style>
     *{
      margin: 0;
      padding: 0;
     }
    .container{
      width: 300px;
      height: 200px;
      border: 2px solid #000;
      margin-left: 100px;
      position: relative;
     }
    .box {
      width: 100px;
      height: 100px;
      padding: 15px;
      background-color: red;
      position: absolute;
      left: 10px;
      top: 10px;
     }
  </style>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
  <p class="text1"></p>
  <p class="text2"></p>
  <script>
    var position = $(".box").position();
    var offset = $(".box").offset();
    $(".text1").text("left: " + position.left + ", top: " + position.top);
    $(".text2").text("left: " + offset.left + ", top: " + offset.top);
  </script>
</body>
</html>
.scrollLeft(), .scrollTop()

获取元素的当前水平和垂直滚动条的位置。设置每个匹配元素的水平和垂直滚动条位置

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      background: #CCCCCC;
      border: 3px solid #666666;
      margin: 5px;
      padding: 5px;
      width: 200px;
      height: 200px;
      overflow: auto;
     }
    p {
      margin: 10px;
      padding: 5px;
      border: 2px solid #666;
      width: 1000px;
      height: 1000px;
     }
  </style>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>itbaizhan</h1>
    <p>sxt</p>
  </div>
  <span class="text"></span>
  <script>
    $(".container").scrollLeft(300);
    var scrollLeft = $(".container").scrollLeft();
    console.log(scrollLeft);
  </script>
</body>
</html>

事件

绑定事件处理器

语法描述
.on()在选定的元素上绑定一个或多个事件处理函数
.one()为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
.off()移除一个事件处理函数，移除on事件处理器
.on()

在选定的元素上绑定一个或多个事件处理函数

$("#button").on("click", function(event){
  console.log("事件处理器")
});

事件委托

$("#ul").on("click", "li", function(event){
 console.log($(this).text());
});
.one()

为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次

$("#btn").one("click", function() {
 console.log("这是一个只能触发一次的事件.");
});
.off()

移除一个事件处理函数，移除on事件处理器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn1">添加事件按钮</button>
  <button id="btn2">删除事件按钮</button>
  <button id="btn3">按钮</button>
  <script>
    function aClick() {
      console.log("点击事件")
     }
    $("#btn1").on("click",function () {
      $("#btn3").on("click", aClick);
     });
    $("#btn2").on("click",function () {
      $("#btn3").off("click", aClick);
     });
  </script>
</body>
</html>

鼠标事件

语法描述
.click()为 JavaScript 的"click" 事件绑定一个处理器，或者触发元素上的 “click” 事件
.hover()将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行
.mouseenter()鼠标进入事件(不冒泡)
.mouseleave()鼠标离开事件(不冒泡)
.mousemove()鼠标滑动事件
.mouseover()鼠标进入事件 (冒泡)
.mouseout鼠标进入事件(冒泡)
.click()

为 JavaScript 的"click" 事件绑定一个处理器，或者触发元素上的 “click” 事件

$("#btn").click(function() {
 alert("点击事件");
});
.hover()

将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行

$("li").hover(
 // 滑入
 function () {
  console.log("滑入")
  },
 // 滑出
 function () {
  console.log("滑出")
  }
);
.mouseenter()

鼠标进入事件

$("div").mouseenter(function(){
  console.log("鼠标进入事件");
})
.mouseleave()

鼠标离开事件

$("div").mouseleave(function(){
  console.log("鼠标进入事件");
})
.mousemove()

鼠标滑动事件

$("div").mousemove(function(){
  console.log("鼠标进入事件");
})
.mouseover()

鼠标进入事件（注：支持事件冒泡）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
  <style>
    .container{
      width: 200px;
      height: 200px;
      background-color: red;
     }
    .box{
      width: 100px;
      height: 100px;
      background-color: green;
     }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
  <script>
    $(".container").mouseover(function(){
      console.log("鼠标进入事件container");
     })
    $(".box").mouseover(function(){
      console.log("鼠标进入事件box");
     })

  </script>
</body>
</html>
.mouseout()

鼠标离开事件（注：支持事件冒泡）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
  <style>
    .container{
      width: 200px;
      height: 200px;
      background-color: red;
     }
    .box{
      width: 100px;
      height: 100px;
      background-color: green;
     }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
  <script>
    $(".container").mouseout(function(){
      console.log("鼠标离开事件container");
     })
    $(".box").mouseout(function(){
      console.log("鼠标离开事件box");
     })
  </script>
</body>
</html>

表单事件

语法描述
.focus()为 JavaScript 的 “focus” 事件绑定一个获取焦点处理函数，或者触发元素上的 “focus” 事件
.blur()为 “blur” 事件绑定一个失去焦点处理函数
.change()为JavaScript 的 “change” 事件绑定一个表单改变处理函数
.submit()当用户提交表单时，就会在这个表单元素上触发submit事件。它只能绑定在<form>元素上
.focus()

为 JavaScript 的 “focus” 事件绑定一个获取焦点处理函数，或者触发元素上的 “focus” 事件

$('#input').focus(function() {
 alert('获得焦点事件');
});
.blur()

为 “blur” 事件绑定一个失去焦点处理函数

$('#other').click(function() {
 $('#target').blur();
});
.change()

为JavaScript 的 “change” 事件绑定一个表单改变处理函数

$('.target').change(function() {
 alert('内容改变');
});
.submit()

当用户提交表单时，就会在这个表单元素上触发submit事件。它只能绑定在<form>元素上

$('#target').submit(function() {
 alert('表单提交事件');
});

键盘事件

语法描述
.keydown()添加键盘按下事件
.keypress()添加键盘事件 (相当于kedown和keyup合体)
.keyup()添加键盘抬起事件
.keydown()

添加键盘按下事件

<body>
  <input type="text" class="username">
  <script>
    $(".username").keydown(function(){
      console.log("键盘");
     })
  </script>
</body>
.keypress()

添加键盘事件

<body>
  <input type="text" class="username">
  <script>
    $(".username").keypress(function(){
      console.log("键盘");
     })
  </script>
</body>
.keyup()

添加键盘抬起事件

<body>
  <input type="text" class="username">
  <script>
    $(".username").keyup(function(){
      console.log("键盘");
     })
  </script>
</body>

浏览器事件

.resize()

添加浏览器窗口发生变化触发事件

<body>
  <script>
    $(window).resize(function(){
      console.log("改变浏览器尺寸");
     })
  </script>
</body>
.scroll()

浏览器滚动事件

<body>
  <script>
    $(window).scroll(function(){
      console.log("滚动");
     })
  </script>
</body>

事件对象

语法描述
event.type获取事件类型
event.target获取当前元素对象（指向触发事件元素）
event.currentTarget获取当前元素对象（指向添加事件的元素）
event.preventDefault()如果调用这个方法，默认事件行为将不再触发。
event.stopPropagation()防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
event.type

获取事件类型

$("#btn").click("click",function(e){
  console.log(e.type);
})
event.target

获取当前元素对象

$("#btn").click("click",function(e){
  console.log(e.target);
})
event.currentTarget

获取当前元素对象

温馨提示

target：指向触发事件元素

currentTarget：指向添加事件的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: red;
     }
  </style>
</head>
<body>
  <div id="container">
    <button id="btn">按钮</button>
  </div>
  <script>
    $("#container").click("click",function(e){
      console.log("container",e.currentTarget);
      console.log("container",e.target);
     })
    $("#btn").click("click",function(e){
      console.log("btn",e.currentTarget);
      console.log("btn",e.target);
     })
  </script>
</body>
</html>
event.preventDefault()

如果调用这个方法，默认事件行为将不再触发。

<a href="https://itbaizhan.com">itbaizhan</a>
<script>
  $("a").click("click",function(e){
    e.preventDefault();
   })
</script>
event.stopPropagation()

防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: red;
     }
  </style>
</head>
<body>
  <div>
    <button>按钮</button>
  </div>
  <script>
    $("div").click("click",function(e){
      console.log("div");
     })
    $("button").click("click",function(e){
      e.stopPropagation();
      console.log("button");
     })
  </script>
</body>
</html>

jQuery遍历

语法构成
.map()通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象
.each()遍历一个jQuery对象，为每个匹配元素执行一个函数
.get()通过jQuery对象获取一个对应的DOM元素

.map()

通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>

  <ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
  </ul>
  
  <script>
    $("li").map(function(index,ele){
      console.log(index,ele);
     })
  </script>
</body>
</html>

.each()

遍历一个jQuery对象，为每个匹配元素执行一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
    <script>
        /*
            jQuery遍历
                each
                    函数类型的参数：
                        index：每个元素的下标
                        element：每个元素
            对象类型的区分：
                jquery：S.fn.init(4) [li, li, li, li, prevObject: S.fn.init(1)]
                js：原始的元素效果
        */
        $("li").each(function(index,element){
            console.log(index,element);
            if(index == 2){
                element.style.color = "red"
            }
        })
    </script>
</body>
</html>

温馨提示

each和map的返回值不同，map返回一个新的数组，each返回原始数组,区别不大，一般想用哪个就用哪个

.get()

通过jQuery对象获取一个对应的DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>

    <script>
        // 通过get获取列表中的其中一个元素
        // 下标从0开始

        $("li").get(1).innerHTML = "我是一个全新的item"

        /*
            为什么要有js和jQuery对象的相互转换
                解：因为他们的方法和属性是不能互相调用的  
        
            1. js对象转换成jquery对象：$(lis)
            2. jquery对象转换成js对象
                1. 获取一个元素：get();
                2. 获取每一个元素:each  map
        */
        console.log($("li").get(1));

    </script>
    
</body>
</html>

jQuery树遍历

语法构成
.children()获得子元素，可以传递一个选择器参数
.find()寻找后代元素
.next()取得元素紧邻的后面同辈元素
.parent()取得元素的父元素
.siblings()获得元素的兄弟元素，可以传递一个选择器参数

.children()

获得子元素，可以传递一个选择器参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul class="first">
    <li>item 1</li>
    <li>
      <ul class="secode">
        <li>child item 1</li>
        <li>child item 2</li>
        <span>child span</span>
      </ul>
    </li>
    <li>item 3</li>
  </ul>
  <script>
    $(".first").children().css("border","1px solid red")
    $(".first").children("li").css("border","1px solid red")
  </script>
</body>
</html>

.find()

寻找后代元素

温馨提示

.find()和.children()方法是相似的，但后者只是再DOM树中向下遍历一个层级（注：就是只查找子元素，而不是后代元素）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul class="first">
    <li>item 1</li>
    <li>
      <ul class="secode">
        <li>child item 1</li>
        <li>child item 2</li>
        <span>child span</span>
      </ul>
    </li>
    <li>item 3</li>
  </ul>
  <script>
    $(".first").find("li").css("border","1px solid red")
  </script>
</body>
</html>

.next()

取得元素紧邻的后面同辈元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>Hello</div>
  <p>内容</p>
  <span>元素</span>
  <script>
    $("div").next().css("border","2px solid red")
  </script>
</body>
</html>

.parent()

取得元素的父元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>
    <p>Hello</p>
  </div>
  <script>
    $("p").parent().css("border","2px solid red")
  </script>
</body>
</html>

.siblings()

获得元素的兄弟元素，可以传递一个选择器参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>
    <p>Hello1</p>
    <p>Hello2</p>
    <span>World</span>
    <p class="text">Hello3</p>
    <p>Hello4</p>
    <p>Hello5</p>
  </div>
  <script>
    $(".text").siblings().css("border","2px solid red")
    $(".text").siblings("p").css("border","2px solid red")
  </script>
</body>
</html>

jQuery动画

语法描述
.show() & hide()显示 & 隐藏
.fadeIn() & .fadeOut()淡入 & 淡出
.slideDown() & .slideUp()滑动显示 & 滑动隐藏
.animate()自定义动画

.show()

执行显示动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.6.0.min.js"></script>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: red;
      display: none;
     }
  </style>
</head>
<body>
  <button>动画</button>
  <div></div>
  <script>
    $("button").click(function(){
      $("div").show(1000)
    })
  </script>
</body>
</html>

.hide()

执行隐藏动画

$("button").click(function(){
  $("div").hide(1000)
})

.fadeIn()

通过淡入的方式显示匹配元素。

$("button").click(function () {
 $("div").fadeIn(1000);
});

.fadeOut()

通过淡出的方式显示匹配元素

$("button").click(function () {
 $("div").fadeOut(1000);
});

用滑动动画显示一个元素

$("button").click(function () {
 $("div").slideDown(1000);
});

.slideUp()

用滑动动画隐藏一个元素

$("button").click(function () {
 $("div").slideUp(1000);
});

jQuery提供了一系列的动画基本方法，同时也提供了自定动画方案.animate()

.animate()

执行自定义动画

$("button").click(function () {
  $("div").animate({
    width: "200px",
    opacity: 0.5
   }, 1500);
});

### .hide()

执行隐藏动画

```js
$("button").click(function(){
  $("div").hide(1000)
})

.fadeIn()

通过淡入的方式显示匹配元素。

$("button").click(function () {
 $("div").fadeIn(1000);
});

.fadeOut()

通过淡出的方式显示匹配元素

$("button").click(function () {
 $("div").fadeOut(1000);
});

用滑动动画显示一个元素

$("button").click(function () {
 $("div").slideDown(1000);
});

.slideUp()

用滑动动画隐藏一个元素

$("button").click(function () {
 $("div").slideUp(1000);
});

jQuery提供了一系列的动画基本方法，同时也提供了自定动画方案.animate()

.animate()

执行自定义动画

$("button").click(function () {
  $("div").animate({
    width: "200px",
    opacity: 0.5
   }, 1500);
});
  1. 选择器
    1. 基础选择器 类选择器 元素选择器 ID选择器 子元素选择器 后代元素选择器
    2. 属性选择器 完美匹配 包含 前缀 开头 结尾 空格
    3. jQuery扩展选择器 eq even odd first last gt lt
  2. DOM操作
    1. Class操作 addClass() removeClass() toggleClass() hasClass()
    2. 文本操作 html() text() val()
    3. 属性操作 attr() removeAttr()
    4. DOM 插入并包裹现有内容 .wrap() .unwrap() .wrapAll() .wrapInner()
    5. DOM 插入现有元素内 .append() .prepend()
    6. DOM 插入现有元素外 .after() .before()
    7. DOM 移除 .empty() .remove()
    8. DOM 替换 .replaceAll() .replaceWith()
  3. CSS操作
    1. 尺寸 .css() .height()，.width() .innerHeight()，.innerWidth() .outerHeight()，.outerWidth()
    2. 位置 .offset() .position() .scrollLeft() .scrollTop()
  4. 事件处理
    1. 绑定事件处理器 .on() .one() .off()
    2. 鼠标事件 .click() .hover() .mouseenter() .mouseleave() .mousemove() .mouseover() .mouseout()
    3. 表单事件 .focus() .blur() .change() .submit()
    4. 键盘事件 .keydown() .keypress() .keyup()
    5. 浏览器事件 .resize() .scroll()
    6. 事件对象 event.type event.target event.currentTarget event.preventDefault() event.stopPropagation()
  5. 遍历
    1. 列表遍历 .map() .each()
    2. 列表中获得一个JS对象的DOM元素 .get()
    3. 树遍历（关系） .children() .find() .next() .parent() .siblings()
  6. 动画
    1. .show() .hide() .fadeIn() .fadeOut() .slideDown() .slideUp() .animate()
齐世好
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
jQuery基础语法实例入门
10-25
主要介绍了jQuery基础语法,以实例形式分析了jQuery的对象以及针对对象进行的操作用法,具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery总结
A_ning2014的博客
08-23 676
jQuery总结 jQuery第一天 jQuery jQuery是一个快速,简洁的JavaScript库 JavaScript库:是一个封装好的特定的集合(方法和函数) 学习jQuery本质:学习调用这些函数(方法) j 就是 JavaScript；Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 JavaScript库 jquery...
jQuery 语法
leocat2011的专栏
09-26 763
jQuery 语法   您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。 jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数，隐藏当前的 HTML 的元素。 $("#test").hide() 演示 jQuery hide() 函数，隐藏 id="test" 的元素。 $("p").hide() 演
JQuery
向上取整
11-28 1180
JQuery 概念 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模...
【jQuery】全语法汇总
丧心病狂Loli控的博客
07-06 1012
  ▊ jQuery初见   ❶ 理解JavaScript库（library） 就是一个JS文件，里面对原生js代码进行了封装，存放在里面，从而可以方便、快捷、高效、无脑 的使用这些封装好的功能 jQuery就是一个JavaScript库，它把js中的DOM操作做了封装。   ❷ jQuery的优点 轻量、兼容、开源、无脑 。   ❸ jQuery的引入 <script src="jQuery.js"></script> <!-- 提前
jq命令语法总结
w727655308的博客
06-14 1439
jq命令，用来快速处理json格式的命令，常见场景及命令总结
jQuery语法
qq1043002305的博客
07-26 1024
jquery语法： 1.jquery语法结构为:工厂函数$(),选择器，方法 $("选择器").method(); 2.$(document).ready() 与window.onload的异同点： window.onload必须等待html文档全部加载完毕后，才能执行 而ready()只需html文档结构绘制完毕即可执行，可能与元素相关的图片等文件没有加载完毕 window.onload全...
jquery的基本语法
weixin_45193791的博客
04-12 1748
js对象：js语法获取的页面标签对象称为js对象。js对象可以转换成jquery对象。 var a = document.getElementById("d1") js对象转换成jquery对象的方法 function a() { var a = document.getElementById("d1") //将js对象转换成jquery对象 alert($(a)) } jquery对象：jquery语法获取的页面标签称为jquery对象
JQuery基础语法小结
10-24
在日常开发中JQuery是我们使用最频繁的JS库。使用JQuery进行开发，你需要先了解JQuery的基本语法。下面是在学习JQuery时总结的一些简单语法。
jQuery基础语法总结
07-01
jQuery基础语法
js及jquery常用语法
08-28
js的常用方法及属性，jquery 使用及方法，相关基础方法的使用
Jquery基础语法
03-28
NULL 博文链接：https://technicalsearch.iteye.com/blog/1194506
jquery常用语法
dpy521的博客
12-13 229
高级事件 $('.box').on('click','.button',function(){ alert('on click') })给父元素box绑定click事件，但点击的是子元素button $(’.box’).off(‘click’,’.button’)移除绑定的事件 $('.box').one('click','.button',function(...
jquery如何通过name名称获取当前name的value值
weixin_30672019的博客
12-21 145
jquery如何通过name名称获取当前name的value值 本文为大家介绍下jquery通过name名称获取当前name的value值的具体实现，感兴趣的朋友可以参考下。 复制代码代码如下: $("*[name='name']").val(); //获取vlaue值 $("*[name='name']").attr('id','na...
【Java 进阶篇】JQuery 事件绑定：`on` 与 `off` 的奇妙舞曲
最新发布
繁依Fanyi的博客
11-19 251
在前端开发的舞台上，用户与页面的互动是一场精彩的表演。而 JQuery，作为 JavaScript 的一种封装库，为这场表演提供了更为便捷和优雅的事件绑定方式。其中，on和off两位主角，正是这场奇妙舞曲中的核心演员。在这篇博客中，我们将深入探讨这两位演员的特长、用法以及一些鲜为人知的技巧，带你踏入 JQuery 事件绑定的精妙世界。on。
Jquery 常用语法
狗蛋儿的博客
05-13 903
对象入门 1.jq 为了 简化 程序员 对 dom操作的 语法！ 2.jq入口函数 为啥要有入口函数？ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-50jfYHYU-1620890052963)(assets/image-20210428102839133.png)] 代码： // 入口函数 $(function(){ }) 3.jq对象 jquery就是一个函数 var version = "3.5.1" var jQuery = func
jq语法基础
个人笔记
04-02 216
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ background-color: red; } </style> </head> <body> <div id="one">id选择器&
JQ语法
壮壮小朋友的博客
06-02 547
jQ操作 属性 $().prop(); 如果里面只有一个参数，代表获取值，如果两个参数，第一个 属性名 第二个 属性值 $().attr(); 如果里面只有一个参数，代表获取值，如果两个参数，第一个 属性名 第二个 属性值 自定义属性 $().data(); 操作这个元素对象的属性 jQ操作 文本属性 表单 $().val(); 表单元素的值 里面不带参数是获取值，如果里面有参数代表设置值 ...
JQuery的基础语法(快速入门，适用较广)
m0_51408910的博客
12-30 297
JQuery 基础语法(快速入门) JQuery入口函数 //默认写法 $(document).ready(function(){ // 开始写 jQuery 代码... }); //简写 $(function(){ // 开始写 jQuery 代码... }); JavaScript入口函数 window.onload = function () { // 执行代码 } JQuery入口函数与JavaScript入口函数的区别 JQuery的入口函数是在html所有标签（DOM）
jquery基础教程
09-28
下面是学习jQuery的基础教程步骤： 1. 引入jQuery库：在HTML文件中引入jQuery库，可以使用CDN链接或者本地引入文件的方式。 2. 选择器：学习使用jQuery选择器来选取HTML元素。jQuery提供了多种选择器，包括基本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值