JQuery常用API

最新推荐文章于 2023-07-07 16:31:11 发布
最新推荐文章于 2023-07-07 16:31:11 发布
阅读量301 收藏 5
点赞数 2
分类专栏： web前端 文章标签： jquery css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Python1One/article/details/120896234
版权

jQuery选择器

1. jQuery基础选择器

$("选择器") // 里面直接写css选择器即可，但是要加引号

名称用法描述
ID选择器$("#id")获取指定ID元素
全选选择器$("*")匹配所有元素
类选择器$(".class")获取同一类class的元素
标签选择器$(“div”)获取同一类标签的所有元素
并集选择器$(“div,p,li”)选取多个元素
交集选择器$(“li.current”)交集元素
子代选择器$(“ul>li”);使用>号，获取亲儿子层级的元素；注意不会获取孙子层级的元素
后代选择器$(“ul li”);使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

知识铺垫
jQuery设置样式$("div").css("属性","值")

3. 隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐士迭代
简单理解：给匹配的所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化我们的操作，方便我们调用

4. jQuery筛选选择器

|语法|用法|描述|
|:first| ( " l i : f i r s t " ) ∣ 获 取 第 一 个 l i 元 素 ∣ ∣ : l a s t ∣ ("li:first")|获取第一个li元素| |:last| ("li:first")∣获取第一个li元素∣∣:last∣(“li:last”)|获取最后一个元素|
|:eq(index)| ( " l i : e q ( 2 ) " ) ∣ 获 取 索 引 号 为 2 的 l i 元 素 i n d e x 从 0 开 始 ∣ ∣ : o d d ∣ ("li:eq(2)")|获取索引号为2的li元素index从0开始| |:odd| ("li:eq(2)")∣获取索引号为2的li元素index从0开始∣∣:odd∣(“li:odd”)|获取到li元素中，选择索引号为奇数的元素|
|:even|$(“li:even”)|获取到li元素中，选择搜引号为偶数的元素|

5. jQuery筛选方法(重点)

语法用法说明
parent()$(“li”).parent();查找父级
children(selector)$(“li”).children(“li”)相当于$(“ul”).chilren(“li”)
find(selector)$(“ul”).find(“li”)相当于$(“ul li”)，后代选择器
siblings(selectot)$(".first").siblings(“li”)查找兄弟节点，不包括自己本身
nextAll([expr])$(".first").nextAll()查找当前元素之后所有同辈元素
prevtAll([expr])$(".last").prevtAll();查找当前元素之前所有同辈元素
hasClass(class)$(“div”).hasCLass(“protected”)查找当前元素是否含有某个特定的类，有则返回true
eq(index)$(“li”).eq(2)相当于$(“li:eq(2)”),index从0开始

重点记住：parent() children() find() siblings() 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>

    <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;
            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>

</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 () {
            // 鼠标经过
            $('.nav>li').mouseover(function () {
                //$(this) 是jQuery的this 不加引号
                //show() 显示元素
                $(this).children("ul").show();
            })
            //鼠标离开
            $('.nav>li').mouseout(function () {
                $(this).children('ul').hide();
            })
        })
    </script>

</body>

</html>

6. jQuery 里排他思想

想要做到多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

<!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>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function () {
            // 1. 迭代隐式 给所有按钮都绑定了点击事件
            $("button").click(function () {
                //2. 当前元素变化背景颜色
                $(this).css("background", "red");
                //3. 其余的兄弟元素去掉颜色
                $(this).siblings("button").css("background", "")
            });
        })
    </script>
</body>

</html>

案例：淘宝服饰精品

案例分析

  1. 鼠标经过左侧盒子某个小li，就让内容区的盒子相对应图片显示，其余的图片隐藏
  2. 需要得到当前小li的索引号，就可以显示对应索引号的图片
  3. jQuery得到当前元素索引号$(this).index();
  4. 中间对应的图片，可以通过eq方法去选择
  5. 显示元素 show(); 隐藏元素hide();
<!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>
    <script>
        $(function () {
            //1. 鼠标经过事件 
            $("#left li").mouseover(function () {
                // 2. 得到当前元素索引号
                var index = $(this).index();
                //3. 当前元素索引号的div盒子显示
                $("#content div").eq(index).show();
                //4. 除当前索引号div之外的盒子隐藏
                $("#content div").eq(index).siblings().hide();
            })
        })
    </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>
</body>

</html>

8. 链式编程

链式编程是为了节省代码量，看起来优雅
$("#content div").eq(index).show().siblings().hide();
使用链式编程一定要注意对哪个对象执行样式

2. jQuery样式操作

1. 操作CSS方法

jQuery可以使用css来修改简单元素样式；也可以操作类修改多个样式

  1. 参数只写属性名，则是返回属性值$(this).css("color")
  2. 参数是属性名，属性值，逗号分割，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位个引号$(this).css("color","red");
  3. 参数可以使对象形式，方便设置多组样式。属性名和属性值用冒号分割，属性可以不用加引号，值是数字可以不加引号和单位$(this).css({"color":red,"font-size":"20px"})

2. 设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。

  1. 添加类$("div").addClass("current");

案例 tab兰切换

分析

  1. 点击上方的li，当前li添加current类其他兄弟移除类
  2. 点击的同时获取当前的索引号
  3. 根据索引号将item进行显示，其余兄弟隐藏
<!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 () {
            var i;
            $(".tab_list li").click(function () {
                //1. 1. 点击上方的li，当前li添加current类其他兄弟移除类
                $(this).addClass("current").siblings().removeClass("current");
                // 2. 点击的同时获取当前的索引号
                var index = $(this).index();
                // console.log(index);
                // 3. 根据索引号将item进行显示，其余兄弟隐藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            })

        })
    </script>
</body>

</html>

3. 类操作与className的区别

原生JS中className会覆盖元素原先里面的类名

var div = doucument.querySelector("div");
div.className = "one";

是将div中的className改为one，之前的类名会消失
jQuery里面类操作只是对指定类进行操作，不影响原先的类名
$("div").addClass("one")相当于追加一个类名，不影响之前的类名

3. jQuery效果

jQuery给我们封装了跟多动画效果，最为常见如下

  1. 显示隐藏：show(),hide(),toggle()
  2. 滑动效果：slideDown(),slideUp(),slideToggle()
  3. 淡入淡出：fadeln(),fadeOut(),fadeToggle(),fadeTo()
  4. 自定义动画：animate()

1. 显示隐藏效果

  1. 显示语法规范
    show([speed,[easing],[fn]])
  2. 显示参数
    1. 参数都可以省略，无动画直接显示。
    2. speed:三种预订速度之一的字符串(“show”,“normal”,“fast”)或者表示动画时长的毫秒数值（如：1000）。
    3. easing：用来指定切换效果默认是“swing”，可用参数“linear”
    4. fn：回调函数，在动画完成后执行函数，每个元素再执行一次
  3. 隐藏语法规范
    hide([speed,[easing],[fn]])
  4. 隐藏参数
    1. 参数都可以省略，无动画直接隐藏。
    2. speed:三种预订速度之一的字符串(“show”,“normal”,“fast”)或者表示动画时长的毫秒数值（如：1000）。
    3. easing：用来指定切换效果默认是“swing”，可用参数“linear”
    4. fn：回调函数，在动画完成后执行函数，每个元素再执行一次
<!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>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(1).click(function () {
                // div 1秒钟内消失，完全消失后弹出1
                $("div").hide(1000, function () {
                    alert(1);
                });
            })
            $("button").eq(0).click(function () {
                // div 1秒钟内消失，完全消失后弹出1
                $("div").show(1000, function () {
                    alert(1);
                });
            })
            $("button").eq(2).click(function () {
                // div 1秒钟内消失，完全消失后弹出1
                $("div").toggle(1000, function () {
                });
            })
            // 一般情况下，我们都不加参数直接显示隐藏就可以了
        });
    </script>
</body>

</html>

2. 滑动效果

  1. 下滑动语法规范
    slideDown([speed,[easing],[fn]])
  2. 滑动参数
    1. 参数都可以省略，无动画直接显示。
    2. speed:三种预订速度之一的字符串(“show”,“normal”,“fast”)或者表示动画时长的毫秒数值（如：1000）。
    3. easing：用来指定切换效果默认是“swing”，可用参数“linear”
    4. fn：回调函数，在动画完成后执行函数，每个元素再执行一次
  3. 上拉语法规范
    slideUp([speed,[easing],[fn]])
  4. 隐藏参数
    1. 参数都可以省略，无动画直接隐藏。
    2. speed:三种预订速度之一的字符串(“show”,“normal”,“fast”)或者表示动画时长的毫秒数值（如：1000）。
    3. easing：用来指定切换效果默认是“swing”，可用参数“linear”
    4. fn：回调函数，在动画完成后执行函数，每个元素再执行一次
  5. 切换语法规范
    slideToggle([speed,[easing],[fn]])
  6. 隐藏参数
    1. 参数都可以省略，无动画直接隐藏。
    2. speed:三种预订速度之一的字符串(“show”,“normal”,“fast”)或者表示动画时长的毫秒数值（如：1000）。
    3. easing：用来指定切换效果默认是“swing”，可用参数“linear”
    4. fn：回调函数，在动画完成后执行函数，每个元素再执行一次
<!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>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                //1. 下拉滑动
                $("div").slideDown();
            })
            $("button").eq(1).click(function () {
                $("div").slideUp();
                //2. 上滑动
            })
            $("button").eq(2).click(function () {
                $("div").slideToggle();
                //3. 滑动切换
            })
        });
    </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;
            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 () {
            // 鼠标经过
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function () {
            //     $(this).children("ul").slideDown(100);
            // }, function () {
            //     $(this).children("ul").slideUp(100);
            // })
            // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function () {
                $(this).children("ul").slideToggle(100);
            })
        });

    </script>
</body>

</html>

3. 事件切换

hover([over,]out)

  1. over：鼠标移到元素上触发函数 （相当于mouseenter）
  2. out：鼠标离开元素触发函数（相当于mouseover）

4. 动画队列机器停止排队方法

  1. 动画或效果队列
    动画或效果一单触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。
  2. 停止排队
    stop()
    1. stop()方法用于停止动画或效果
    2. 注意：stop()写到动画或效果的前面，相当于停止结束上一次的动画

5. 淡入淡出效果

  1. 淡入淡出语法规范
    fadeIn([speed,[easing],[fn]])

  2. 淡入参数

    1. 参数都可以省略，无动画直接显示。
    2. speed:三种预订速度之一的字符串(“show”,“normal”,“fast”)或者表示动画时长的毫秒数值（如：1000）。
    3. easing：用来指定切换效果默认是“swing”，可用参数“linear”
    4. fn：回调函数，在动画完成后执行函数，每个元素再执行一次

  3. 淡入淡出语法规范
    fadeOut([speed,[easing],[fn]])

  4. 淡出参数

    1. 参数都可以省略，无动画直接显示。
    2. speed:三种预订速度之一的字符串(“show”,“normal”,“fast”)或者表示动画时长的毫秒数值（如：1000）。
    3. easing：用来指定切换效果默认是“swing”，可用参数“linear”
    4. fn：回调函数，在动画完成后执行函数，每个元素再执行一次

  5. 切换语法规范
    fadeToggle([speed,[easing],[fn]])

  6. 隐藏参数

    1. 参数都可以省略，无动画直接隐藏。
    2. speed:三种预订速度之一的字符串(“show”,“normal”,“fast”)或者表示动画时长的毫秒数值（如：1000）。
    3. easing：用来指定切换效果默认是“swing”，可用参数“linear”
    4. fn：回调函数，在动画完成后执行函数，每个元素再执行一次

  7. 渐进方式挑中指定的不透明度
    fadeTo([[speed],opacity,[easing],[fn]])

  8. 参数效果

    1. opacity 透明度必须写，取值0~1
    2. speed：三种预订速度之一的字符串(“show”,“normal”,“fast”)或者表示动画时长的毫秒数值（如：1000）。必须写
    3. easing：用来指定切换效果默认是“swing”，可用参数“linear”
    4. fn：回调函数，在动画完成后执行函数，每个元素再执行一次
<!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>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                //1. 淡入
                $("div").stop().fadeIn();
            })
            $("button").eq(1).click(function () {
                //1. 淡出
                $("div").stop().fadeOut();
            })
            $("button").eq(2).click(function () {
                //1. 淡入淡出切换
                $("div").stop().fadeToggle();
            })
            $("button").eq(3).click(function () {
                //1. 更改透明度  这个速度和透明度一定要写
                $("div").fadeTo(1000, 0.5)
            })
        })

    </script>
</body>

</html>

案例鼠标聚焦

<script>
        $(function () {
            // 1. 当鼠标进入 其他的li标签透明度变为0.5

            $(".wrap li").hover(function () {
                $(this).siblings().stop().fadeTo(100, 0.5);
            }, function () {
                //2. 鼠标离开 其他li透明度为1
                $(this).siblings().stop().fadeTo(100, 1)
            })

        })

    </script>

6. 自定义动画animate

  1. 语法
    animate(params,[speed],[easing],[fn])
  2. 参数
    1. params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法borderLeft。其余参数都可省略
    2. speed：三种预订速度之一的字符串(“show”,“normal”,“fast”)或者表示动画时长的毫秒数值（如：1000）。必须写
    3. easing：用来指定切换效果默认是“swing”，可用参数“linear”
    4. fn：回调函数，在动画完成后执行函数，每个元素再执行一次
<!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>
    <script src="jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function () {
            $("button").click(function () {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: 0.4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

</html>

案例 手风琴效果

案例分析

  1. 鼠标经过有两个操作
  2. 当前li宽度变为224px，同时里面的小图片淡出，大图片淡入
  3. 其余兄弟li快读变为69px，小图片淡出，大图片淡入
<script type="text/javascript">
        $(function () {
            $(".king li").mouseenter(function () {
                //1. 当前li宽度变为224px，同时小图淡出大图淡入
                $(this).stop().animate({
                    width: 224,
                }, 100).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                //2. 其余兄弟li跨度变为63px小图淡入，大图淡出
                $(this).siblings("li").stop().animate({
                    width: 69,
                }, 100).find(".big").stop().fadeOut().siblings(".small").stop().fadeIn();

            });


        })

    </script>

4. jQuery属性操作

1. 设置或获取元素的固有属性prop()

所谓的固有属性就是元素本身带的属性，比如元素里的href属性，元素里的type属性

  1. 获取属性语法
    prop("属性")
  2. 设置属性值
    prop("属性","属性值")

2. 设置或获取元素自定义属性值attr()

用户自己给元素添加的属性，称为自定义属性，如给div添加index = “1”。

  1. 获取属性语法
    attr("属性") // 类似于原生getAttribute()
  2. 设置属性值
    attr("属性","属性值") // 类似于原生setAttribute()

该方法也可以获取H5自定义属性

3. 数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一单页面刷新，之前存放点额数据都将被移除

  1. 获取属性语法
    data("属性")
  2. 设置属性值
    data("属性","属性值")
<!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>
    <script src="jquery.min.js"></script>
</head>

<body>
    <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function () {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            //2. 设置属性值
            $("a").prop("title", "不太好");
            console.log($("a").prop("title"));

            //3. 通过prop获取复选框状态
            $("input").change(function () {
                console.log($(this).prop("checked"));
            })

            //4. 元素自定义属性通过attr()获取

            console.log($("div").attr("index"));

            $("div").attr("index", 4)
            console.log($("div").attr("data-index"));

            //5. 数据缓存 data() 这个里面的数据存放在元素的内存里面

            $("span").data("uname", "andy");

            console.log($("span").data("uname"));

            //获取的是data-index H5自定义属性 不用写data- 而且返回数字型
            console.log($("div").data("index"));

        })
    </script>
</body>

</html>

案例 购物车

购物车案例-全选

案例分析

  1. 全选思路：里面3个小复选框(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走
  2. 因为checkbox是复选框固有属性，此时需要利用prop()方法获取和设置属性
  3. 把全选按钮状态赋值给3小复选框就可以了
  4. 当我们每次点击小复选框按钮就判断
  5. 如果小复选框被选中的个数等于3就应把全选按钮选中，否则不全选
  6. :checked选择器 查找被选中的表单元素

购物车案例-增减商品数量分析

案例分析

  1. 核心思路：首先声明一个变量，当我们点击+（increment）,就让这个值++，然后赋值给文本框。
  2. 注意1：只能增加本商品数量，就是当前+号的兄弟文本框（itxt）的值
  3. 修改表单的值val()方法
  4. 注意2：这个变量值应该是这个文本框的值，在这基础上++，要获取表单值
  5. 减号(decrement)思路相同，但是文本框值是是1就不能再减了。

购物车案例-修改商品小计分析

案例分析

  1. 核心思路：每次点击+或-，根据文本框的值乘当前商品价格就是商品的小计
  2. 注意1：只能修改当前商品的小计(p-sum)
  3. 修改普通元素的内容使用text()方法
  4. 注意2：当前商品价格要去掉￥再去计算，截取字符串substr(1)
  5. parents(“选择器”)可以返回指定祖先元素
  6. 保留两位小数通过toFixed(2)方法实现
  7. 用户也可以直接修改变单元素，也要计算小计，用表单change事件
  8. 用最新的表单内的值乘以单价即可，但还是当前商品小计

购物车案例-计算总计和总额

案例分析

  1. 核心思路：把所有文本框值相加
  2. 文本框里面的志不同，如果想要相加需要用到each遍历。声明一个变量相加即可
  3. 点击+或-号 或者手动输入了数量 都会改变总计和总额
  4. 可以封装一个函数
  5. 注意1：总计文本框的值相加用val()，总额是普通元素用text()

购物车案例- 删除商品模块

案例分析

  1. 核心思路：把商品remove()删除元素即可
  2. 有三个地方需要删除：1. 商品后面的删除按钮；2. 删除选中商品；3. 清空购物车
  3. 商品后面的删除按钮：一定删除当前商品，所以从$(this)出发
  4. 删除选中商品：先判断小的复选框是否选中，如选中则删除

购物车案例-选中商品添加背景

案例分析

  1. 核心思路：选中商品添加背景，不选中移除背景即可
  2. 全选按钮：如果全选是选中的，则所有商品添加背景，否则移除背景
  3. 小的复选框点击：如果全选是选中的，则当前商品添加背景，否则移除背景
  4. 这个背景可以通过类名修改，添加移除类

jQuery代码

$(function () {
    getSum();
    //1. 全选 全不选功能模块
    // 把全选按钮(checkall)状态给三个小的按钮
    //事件可以使用change
    $(".checkall").change(function () {
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        //  更改背景颜色
        getSum();
        if ($(this).prop("checked")) {
            //让所有商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item")
        } else {
            // 移除check-cart-item类名
            $(".cart-item").removeClass("check-cart-item")
        }


    })
    //2.  如果小复选框被选中的个数等于3就应把全选按钮选中，否则不全选
    $(".j-checkbox").change(function () {
        // console.log($(".j-checkbox:checked").length);
        //输出 .j-checkbox元素被选中个数
        // $(".j-checkbox").length是所有复选框的个数
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        getSum();
        //更改背景

        if ($(this).prop("checked")) {
            //让当前商品添加 check-cart-item 类名
            $(this).parents(".cart-item").addClass("check-cart-item")
        } else {
            // 移除check-cart-item类名
            $(this).parents(".cart-item").removeClass("check-cart-item")
        }
    })
    //3. 声明一个变量，当我们点击+（increment）,就让这个值++，然后赋值给文本框。
    $(".increment").click(function () {
        var i = $(this).siblings(".itxt").val();
        // console.log(i);
        i++;
        $(this).siblings(".itxt").val(i);
        //小计模块
        // var p = $(this).parent().parent().siblings(".p-price").text().substr(1)
        //使用parents(选择器)返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1)
        // 保留两位小数
        var price = (p * i).toFixed(2);
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + price)
        getSum();
    })
    $(".decrement").click(function () {
        var i = eval($(this).siblings(".itxt").val());
        // console.log(i);
        i == 1 ? i : i--;
        // console.log(i);
        $(this).siblings(".itxt").val(i);
        //小计模块
        var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1)
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + (p * i).toFixed(2))
        getSum();

    })
    //4. 用户修改文本框的值计算小计模块
    $(".itxt").change(function () {
        // 价钱 = 当前文本框的值  *  当前商品的单价
        var price = $(this).val() * $(this).parents(".p-num").siblings(".p-price").text().substr(1);
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + price.toFixed(2))
        getSum();
    })
    //5. 计算总计和总额模块
    function getSum() {
        var count = 0;//计算总件数
        var money = 0; // 计算总价钱
        //改进只计算勾选的书籍
        $(".j-checkbox:checked").each(function (i, ele) {
            count += parseInt($(ele).parents(".p-checkbox").siblings(".p-num").find(".itxt").val());
            money += parseFloat($(ele).parents(".p-checkbox").siblings(".p-sum").text().substr(1))

        })
        $(".amount-sum em").text(count);
        $(".price-sum em").text(money.toFixed(2))



        // 只要在购物车就计算
        // $(".itxt").each(function (i, ele) {
        //     count += parseInt($(ele).val());
        // })
        // $(".amount-sum em").text(count);

        // $(".p-sum").each(function (i, ele) {
        //     money += parseFloat($(ele).text().substr(1));
        // })
        // $(".price-sum em").text(money.toFixed(2))
    }

    //6. 删除商品模块
    //(1)商品后面的删除
    $(".p-action a").click(function () {
        $(this).parents(".cart-item").remove();
        getSum();
    });
    //(2) 删除选中商品
    $(".remove-batch").click(function () {
        //删除的是小的复选框选中的商品
        //使用 :checked筛选出来选中的复选框
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    })
    //(3) 清空购物车
    $(".clear-all").click(function () {
        $(".cart-item").remove();
        getSum();
    })
})

5. jQuery文本属性值

主要针对元素的内容还有表单的值操作

1. 普通元素内容html()（相当于原生innerHTML）

html() //获取元素内容
html("内容") //设置元素内容

2. 普通元素文本内容text() (相当于原生innerText)

text() //获取元素文本
text("内容") // 设置元素文本

3. 表单的值val()(相当于元素value)

val() // 获取表单的值value值
val("内容") // 设置表单的value值

6. jQuery元素操作

主要是遍历、创建、添加、删除元素操作

1. 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想给同一类元素不同的操作需要用到遍历
语法1
$("div").each(fucntion(index,domEle){xxxx;})

  1. each()方法遍历匹配元素的每一个元素，主要用DOM处理.

  2. 回调函数的两个参数：index是每个元素的索引号，domEle是没一个DOM元素，不是jQuery对象

  3. **要想使用jQuery方法需要给这个dom元素转换为jQuery对象 ( d o m E l e ) ∗ ∗ ∗ ∗ 语 法 2 ∗ ∗ ‘ (domEle)** **语法2** ` (domEle)∗∗∗∗语法2∗∗‘.each(object,function(index,element){xxx;})`

  4. $.each()方法可以用于遍历任何对象。主要用于数据处理，比如数组，对象

  5. 里面的函数有2个参数：index是每个元素的索引号；element遍历内容

<!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>

    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            // $("div").css("color", "red")
            //如果要想给同一元素添加不通效果，需要遍历（类似for，但是比for更强大）
            //1. each()方法遍历
            var sum = 0;
            var arr = ["red", "blue", "yellow"];
            $("div").each(function (index, domElm) {
                // 回调函数第一个参数一定是索引号
                // console.log(index);
                //回调函数第二个函数是dom元素对象
                console.log(domElm);
                $(domElm).css("color", arr[index])

                sum += parseInt($(domElm).text());
            })
            console.log(sum);

            //2. $.each()方法遍历元素 主要用于遍历数据，处理数据
            $.each($("div"), function (i, ele) {
                // console.log(i);
                // console.log(ele);
            })
            $.each(arr, function (i, ele) {
                console.log(ele);
            })
            $.each({
                name: "andy",
                age: 18
            }, function (i, ele) {
                console.log(i);
                console.log(ele);
            })
        })

    </script>
</body>

</html>

2. 创建元素

语法
$("<li></li>")

3. 添加元素

  1. 内部添加
    element.append("内容") //把内容放入匹配元素的最后面，类似于原生的appendChild

element.prepend("内容") //把内容放入匹配元素的最前面

  1. 外部添加
    element.after("内容") 钠元素放入目标元素的后面
    element.before("内容") 钠元素放入目标元素的前面

4. 删除元素

element.remove() //删除匹配的元素（本身）
element.empty() //删除匹配的元素集合中所有的子节点
element.html("") //清空匹配的元素内容

7. jQuery尺寸、位置操作

1. jQuery尺寸

语法用法
width()或height()取得匹配元素的宽度和高度值 只算width和height
innerWidth()或innerHeight()取得匹配元素的宽度和高度值 包括padding
outerWidth()或outerHeight()取得匹配元素的宽度和高度值 包括padding、border
outerWidth(ture)或outerHeight(ture)取得匹配元素的宽度和高度值 包括padding、border、margin
  • 以上参数为空就是获取相应值，返回类型是数字
  • 如果参数为数字，则是修改响应值
  • 参数可以不写单位

2. jQuery位置

位置主要有三个 offset()、position()、scrollTop()/sscrollLeft()

  1. offset()设置或获取元素偏移

    1. offset()方法设置或返回被选元素相对于文档的偏移坐标，和父级没有关系
    2. 该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
    3. 可以设置元素的偏移量offset({top:10,left:30});

  2. position()获取元素偏移量

    1. position（）方法用于返回被选元素相对于带有定位的父级元素偏移坐标，如果父级都没有定位，则以文档为准

  3. scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

    1. scrollTop（）方法设置或返回被选元素被卷去的头部

案例 带有动画的返回顶部

  1. 核心原理：使用animate动画返回顶部
  2. animate函数动画有个属性scrollTop属性可以设置位置
  3. 但是是元素动画，因此$(“body,html”).animate({scrollTop:0})

案例 品优购电梯导航

  1. 当我们滚动到今日推荐模块就让电梯导航显示出来
  2. 点击电梯导航页面可以滚动到相应内容区域
  3. 核心算法：因为电梯导航模块和内容模块一一对应
  4. 当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
  5. 就可以吧animate要移动的距离求处理：当前索引号内容区模块他的offset().top
  6. 然后执行即可

案例

  1. 当点击li 当前li添加current 其余兄弟移除
  2. 当我们页面滚动到内容区某个模块时 左侧电梯导航相应添加current 兄弟移除current类
  3. 触发事件是页面滚动 因此写到滚动事件里面
  4. 需要用到each 遍历内容区域大模块。each能拿到内容区的没一个模块元素和索引号
  5. 判断条件：被卷去的头部大于等于内容区域里面每个模块的offset().top

案例 节流阀 （互斥锁）

$(function () {
    // 当我们点击小li  此时不需要执行 页面滚动事件里的 li 的背景选择 添加 current
    // 节流阀  互斥锁 在点击时将flag=false此时滚动时不执行添加current  在animate事件中 启用回调函数   动画结束之后将 flag=ture
    var flag = true;

    //1. 显示隐藏电梯导航
    toggleTool()
    function toggleTool() {
        if ($(document).scrollTop() > $(".recommend").offset().top) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        }
    }
    $(window).scroll(function () {
        toggleTool();

        // 页面滚动到内容区某个模块时 左侧电梯导航相应添加current  兄弟移除current类
        if (flag) {
            $(".floor .w").each(function (i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
                }
            })
        }


    })
    //2. 点击电梯导航可以滚动到相应内容区域
    $(".fixedtool li").click(function () {
        //选出对应索引号的内容区的盒子  计算移动距离
        flag = false;

        var current = $(".floor .w").eq($(this).index()).offset().top;

        //页面滚动
        $("body,html").stop().animate({
            scrollTop: current
        }, function () {
            flag = true;
        })
        //点击之后 当前li添加current类名  其余兄弟 移除current
        $(this).addClass("current").siblings("li").removeClass("current")

    })

})
Z_cx
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 二 属性操作， 数据缓存data() ，内容文本值，元素遍历、创建、添加和删除操作，尺寸、位置操作，
m0_55170432的博客
03-23 306
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 1. 获取属性语法 2. 设置属性语法 element.prop("属性名") 1.获取元素固有的属性值 console.log($("a").prop("href")); element.prop("属性名",
jQuery常用api手册大全
06-20
jQuery是非常优秀的js类库，这里收集了它常用api手册，希望对大家有用。
jQuery API文档
01-15
jQuery API文档。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
常用API集合
09-03
ajax教程+EasyUI-API+1.3.2+java_ee_api_中英文对照版 +JDK_API_1_6_zh_CN+jquery1.8.3_zh+MyBatis3.2.3帮助文档（中文版） +MySQL5中文参考手册+W3CSchool+W3School离线手册(2017.03.11版)
jQuery API 中文手册
03-21
jQuery开发手册，可用于jQuery开发过程中常用函数的查询，并且其中含有常用函数的使用案例介绍。
jQuery -- 常用API（上）
weixin_58470558的博客
05-01 1589
jQuery选择器：jQuery基础选择器、jQuery层次选择器、隐式迭代、jQuery筛选选择器、 jQuery筛选方法（重点）、 jQuery里面的排他思想、链式编程；jQuery样式操作：操作css方法、操作类样式方法、类操作与className区别；jQuery效果：显示隐藏效果、滑动效果、动画队列及其停止排队方法、淡入淡出效果、自定义动画animate
JQuery API
10-20
Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，
jQuery常用api
weixin_34034261的博客
10-19 185
本文列举一些常用的jQuery的api。 $('selector').on() <ul> <li id="1">1</li> <li id="2">2</li> <li id="3">3</li> <li id="4">4</li> <l...
jQuery常用API
残影的博客
05-06 619
一、 jQuery选择器 1.1 基础选择器 原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。 $(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号 1.2 层级选择器 层级选择器最常用的两个分别为：后代选择器和子代选择器。 案例： <body> <div>我是div</div> <div class="nav">我是nav div</d
jQuery常用API操作.pptx
10-30
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do ...
jQuery常用的API
最新发布
m0_67388537的博客
07-07 383
jQuery常用API
jqueryApi
weixin_51207199的博客
05-10 227
文章目录什么是jquery？jQuery的DOM操作添加或删除calss中的操作jquery中的事件jquery中的ajax遍历与选择常用的apijQuery 效果 什么是jquery？ jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程 jquery插件里面提供一个全局的对象$和jQuery对象,本质是一个函数， $(document).ready(function(){ //预加载函数; //method }) $(function()
JQuery概述和常用API
qq_43714708的博客
05-08 631
JQuery概述和常用API
jQuery常用API及jQuery事件
weixin_45375510的博客
10-11 412
jQuery基本概述请戳：jQuery概述及基本使用 一、jQuery常用API 1、jQuery选择器 $('选择器') (1)基本选择器： ID选择器：$("#id"); 全选：* 类：. 标签：div 并集：div, span 交集：li.current (2)层级选择器： 子代：$("ul>li"); 后代：$("ul li"); (3)隐式迭代(重要) 遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代，简单理解就是，给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们自
Jquey 常用API
_Fozzz的博客
09-10 260
-------------设置属性---------------- //设置节点属性 $("div").attr("style", "background-color:red") //设置多个节点属性(js对象格式) $("div").attr({name:"name",password:"passwword"}) //设置节点style，是对attr的细化 $("div").css("bac
jQuery-常用API
weixin_45846980的博客
05-10 275
1-jQuery选择器 JQA-01：hide() 作用：隐藏 语法：$(‘名’).hide(); JQ-02:$(document).ready() 作用：入口函数，等着页面加载完成运行函数方法，相当于DOMContentLoaded 语法：$(document).ready(function(){ 方法 }) JQA-02S：$() 作用：跟Fun-02作用一致，升级简洁版 语法：$(function(){ 方法 }) JQA-04：$(‘选择器’) 作用：原生js获取元素的方式有很多，很杂，而且兼容性
jQuery 常用API
Lotus_fragrance的博客
06-07 477
jQuery 常用API

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值