前端学习-jQuery基础

最新推荐文章于 2023-04-07 21:22:51 发布
最新推荐文章于 2023-04-07 21:22:51 发布
阅读量177 收藏
点赞数
分类专栏： Web前端 文章标签： jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuKeliyy/article/details/113458641
版权

1. 什么是jQuery

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

  jQuery只是一个JavaScript库。jQuery的所有功能都可以通过JavaScript进行访问，因此对JavaScript的深入了解，对于理解，构建和调试代码至关重要。随着时间的流逝，定期使用jQuery可以提高您对JavaScript的熟练程度，但是如果不具备JavaScript的内置构造和语法的使用知识，可能很难开始编写jQuery。

参考链接

官网：https://jquery.com/

官方教程： https://learn.jquery.com/

中文API文档：https://jquery.cuishifeng.cn/

前端开源镜像加速服务器: https://www.bootcdn.cn/

jQuery下载地址： https://www.bootcdn.cn/jquery/

1.1 jQuery的优势

  • 强大的选择器 - 帮助我们快速选择元素
  • 出色的DOM封装 - 提供更方便的DOM元素操作
  • 可靠的事件处理机制 - 事件绑定更简单
  • 出色浏览器的兼容性
  • 隐式迭代简化编程 - 减少操作多个的内容的for循环
  • 丰富的第三方插件

2. jQuery的环境搭建

2.1 获取jQuery库文件

从Jquery的官方下载页下载jquery即可。https://jquery.com/download/

Jquery版本：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oONg349E-1612059696934)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/jQuery/jQuery基础/jQuery下载说明.png )]

  1. 生产版: 压缩版本，项目上线时使用的版本，比较小。
  2. 开发版: 非压缩版本，在项目开发时使用的版本，稍微大一些。

2.2 引入jQuery文件

在页面中使用<script>标签导入到项目即可

<!-- 导入生开发版本 -->
<script type="text/javascript" src='./lib/jquery-3.5.1.js'></script>
<!-- 或者使用生产版本 -->
<script type="text/javascript" src='./lib/jquery-3.5.1.min.js'></script>

3. jQuery的基础语法

//页面初始化方法
$(document).ready(function() {
    alert("大吉大利，晚上吃鸡！");
});

//简化的写法
$ (function() {
    alert("大吉大利，晚上吃鸡！");
});

与原生JS的对比：

区别window.onload$(document).ready()
执行时机必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行网页中所有DOM文档结构绘制完毕后即刻执行，
可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数同一页面不能同时编写多个同一页面能同时编写多个

3.1 jQuery工厂函数$()

说明:

  1. jQuery的执行入口，也称之为jQuery工厂函数。通常情况下为ready函数传递一个函数作为希望jQuery执行的代码。
  2. 在文档“就绪”之前，无法安全地操纵页面，jQuery检测到这种就绪状态开始执行。$( document ).ready()仅在页面文档对象模型（DOM）准备好执行JavaScript代码之后，内部代码开始运行。很多前段开发者使用window.onload事件开始运行js代码。但是需要整个页面完整加载(包括dom、图像、iframe等)之后才开始执行。
  3. 在jQuery中$表示的是jQuery模板对象$()表示一个简写的jQuery工厂函数，即$()等效于$(document).ready()。

3.2 jQuery工厂函数作用

  1. 查找DOM元素节点对象，并将DOM元素节点对象封装为一个jQuery对象

  2. 将DOM元素节点对象封装为jQuery对象

  3. 直接将HTML结构封装为一个jQuery对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery工厂函数功能演示</title>
</head>
<body>
<ul>
    <li>第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //1.查找DOM元素节点对象（查找出来的默认就将其转换为jQuery对象）：工厂函数中可以填写CSS选择器
        let $lis = $('li');
        console.log($lis);

        //2.将DOM元素节点对象转换为jQuery对象
        let lis = document.querySelectorAll('li');
        console.log(lis);
        console.log($(lis));

        //3.直接将HTML结构转换为jQuery对象
        let $newLi = $('<li>新的一项内容</li>');
        console.log($newLi);
        document.querySelector('ul').appendChild($newLi[0]);
    });
</script>
</body>
</html>

3.3 jQuery对象与DOM元素节点对象

  1. jQuery对象就是通过jQuery包装DOM元素节点对象后产生的对象，它能够使用jQuery中的函数
  2. DOM元素节点对象与jQuery对象可以相互转换

注意：DOM元素节点对象和jQuery对象是两个完全不同的对象，因此它们具备的内置函数是不能互相使用的

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery对象与DOM节点对象的相互转换</title>
</head>
<body>
<ul>
    <li>第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //获取DOM元素节点对象
        let ul = document.querySelector('ul');
        console.log(ul);
        //DOM元素节点对象转换为jQuery对象
        let $ul = $(ul);
        console.log($ul);

        //jQuery对象转换为DOM元素节点对象
        let $lis = $('li');
        //方法1：通过数组的索引来获取
        console.log($lis[0]);
        //方法2：通过get来获取，参数是索引
        console.log($lis.get(1));
    });
</script>
</body>
</html>

4. jQuery选择器

jQuery的选择器大部分与CSS3的选择器一致，只有少部分的额外新增，因为CSS3的选择器足以应对各种情况，且用起来也比较方便，因此新增的选择器了解即可。

4.1 jQuery基础选择器

名称语法构成描述
元素选择器element根据给定的元素名匹配元素
类选择器.class根据给定的class匹配元素
ID选择器#id根据给定的id匹配元素
并集选择器selector1,selector2,…,selectorN将每一个选择器匹配的元素合并后一起返回
全局选择器*****匹配所有元素

4.2 层级选择器

名称语法构成描述
后代选择器ancestor descendant选取ancestor元素里的所有descendant后代元素
子选择器parent > child选取parent元素下所有child子元素
相邻选择器prev + next选取紧邻prev元素之后的next元素
同辈选择器prev~sibings选取prev元素之后的所有siblings元素

4.3 属性选择器

语法构成描述
[attribute]选取包含给定属性的元素
[attribute=value]选取等于给定属性是某个特定值的元素
[attribute!=value]选取给定属性不是某个特定值的元素(没写该属性的元素也算)
[attribute^=value]选取给定属性是以某些特定值开始的元素
[attribute$=value]选取给定属性是以某些特定值结尾的元素
[attribute*=value]选取给定属性是以包含某些值的元素

[attribute!=value]是CSS3选择器中没有的，属于jQuery新增的

4.4 子元素选择器

语 法说 明
E:first-child选择属于选择器的第一个子元素
E:last-child选择属于选择器的最后一个子元素
E:nth-child(n)选择属于选择器的指定位置的子元素
E:first-of-type选择属于选择器的第一个指定选择器的子元素
E:last-of-type选择属于选择器的最后一个指定选择器的子元素
E:nth-of-type(n)选择属于选择器的指定位置的指定选择器的子元素
E:nth-last-child(n)选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个
E:nth-last-of-type(n)选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个
E:only-child如果某个元素是父元素中唯一的子元素，那么对应的元素将会被匹配
E:only-of-type没有其它相同类型的兄弟元素，那么对应的元素将会被匹配

4.4 jQuery的特殊选择器

这些选择器，部分是CSS3中有的，不过jQuery对它们进行了一些调整；其它的是jQuery提供出来的。

4.4.1 基本筛选器
语 法说 明
E:first匹配第一个元素E
E:last匹配最后一个元素E
E:not(selector)匹配不具有指定选择器的元素E
E:even匹配所有索引值为偶数的元素E，从 0 开始计数
E:odd匹配所有索引值为奇数的元素，从 0 开始计数
E:eq(index)匹配一个给定索引值的元素E
E:gt(index)匹配所有大于给定索引值的元素E
E:lt(index)匹配所有小于给定索引值的元素E
E:lang(language)匹配指定语言的所有元素E
:header匹配如h1、h2、h3之类的标题元素
:animated匹配所有正在执行动画效果的元素（这里的动画不是CSS3的animate，而是jQuery提供的动画）
E:focus匹配当前获取焦点的元素E
:root匹配文档的根元素，永远是<html>元素
E:target代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配

演示模板：

<ul>
    <li>第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
    <li>第四项内容</li>
    <li>第五项内容</li>
    <li>第六项内容</li>
</ul>
4.4.2 可见性选择器
名称说 明
:hidden匹配所有隐藏的元素（display为none的；可以在前面指定选择器）
:visible匹配所有可视的元素（display非none的；可以在前面指定选择器）
4.4.3 内容选择器
名称说 明
:contains(text)匹配包含指定文本内容的元素（可以在前面指定选择器）
:empty匹配没有任何子元素或者文本的元素（可以在前面指定选择器）
:has(selector)匹配含有选择器所匹配的元素的元素（可以在前面指定选择器）
:parent匹配含有子元素或者文本的元素（可以在前面指定选择器）
4.4.4 表单选择器
语 法说 明
:input匹配所有 input, textarea, select 和 button 元素
:text匹配所有的单行文本框(也就是type设定为text的input元素)
:password匹配所有密码框(也就是type设定为password的input元素)
:radio匹配所有单选按钮(也就是type设定为radio的input元素)
:checkbox匹配所有复选框(也就是type设定为checkbox的input元素)
:submit匹配所有提交按钮，理论上只匹配type为"submit" 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。
:image匹配所有图像域(也就是type设定为image的input元素)
:reset匹配所有重置按钮(也就是type设定为reset的input元素)
:button匹配所有按钮，包括type设定为button的input元素以及button元素
:file匹配所有文件域(也就是type设定为file的input元素)
4.4.5 表单对象属性选择器
名称说 明
:enabled匹配所有未被禁用元素（可以在前面指定选择器）
:disabled匹配所有被禁用的元素（可以在前面指定选择器）
:checked匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
:selected匹配所有选中的option元素

5. jQuery操作样式(重要)

5.1 操作行内样式(style)

5.1.1 设置单个样式
$('选择器').css('样式名','属性值')
5.1.2 设置多个样式
$('选择器').css({ 
    '样式名':'属性值',
    '样式名':'属性值',
    ...
})
5.1.3 获取单个样式值
$('选择器').css('样式名');

对于获取而言，不管选择器有多少个元素被选中，只能获取第一个选择器匹配元素的样式值

5.1.4 示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <title>jQuery操作行内样式</title>
   <style type="text/css">
       li:last-child {
           background-color: rgb(233, 150, 122);
       }
   </style>
</head>
<body>
<ul>
   <li>第一项内容</li>
   <li>第二项内容</li>
   <li>第三项内容</li>
   <li>第四项内容</li>
   <li>第五项内容</li>
   <li>第六项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
   $(function () {
       //设置单个行内样式
       $('li').css('font-size','18px');
       //设置第一个li字体风格为斜体
       $('li:first-child').css('font-style','italic');

       //设置多个行内样式
       $('li:nth-child(2n)').css({
           'color': 'red',
           'font-weight': '700'
       });

       //获取指定样式
       console.log($('li:last-child').css('background-color'));
   });
</script>
</body>
</html>

5.2 操作class类样式

5.2.1 追加类样式
//单个类样式
$(selector).addClass(class)

//多个类样式，多个类样式用空格隔开
$(selector).addClass(class1 class2 ... classN)
5.2.2 移除指定类样式
//移除单个类样式
$(selector).removeClass(class)

//移除多个类样式
$(selector).removeClass(class1 class2 ... classN)
5.2.3 判断是否存在指定类样式
//判断是否存在单个类样式
$(selector).hasClass(class)

//判断是否存在多个类样式
$(selector).hasClass(class1 class2 ... classN)
5.2.4 切换指定类样式

如果对应样式存在，那么移除，否则添加

//切换单个类样式
$(selector).toggleClass(class)

//切换多个类样式
$(selector).toggleClass(class1 class2 ... classN)
5.2.5 示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作类样式</title>
    <style type="text/css">
        li {
            cursor: pointer;
            transition: all .2s linear;
        }

        li.active {
            font-size: 24px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<ul>
    <li class="active">第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
    <li>第四项内容</li>
    <li>第五项内容</li>
    <li>第六项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //获取所有li
        let lis = document.querySelectorAll('li');
        //记录当前激活的li(默认第一项)
        let activeLi = lis[0];
        //给是所有的li添加点击事件
        lis.forEach(value => {
            value.addEventListener('click', e => {
                //如果当前点击的是已经激活的，那么结束后续逻辑
                if(value === activeLi) return;
                //激活当前点击的项
                $(value).addClass('active');
                //取消激活原本项
                $(activeLi).removeClass('active');
                //记录当前激活的项
                activeLi = value;
            });
        });
    });
</script>
</body>
</html>

6. jQuery操作内容、属性以及值(重要)

6.1 jQuery操作内容

方法说明
$(selector).html(content)设置对象中的内容(HTML格式)
$(selector).html()获取对象中的内容(HTML格式)
$(selector).text(content)设置对象中的内容(文本格式)
$(selector).text()获取对象中的内容(文本格式)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作内容</title>
</head>
<body>
<ul>
    <li>第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
    <li>第四项内容</li>
    <li>第五项内容</li>
    <li>第六项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        let $ul = $('ul');
        //获取$ul jQuery对象中的HTML内容
        console.log($ul.html())
        //设置第三项li的HTML内容
        $('ul li:nth-child(3)').html(`
            <h1>新的标题</h1>
            <p>新的内容</p>
            <a href="#">新的超链接</a>
        `);

        //获取$ul jQuery对象中的文本内容
        console.log($ul.text())
        //设置第五项li的文本内容
        $('ul li:nth-child(5)').text(`
            <h1>新的标题</h1>
            <p>新的内容</p>
            <a href="#">新的超链接</a>
        `);
    });
</script>
</body>
</html>

6.2 jQuery操作值

函数获取
$(selector).val(value)设置匹配元素的值
$(selector).val()获得匹配元素的当前值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作值</title>
</head>
<body>
<form>
    <label>
        <span>账号：</span>
        <input type="text" name="account" />
    </label>
    <label>
        <span>密码：</span>
        <input type="password" name="pwd" />
    </label>
    <input type="submit" value="登录" />
</form>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //设置账号的值为admin
        $('input[name="account"]').val('admin');

        //表单提交事件
        $('form')[0].addEventListener('submit',e => {
            //禁止默认事件
            e.preventDefault();
            //获取密码框的值
            console.log($('input[name="pwd"]').val());
        });
    });
</script>
</body>
</html>

6.3 jQuery操作属性

函数获取
$(selector).attr(name,value)追加单个属性
$(selector).attr({name1:value1,name2:value2,…})追加多个属性
$(selector).attr(name)获取指定属性
$(selector).removeAttr(name)移除单个属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作属性</title>
    <style type="text/css">
        .cus-checkbox {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 1px solid #d9d9d9;
            cursor: pointer;
            position: relative;
            border-radius: 2px;
        }

        .cus-checkbox::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            left: calc(50% - 4px);
            top: calc(50% - 4px);
            transition: background-color .2s linear;
        }

        .cus-checkbox:hover,.cus-checkbox[data-checked='checked'] {
            border-color: #40a9ff;
        }

        .cus-checkbox[data-checked='checked']::after {
            background-color: #1890ff;
        }
    </style>
</head>
<body>
<span class="cus-checkbox"></span>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        let $cus = $('.cus-checkbox');
        $cus[0].addEventListener('click', e => {
            //获取多选框当前的选中状态
            let status = $cus.attr('data-checked');
            //判断当前的选中状态
            if(status !== "checked") {
                //如果当前状态不是选中的，那么将其状态设定为选中状态
                $cus.attr('data-checked',"checked");
            }else {
                $cus.removeAttr('data-checked');
            }
        });
    });
</script>
</body>
</html>

7. jQuery添加、移除元素节点(重要)

7.1 添加子元素节点

方法名语法说明
append$(selector).append(content)在被选元素内部的结尾插入指定内容
appendTo$(content).appendTo(selector)将选择的内容追加到被选元素内部的结尾
prepend$(selector).prepend(content)在被选元素内部的开头插入指定内容
prependTo$(content).prependTo(selector)将选择内容插入到被选元素内部的开头
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery添加子元素节点</title>
</head>
<body>
<ul>
    <li>第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
    <li>第四项内容</li>
    <li>第五项内容</li>
    <li>第六项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //在ul的尾部添加一个新的li
        let $ul = $('ul');
        $ul.append(`<li>新的尾部项内容</li>`);

        //在ul的首部添加一个新的li
        $ul.prepend(`<li>新的首部项内容</li>`);
    });
</script>
</body>
</html>

7.2 添加同级元素节点

方法名语法说明
after$(selector).after(content)在被选元素后插入指定内容
insertAfter$(content).insertAfter(selector)将指定内容追加到被选元素后
before$(selector).before(content)在被选元素前插入指定内容
insertBefore$(content).insertBefore(selector)将指定内容插入到被选元素前
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery添加同级元素节点</title>
</head>
<body>
<ul>
    <li>第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
    <li>第四项内容</li>
    <li>第五项内容</li>
    <li>第六项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //在第四项li的后面添加一个新的li
        $('li:nth-child(4)').after(`<li>新的一项内容1</li>`);

        //在第三项li的前面添加一个新的li
        $('li:nth-child(3)').before(`<li>新的一项内容2</li>`);
    });
</script>
</body>
</html>

7.3 删除子元素节点

方法名语法说明
remove$(selectorRang).remove(selector)移除被选元素（包含数据和事件）
selectorRang：用于首次圈定要移除元素，可能是多个也可能是一个
selector：是一个可选参数，用于在圈定移除元素中再次筛选(一般情况下，selector都会忽略，直接在selectorRang中就选好)
empty$(selector).empty()从被选元素移除所有子节点和内容
detach$(selectorRange).detach(selector)移除被选元素（保留数据和事件）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery删除子元素节点</title>
</head>
<body>
<ul>
    <li>第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
    <li>第四项内容</li>
    <li>第五项内容</li>
    <li>第六项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //移除第四项li
        $('li:nth-child(4)').remove();
    });
</script>
</body>
</html>

8. jQuery访问元素节点(重要)

方法名语法说明
children$(selectorRang).children(selector)获取所有子元素节点（selector用于进行二次筛选）
next$(selectorRang).next(selector)获取下一个兄弟元素节点（selector用于进行二次筛选）
prev$(selectorRang).prev(selector)获取前一个兄弟元素节点（selector用于进行二次筛选）
siblings$(selectorRang).siblings(selector)获取前面以及后面所有的兄弟元素节点（selector用于进行二次筛选）
parent$(selectorRang).parent(selector)获取父级元素节点（selector用于进行二次筛选）
parents$(selectorRang).parents(selector)获取祖先元素节点(父级的父级…)（selector用于进行二次筛选）
closest$(selectorRang).closest(selector)从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素节点（selector用于进行二次筛选）
find$(selectorRang).find(selector)获取其下指定选择器的元素节点（selector用于进行二次筛选）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery访问元素节点</title>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>联系电话</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr data-id="1">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>37</td>
        <td>13110987564</td>
        <td>
            <a href="#" data-action="del">删除</a>
            <a href="#" data-action="edit">编辑</a>
        </td>
    </tr>
    <tr data-id="2">
        <td>2</td>
        <td>李四</td>
        <td>女</td>
        <td>24</td>
        <td>18888987564</td>
        <td>
            <a href="#" data-action="del">删除</a>
            <a href="#" data-action="edit">编辑</a>
        </td>
    </tr>
    <tr data-id="3">
        <td>3</td>
        <td>王五</td>
        <td>男</td>
        <td>31</td>
        <td>13450234564</td>
        <td>
            <a href="#" data-action="del">删除</a>
            <a href="#" data-action="edit">编辑</a>
        </td>
    </tr>
    </tbody>
</table>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        let $tbody = $('tbody');
        //获取tbody下面所有的子元素节点
        let $trs = $tbody.children();
        console.log($trs);
        //获取第二个tr
        let $twoTr = $tbody.find('tr:nth-child(2)');
        console.log($twoTr);
        //获取第二个tr的下一个兄弟元素节点
        console.log($twoTr.next());
    });
</script>
</body>
</html>

9. jQuery访问链与断链(重要)

9.1 访问链

jQuery对象的方法可以采用链式进行调用的

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery访问链</title>
    <style type="text/css">
        li {
            cursor: pointer;
            transition: all .2s linear;
        }

        li.active {
            font-size: 24px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<ul>
    <li class="active">第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
    <li>第四项内容</li>
    <li>第五项内容</li>
    <li>第六项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //获取所有li
        let lis = document.querySelectorAll('li');
        //给是所有的li添加点击事件
        lis.forEach(value => {
            value.addEventListener('click', e => {
                // 给当前点击的li添加active样式，然后查找具有.active的兄弟元素节点，然后移除它的active样式
                $(value).addClass('active').siblings('.active').removeClass('active');
            });
        });
    });
</script>
</body>
</html>

9.2 断链

使用end方法用于结束当前链条中最近一个破坏性筛选操作，并将匹配元素集还原为之前的状态

破坏性操作包括：children、filter、find、map、next、nextAll、not、parent、parents、prev、prevAll、siblings、slice

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery断链</title>
    <style type="text/css">
        li {
            cursor: pointer;
            transition: all .2s linear;
        }

        li.active {
            font-size: 24px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<ul>
    <li class="active">第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
    <li>第四项内容</li>
    <li>第五项内容</li>
    <li>第六项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //获取所有li
        let lis = document.querySelectorAll('li');
        //给是所有的li添加点击事件
        lis.forEach(value => {
            value.addEventListener('click', e => {
                // 找到当前点击的li且具有.active的兄弟元素节点，然后移除其active样式，
                // 然后使用end将当前的元素重新回调当前点击的li，然后为其添加active样式
                $(value)
                    .siblings('.active').removeClass('active')
                    .end().addClass('active');
            });
        });
    });
</script>
</body>
</html>

10. jQuery的CSS-DOM操作

方 法说 明
offset()获取匹配元素在当前视口的相对偏移（此方法仅对可见元素有效）。返回的对象包含两个值：top和left，以像素为单位
position()获取匹配元素相对父元素的偏移（此方法仅对可见元素有效）。返回的对象包含两个值：top和left，以像素为单位【受到父级的position值的影响，如果父级未设置相对或者绝对定位，那么left的值会以视口为参照物】
height(value)设置或返回匹配元素的高度(参数可选，无参代表返回)。如果没有规定长度单位，则使用默认的px作为单位【这里的宽度是内容宽度】
width(value)设置或返回匹配元素的宽度(参数可选，无参代表返回)。如果没有规定长度单位，则使用默认的px作为单位【这里的高度是内容高度】
scrollTop(position)参数可选。设置或返回匹配元素相对滚动条顶部的偏移（此方法对可见和隐藏元素均有效）
scrollLeft(position)参数可选。设置或返回匹配元素相对滚动条左侧的偏移（此方法对可见和隐藏元素均有效）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery的CSS-DOM操作</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            padding: 50px;
            overflow: auto;
            background-color: darkseagreen;
            border: 4px solid #426142;
        }
        ul {
            background-color: brown;
            height: 100vh;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>第一项内容</li>
        <li>第二项内容</li>
        <li>第三项内容</li>
        <li>第四项内容</li>
        <li>第五项内容</li>
        <li>第六项内容</li>
    </ul>
</div>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        let $box = $('.box');
        let $ul = $box.find('ul');
        //获取$box的宽度和高度
        console.log(`$box的宽度为：${$box.width()}`);
        console.log(`$box的高度为：${$box.height()}`)

        //获取$ul相对于视口的距离
        let offset = $ul.offset();
        console.log(`$ul距离视口顶部的距离为：${offset.top}`);
        console.log(`$ul距离视口左侧的距离为：${offset.left}`);

        //获取$ul相对于其父级box的距离
        let position = $ul.position();
        console.log(`$ul距离父级顶部的距离为：${position.top}`);
        //如果父级没有设置position为相对或者绝对定位，那么left会以视口为参照物
        console.log(`$ul距离父级左侧的距离为：${position.left}`);

        //设置$box的滚动条位置在100
        $box.scrollTop(100);
    });
</script>
</body>
</html>

11. jQuery的事件处理(掌握)

jQuery提供的各种事件名与原生JS的一样，不过其还提供了一些额外的事件以及绑定方式

jQuery具有隐式迭代功能，我们可以直接给jQuery对象集合绑定事件

11.1 鼠标事件

名称说明
click单击
dbclick双击
mousedown按下
mouseup松开
mouseenter光标移入元素时触发
mouseleave光标移出元素时触发
mouseover光标移入元素时触发，进入子元素也会触发
mouseout光标移出元素时触发，离开子元素也会触发
mousemove光标在元素上移动时触发

11.2 键盘事件

名称说明
keydown键盘按下
keyup键盘松开
keypress键盘按下并产生字符时的事件（ctrl、shift之类的键不会触发）

11.3 特殊事件

名称说明
focus输入框获取焦点
blur输入框失去焦点
select内容选中
input输入框输入内容
change元素内容发生改变
submit表单提交时
resize浏览器窗口大小发生变化时

11.4 事件切换

名称说明
hover(enter,leave)模拟鼠标移入移出的复合事件，相当于mouseenter与mouseleave事件的组合
toggle(speed,easing,fn)实现元素进行显示与隐藏的切换
speed：显示与动画切换的效果速度，默认为0毫秒，可以是slow、normal、fast、数值
easing：动画曲线，默认是"swing"，可以是linear
fn：动画完成后执行的回调函数，每个元素执行一次

11.5 jQuery的事件绑定

以上的事件，我们可以使用jQuery对象直接绑定

也可以使用下面的方法绑定，使用下面的方法绑定，我们可以进行额外的管控

方法名语法说明
on$(selector).on(events,childSelector,data,fn)给指定的元素绑定一个或多个事件的处理函数
events：一个或多个事件名（多个用空格间隔）
childSelector：二次筛选的选择器（一般不会用）
data：给事件传递的额外数据（该数据放置在回调函数Event对象的data字段中）
fn：事件触发时的回调函数
off$(selector).off(events,childSelector,fn)移除指定的元素使用on绑定的一个或多个事件的处理函数（实测，直接绑定也会被移除）
events：一个或多个事件名（多个用空格间隔）
childSelector：二次筛选的选择器（一般不会用）
fn：事件处理前的回调函数
one$(selector).one(events,childSelector,data,fn)整体与on一样，只不过对应事件只会触发一次，之后就不会再触发了
trigger$(selector).trigger(event,data)触发指定元素的指定事件
triggerHandler$(selector).triggerHandler(event,data)与trigger相似，但有三个区别：
1.他不会触发浏览器默认事件
2.只触发jQuery对象集合中第一个元素的事件处理函数
3.这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery的事件绑定</title>
    <style type="text/css">
        li {
            cursor: pointer;
            transition: all .2s linear;
        }

        li.active {
            font-size: 24px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<ul>
    <li>第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
    <li>第四项内容</li>
    <li>第五项内容</li>
    <li>第六项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        let $lis = $('li');
        //配合jQuery的隐式迭代功能，给所有li绑定click事件
        $lis.click(e => {
            //每次li被点击，切换自身的active类样式
            $(e.target).toggleClass('active');
        });

        //鼠标移入ul中，触发所有li的click事件
        $('ul').mouseenter(e => {
            $lis.trigger('click');
        });
    });
</script>
</body>
</html>

12. jQuery的隐式迭代与显示迭代函数each

12.1 隐式迭代概念

当我们通过选择器得到一个jQuery对象集合时，如果我们对这个jQuery对象集合的操作是一致的且执行的是jQuery为我们提供的方法，那么我们就可以直接使用jQuery为我们提供的方法

jQuery会自动的帮我们迭代这个jQuery对象集合，然后自动的执行对应的方法

12.2 显示迭代函数each

通过each函数，我们可以针对一个jQuery对象集合，手动的进行迭代

注意：此函数仅针对于jQuery对象或者对象集合

语法：

index代表，迭代的索引值

element，代表jQuery对象集合中的每个元素节点对象（注意，这里获取到的不是jQuery对象）

$(selector).each(callback(index,element))

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery的事件绑定</title>
    <style type="text/css">
        li {
            cursor: pointer;
            transition: all .2s linear;
        }

        li.active {
            font-size: 24px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<ul>
    <li>第一项内容</li>
    <li>第二项内容</li>
    <li>第三项内容</li>
    <li>第四项内容</li>
    <li>第五项内容</li>
    <li>第六项内容</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //使用each手动迭代li jQuery对象集合
        $('li').each((index,element) => {
            //如果索引为偶数，那么添加active类样式
            if(index % 2 === 0) $(element).addClass('active');
        });
    });
</script>
</body>
</html>

13. jQuery的动画(了解)

方法说明
show(speed,easing,fn)显示处于隐藏的元素，如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是设置了display:none;这个方法都将有效。
speed：默认值为0毫秒，可以是slow、normal、fast、数值
easing：动画曲线，默认是"swing"，可以是linear
fn：动画完成后执行的回调函数，每个元素执行一次
hide(speed,easing,fn)隐藏处于显示的元素，如果选择的元素是隐藏的，这个方法将不会改变任何东西。
speed：默认值为0毫秒，可以是slow、normal、fast、数值
easing：动画曲线，默认是"swing"，可以是linear
fn：动画完成后执行的回调函数，每个元素执行一次
fadeIn(speed,easing,fn)通过透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
speed：默认值为0毫秒，可以是slow、normal、fast、数值
easing：动画曲线，默认是"swing"，可以是linear
fn：动画完成后执行的回调函数，每个元素执行一次
fadeOut(speed,callback)通过透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
speed：默认值为0毫秒，可以是slow、normal、fast、数值
easing：动画曲线，默认是"swing"，可以是linear
fn：动画完成后执行的回调函数，每个元素执行一次
fadeIn(speed,opacity,easing,fn)所有匹配元素的透明度调整到指定的值，并在动画完成后可选地触发一个回调函数。
speed：默认值为0毫秒，可以是slow、normal、fast、数值
opacity：一个0~1之间表示透明度的数字
easing：动画曲线，默认是"swing"，可以是linear
fn：动画完成后执行的回调函数，每个元素执行一次
fadeToggle(speed,easing,fn)通过透明度的变化来实现所有匹配元素的淡入或淡出效果，并在动画完成后可选地触发一个回调函数。
speed：默认值为0毫秒，可以是slow、normal、fast、数值
easing：动画曲线，默认是"swing"，可以是linear
fn：动画完成后执行的回调函数，每个元素执行一次
slideDown(speed,easing,fn)通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
speed：默认值为0毫秒，可以是slow、normal、fast、数值
easing：动画曲线，默认是"swing"，可以是linear
fn：动画完成后执行的回调函数，每个元素执行一次
slideUp(speed,easing,fn)通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
speed：默认值为0毫秒，可以是slow、normal、fast、数值
easing：动画曲线，默认是"swing"，可以是linear
fn：动画完成后执行的回调函数，每个元素执行一次
slideToggle(speed,easing,fn)通过高度变化来动态地显示或隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
speed：默认值为0毫秒，可以是slow、normal、fast、数值
easing：动画曲线，默认是"swing"，可以是linear
fn：动画完成后执行的回调函数，每个元素执行一次
animate(params,speed,easing,fn)自定义动画{"opacity":"255","height":"30px"}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery的动画</title>
    <style type="text/css">
        li {
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul>
    <li>hide动画</li>
    <li>fadeOut动画</li>
    <li>slideUp动画</li>
    <li>animate自定义动画</li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //hide动画
        $('li:first-child').click(e => {
            $(e.target).hide(1000,'linear',() => {
                console.log('hide动画执行完毕');
            });
        });
        //fadeOut动画
        $('li:nth-child(2)').click(e => {
            $(e.target).fadeOut(1000,() => {
                console.log('fadeOut动画执行完毕');
            });
        });
        //slideUp动画
        $('li:nth-child(3)').click(e => {
            $(e.target).slideUp(1000,() => {
                console.log('slideUp动画执行完毕');
            });
        });
        //animate自定义动画
        $('li:last-child').click(e => {
            $(e.target).animate({
                "font-size": "36px",
                "height": "150px"
            },1000,() => {
                console.log('animate自定义动画执行完毕');
            });
        });
    });
</script>
</body>
</html>
a听闻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端框架技术--jQuery基础应用
Economic_shark的博客
11-27 974
总体概述jQuery是什么jQurey官网jQuery简介 文件下载： 带.min.js就是压缩版 没带的就是未压缩版项目开发中用压缩的，学习用未压缩的版本。jQuery的强大应用第一个jQuery程序 创建一个Web项目 jQuery版本的 “Hello world” $(document).ready() 示例1 示例2 示例3 知识小结 理解什么是jQuery及特点
前端之jQuery
Yietong的博客
08-26 892
jQuery是一个轻量级的兼容多浏览器的javascript库.它使用户能够更方便的处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“...
前端基础之jQuery
qq_53350943的博客
04-07 1423
jQuery是一个封装JS的框架。 使用jQuery可以更方便的编写JS脚本实现的功能。 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX（重要
Web前端学习：jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
Oh_Python的博客
03-17 969
目录 1、jquery操作样式类名 代码演示 二、添加元素 1、append()演示 2、prepend()演示 3、after()演示 4、before()演示 三、jQuery-CSS()方法 小前奏~ 作者简介：大家好，我是暴揍Python的阿峰，大家可以叫我阿峰哦~ 个人主页：暴揍Python的阿峰博客 推荐专栏： Python入门全教程 Excel自动化办公 MySQL、Mongodb、redis数据库学习 Python爬虫学习 如果觉得文章还不错的...
JavaWeb--------jQuery基础
詹煜彪9527
03-07 7598
一. 概念 1.1 简介 jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。jQuery是一个快速、简洁的JavaScript框架，能够兼容各种浏览器，核心理念是write less,do more(写得更少,做得更多)。jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML...
前端-jQuery基础入门（上）
weixin_45156610的博客
07-13 1745
jQuery基础入门（上） 今日内容介绍 重写javascript案例：弹出广告 重写javascript案例：隔行换色 重写javascript案例：全选/全不选 今日内容学习目标 列举常见的五种选择器，并简单描述其作用 通过选择器，获得jQuery对象 可以实现显示或隐藏标签。 可以实现对属性的操作 课堂笔记 1、 重写弹出广告 1.1、 案例分析 重写javascript案例“弹出广告” 1...
前端学习路线（简洁清晰，直击学习途径）
热门推荐
m0_67911008的博客
03-30 5万+
第一阶段：前端入门 1.Html5 2.Css3 第二阶段：JavaScript ①JavaScript 基础语法 ②JavaScript 高级（WebAPI/Dom Bom） ③JavaScript 框架（jQuery） ④数据可视化（echarts） 第三阶段 服务端编程 1.node js基础 2.ajax 3.promise 4.axios 5.了解学习es6语法，http协议规则 6.TypeScript 第四阶段 Vue.js
[前端学习笔记] jQuery基础知识整理
酸奶的博客
02-12 627
一、jQuery基本概念 1. 什么是jQuery jQuery是一个快速简洁的JS库，封装了JS常用的功能代码，优化了DOM操作、事件处理、动画设计、Ajax交互等。我们可以快速查询使用里面的功能函数。 补充：常见的JS库有jQuery\Prototype\YUI\Dojo\Ext JS\移动端的zepto。这些库都是对原生JS的封装，内部是用JS实现的。 2. jQuery的优点 轻量级。核心文件几十kb，不会影响页面加载速度。 跨浏览器兼容。基本兼容了现在主流的浏览器。
前端jquery学习
weixin_47120348的博客
01-05 1301
jquery - jquer 见名知意是javaScript和query的意思 引入jquery文件 <script src="jquery-3.3.1.js"></script> - $符号的含义 $是jquery的别名，$()构造了一个jquery对象，也就是构造函数 $()里面可以存放标签元素来创建元素对象， $(function(){}) 这样就是自动加载函数 - 选择器 1 基本选择器 2 层次选择器 3 属性选择器 - 基本选择器 元素选择器 $("div").c.
JQuery学习总结
qq_38176216的博客
11-29 1775
一、安装Jquery 1.下载Jquery 下载地址：https://jquery.com/download/ 2.通过CDN(内容分发网络)引用它 百度CDN：https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js //可在浏览器中使用$.fn.jquery命令查看当前jQuery使用的版本 二、Jquery语法 1.Jquer是选取HTML元素，并对选取的元素执行某些操作 基础语法： $(selector).action() 实例: $(
jQuery零基础学习（超详细）
02-19
学习jQuery看这篇就够了 根据pink老师课程做的笔记
jQuery基础.pptx
05-20
1.1 学习jQuery之前，需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? jQuery是一个JavaScript函数库 轻量级，“写的少，做的多” 包含以下功能： HTML元素选取 HTML元素操作 CSS操作 HTML...
jQuery从入门到到放弃-jQuery全技术链解读与前端高级项目 带你学习jQuery的前世今生
07-05
jQuery是一个快速、简洁的JavaScript框架，jQuery设计倡导写更少的代码，做更多的事情。也就是说jQuery的使命就是帮住开发工程师...在课程中还安排了jQuery开发的前端项目，学习基础技术的同时也能增加jQuery项目经验。
jQuery基础自学笔记（pink老师jQuery全内容）
04-12
pink老师jQuery
jQuery-Lerning.zip_Jquery 基础教程_javascript 教程_jquery_web前端
09-22
jquery入门教程，帮助大家学习web前端开发，教程清晰明了，适于学习基础。最好具有将啊vascriptde基础
前端学习-HTML5
听闻
01-29 1910
一、Web开发 1.1 概念 全称World Wide Web，缩写：www 全球广域网，又称万维网。 World Wide Web Consortium，缩写：W3C，万维网联盟。其负责制定和维护Web行业标准，也叫W3C标准 说明: W3C标准包括： HTML内容：HTML、XHTML 样式美化：CSS 结构文档访问：DOM（Document Object Model） 页面交互：ECMAScript 通常情况下web主要指浏览器与web应用服务器的通信 通常web主要通过HTTP协议
前端学习-Bootstrap
听闻
01-29 811
一、 什么是Bootstrap Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。 参考地址: 官网： https://getbootstrap.com/ 中文网: https://www.bootcss.com/ 菜鸟教程: https://www.runoob.com/bootstrap4/bootstrap4-tut
前端学习-axios与element-ui
听闻
01-31 501
1. axios（熟悉） axios是基于promise 的 HTTP 库，可以用在浏览器和 node.js 中 API文档：https://www.kancloud.cn/yunye/axios/234845 下载地址：https://www.bootcdn.cn/axios/ 1.1基本用法axios(config) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"&gt
前端学习-CSS3
听闻
01-29 499
一、概念 Cascading Style Sheets 层叠样式表，用来展现HTML、XHTML的页面标签的外观风格 说明: 官网: https://www.w3.org/Style/CSS/ 我们在上节课学的各种标签，其实自带有一定的样式，可以通过F12来观察，为了实现某些布局或者效果，我们可能会移除标签的指定样式 二、CSS的作用 用来美化页面元素 - 美化外观 用来布局页面元素 - 布局定位 用来实现内容和外观的分离 - 方便维护和修改 三、语法 官方 https://www.w3.or
web前端学习（十七
最新发布
10-20
根据提供的引用内容，我可以为您介绍一下Web前端学习的相关内容。 Web前端开发是指利用HTML、CSS、JavaScript等技术开发网站的过程。对于初学者来说，可以从HTML、CSS、JavaScript的基础语法和常用标签、属性、方法等入手，逐步学习布局、样式、交互等方面的知识。同时，也可以通过学习一些常用的前端框架和库，如Bootstrap、jQuery、Vue.js等，来提高开发效率和代码质量。 对于专业的前端开发者来说，可以深入学习一些高级的技术和框架，如React、Angular、Webpack等，以及一些前端性能优化、安全等方面的知识。 除了学习基础知识和技术，还需要不断实践和练习，积累经验和提高技能。可以通过参与开源项目、参加技术社区、参加线下活动等方式来扩展自己的视野和交流经验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值