jQuery学习第一天（上）

jQuery 学习第一天（上）

在这里插入图片描述

目录

1.JavaScript 库

  • 定义：封装好的特定的集合（方法和函数），本质js文件，里面对js原生代码进行了封装
  • 常见的JavaScript 库
    • jquery
    • prototype
    • YUI
    • Dojo
    • Ext JS
    • 移动端的zepto

2. jQuery 库

  • 封装了常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互
  • 图解

在这里插入图片描述

  • 优点
    • 轻量级
    • 跨浏览器兼容
    • 链式编程，隐式迭代
    • 对事件、样式、动画支持，大大简化了DOM操作
    • 树形菜单，日期控件，轮播图

2.1 jQuery的下载

  • 版本
    • 1x：兼容ie678，不在更新
    • 2x：不兼容ie678，不在更新
    • 3x：不兼容ie678，还在更新

2.2 jQuery的入口函数

  • 都是为了在DOM加载完毕后再执行jQuery代码

  • 第一种方法

// 1.入口函数第一种写法
        $(document).ready(function() {
 
        });
  • 第二种方法
// 2.第二种写法
        $(function() {
 
        });

示例

<!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>
    <!-- 1.引入jQuery文件 -->
    <script src="./jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    <script>
        // 1.入口函数第一种写法
        // $(document).ready(function() {
 
        // });
 
        // 2.第二种写法
        $(function() {
            // 隐藏div盒子
            $('div').hide();
        });
    </script>
    <div></div>
</body>
 
</html>
  • 效果图

在这里插入图片描述

注意点

  • 等待DOM结构渲染完毕即可执行代码（相当于DOMContentLoaded）

2.3 jQuery的顶级对象$

  • $ 是jQuery的别称，在代码中可以用jQuery代替 , 但 通 常 使 用 ,但通常使用 ,但通常使用
  • $ 是jQuery的顶级对象，相对于JavaScript中的window，把元素利用$包装成jQuery对象，就可以使用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="./jquery.min.js"></script>
</head>
 
<body>
    <script>
        jQuery(document).ready(function() {
            alert(11);
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

2.4 jQuery对象和DOM对象

  • 用原生js获取的为DOM对象
  • 用jQuery方法获取的是jQuery对象
  • jQuery的本质是用$将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>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <div></div>
    <span></span>
    <script>
        // 1.DOM对象的获取方式
        var div = document.querySelector('div');
        console.dir(div);
        // 2.jquery对象的获取方式,获取的是一个伪数组，使用了$把DOM对象包装成了一个新的jQuery对象
        var jdiv = $('div');
        console.dir(jdiv);
        // 3.DOM对象只能使用DOM对象的方法，jQuery对象只能使用jQuery对象的方法
        div.style.backgroundColor = 'blue';
        jdiv.hide();
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

注意点

  • DOM对象和jQuery对象的方法不能混用

2.5 jQuery对象和DOM对象的转换

  • DOM对象转换为jQuery对象
$(DOM对象)
  • jQuery对象转换为DOM对象
$('div')[index] index是索引号
  • 或者
$('div').get(index)

示例

<!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="./jquery.min.js"></script>
</head>
 
<body>
    <!-- 1.muted属性不禁用自动播放 -->
    <video src="./mov.mp4" muted></video>
    <script>
        // 1.获取DOM对象
        var myvideo = document.querySelector('video');
        // 2.转成jQuery对象
        var jvedio = $(myvideo);
 
        // 3.jQuery对象转换成DOM对象
        var dvideo = jvedio[0];
 
        // 使用DOM的自动播放属性
 
        dvideo.play();
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

3. jQuery选择器

3.1 基础选择器

  • 格式
$('选择器')   //这里的选择器同css的相同
  • 层级选择器
$('li>a')
$('li a')

示例

<!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="./jquery.min.js"></script>
</head>
 
<body>
    <div></div>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="box">14</li>
    </ol>
 
    <script>
        $(function() {
            // 1.选择器
            var list = $('ol li');
            console.log(list);
 
            // 2。类选择器
 
            var li1 = $('.box');
            console.log(li1);
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

3.2 jQuery设置样式

$('div').css('属性'，'值')

3.3 隐式迭代

  • 遍历内部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="./jquery.min.js"></script>
</head>
 
<body>
    <ol>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ol>
 
    <script>
        $(function() {
            $('ol li').css('backgroundColor', 'pink');
            $('ol li').css('color', 'blue');
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

3.4 筛选选择器

语法用法描述
:first$(‘li:first’)获取第一个li元素
:last$(‘li:last’)获取最后一个li元素
:eq(index)$(‘li:eq(2)’)获取第3个li元素，index从0开始
:odd()$(‘li:odd’)获取index为奇数的li元素
:even$(‘li:even’)获取index为偶数的li元素

示例

<!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="./jquery.min.js"></script>
</head>
 
<body>
    <ol>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
    </ol>
 
    <ul>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
 
    </ul>
    <script>
        $(function() {
            // 1.获取ol中的第一个li标签
            var first = $('ol li:first');
            first.css('color', 'red');
            console.log(first);
            // 2. 获取ol中的最后一个li标签
            var last = $('ol li:last');
            last.css('color', 'blue');
            console.log(last);
            // 3.获取ol中index为2的元素（第3个）
            var index2 = $('ol li:eq(2)');
            index2.css('color', 'orange');
            console.log(index2);
 
            // 获取ul中的odd（index为奇数）的li
            var odd = $('ul li:odd');
            odd.css('color', 'skyblue');
 
            // 获取ul中even（index为偶数的）li
            var even = $('ul li:even');
            even.css('color', 'pink');
 
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

3.5 jQuery筛选方法

语法用法说明
parent()$(‘li’).parent()查找父级
children(selector)$(‘ul’).children(‘li’)相对于$(‘ul>li’),查找最近一级（亲儿子）
find(selector)$(‘ul’).find(‘li’)相对于$(‘ul li’),后代选择器
siblings(selector)$(’.first’).siblings(‘li’)查找兄弟节点，不包括元素本身
nextAll([expr])$(’.first’).nextAll()查找当前元素之后的所有同辈元素
prevAll([expr])$(’.last’).prevAll()查找当前元素的所有同辈元素
hasClass(class)$(‘div’).hasClass(‘protected’)检查当前的元素是否含有某个特定的类，如果有。返回true
eq(index)$(‘li’).eq(2)相对于$(‘li:eq(2)’),index从零开始

注意点

  • 重点记住：parent(),children(),find(),sibling(),eq()

示例

<!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="./jquery.min.js"></script>
</head>
 
<body>
    <div class="nav">
        <p>我是son</p>
        <div>
            <p>我是sun</p>
        </div>
    </div>
 
    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>
 
    <ul>
        <li class="first"></li>
        <li>我是第二个li</li>
        <li></li>
        <li></li>
        <li class="last"></li>
    </ul>
 
    <script>
        $(function() {
            // 选择父亲（亲爸爸），最近一级
            console.log($('.sun').parent());
 
            // 选择儿子
 
            console.log($('.nav').children('p'));
 
            // 选择兄弟,不包括自己
 
            console.log($('.first').siblings('li'));
 
            // 选择在此之前的同辈元素，不包括自己
 
            console.log($('.last').prevAll());
 
            // 选择第二个li
 
            console.log($('ul li').eq(1));
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

新浪下拉菜单案例

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            margin-right: 20px;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 1.获取ul中的所有小li(亲儿子)
            $('.nav>li').mouseover(function() {
                // 2.显示小li中的ul
                $(this).children('ul').show();
            });
 
            $('.nav>li').mouseout(function() {
                // 2.显示小li中的ul
                $(this).children('ul').hide();
            });
        })
    </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="./jquery.min.js"></script>
</head>
 
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
 
    <script>
        $(function() {
            // 1.给所有的按钮绑定事件，隐式迭代
            $('button').click(function() {
                // 2.给点击的按钮设置蓝色，
                $(this).css('background', 'blue');
                // 3.给兄弟设置默认的
 
                $(this).siblings().css('background', '');
            })
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

精品服饰展示案例

<!DOCTYPE html>
<html>
 
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }
        
        #left,
        #content {
            float: left;
        }
        
        #left li {
            background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        
        #left li a:hover {
            background-image: url(images/abg.gif);
        }
        
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="./jquery.min.js"></script>
 
</head>
 
<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="./images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="./images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="./images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="./images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="./images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="./images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="./images/女裤.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="./images/羽绒服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="./images/牛仔裤.jpg" width="200" height="250" /></a>
            </div>
 
        </div>
 
 
    </div>
 
    <script>
        $(function() {
            $('#left li').click(function() {
                // 1.获取当前的索引号
                var index = $(this).index();
 
                // 2.让对应的索引号图片显示
 
                $('#content div').eq(index).show();
                console.log(index);
 
                // 3.兄弟隐藏
                $('#content div').eq(index).siblings().hide();
            })
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

4. 链式编程

  • 节省代码量
s('this').css('background','red').siblings().css('background','')

示例

<!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="./jquery.min.js"></script>
</head>
 
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
 
    <script>
        $(function() {
            // 1.给所有的按钮绑定事件，隐式迭代
            $('button').click(function() {
                // 2.给点击的按钮设置蓝色，
 
                // 3.给兄弟设置默认的
 
                //    链式编程
 
                $(this).css('background', 'blue').siblings().css('background', '');
            })
        })
    </script>
</body>
 
</html>

5. jQuery修改css样式

  • 如果css方法中只写属性，返回属性值
console.log($('div').css('width'));
  • 设置多组属性
$('div').css({
                'width': '200px',
                'height': '300px',
                'backgroundColor': 'blue'
            })

示例

<!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>
    <style>
        div {
            width: 100px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <div></div>
    <script>
        $(function() {
            // 1.如果设置css样式时只写属性，会返回属性值
 
 
            console.log($('div').css('width'));
 
            // 2.设置多组样式
 
            $('div').css({
                'width': '200px',
                'height': '300px',
                'background-color': 'blue'
            })
        })
    </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>
    <style>
        div {
            width: 100px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <div></div>
    <script>
        $(function() {
            // 1.如果设置css样式时只写属性，会返回属性值
 
 
            console.log($('div').css('width'));
 
            // 2.设置多组样式
 
            $('div').css({
                'width': '200px',
                'height': '300px',
                'background-color': 'red'
            })
 
            // $('div').css({
            //     // 属性名可以不加引号，属性值为数字可以不加引号
            //     width: 200,
            //     height: '300px',
            //     backgroundColor: 'red'
            // })
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

6.jQuery操作类名

方法说明
addClass(‘类名’)给当前元素添加类名
removeClass(‘类名’)移除当前元素的类名
toggleClass(‘类名’)切换类名，如果有该类名，切换成没有，如果没有，切换成有

示例

<!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>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            transition: all .5s;
        }
        
        .current {
            background-color: blue;
            transform: rotate(360deg);
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <div class="first"></div>
    <div class="second current"></div>
    <div class="third"></div>
    <script>
        $(function() {
            // 1.添加类名
            $('div.first').click(function() {
                $(this).addClass('current');
            })
 
            // 2.移除类名
 
            $('div.second').click(function() {
                $(this).removeClass('current');
            })
 
            // 3.切换类名
 
            $('div.third').click(function() {
                $(this).toggleClass('current');
            })
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

tab栏切换案例

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
 
        </div>
    </div>
 
    <script>
        $(function() {
            $('.tab_list li').click(function() {
                var index = $(this).index();
                $('.tab_con div').eq(index).show().siblings().hide();
                $(this).addClass('current').siblings().removeClass('current');
            })
        })
    </script>
 
</body>
 
</html>
  • 效果图

在这里插入图片描述

类操作与className的区别

  • 原生JS中的className会覆盖掉原先的类名
  • 而jQuery的类名操作不会影响之前的类名
posted @   凌歆  阅读(68)  评论(0)  编辑  收藏  举报
相关博文：
· jQuery学习第一天（下）
· jQuery学习第二天
· jQuery基础总结
· jQuery
· jQuery从入门到精通
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示