jQuery 属性，元素

属性操作

固定属性 prop()

获取固定属性

$("a").prop("href")

2. 设置属性

$('a').prop("title", '我们')

注意:

prop 更加适用disabled / checked / selected 等。

自定义属性 attr()

获取自定义属性

$('div').attr('index')

2. 设置自定义属性

$('span').attr('index', 1)

数据缓存 data()

设置数据缓存

$('span').data('uname', 'peach')

2. 获取数据缓存

$('span').data('uname')

注意：

data 获取html5 自定义data-index，第一个不用写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>
</body>
<script>

    $(function () {
        // 1.获取固定属性名
        console.log($("a").prop("href"));
        console.log($("a").prop('title'));
        // 1.1 设置属性
        $('a').prop("title", '我们')

        // 1.2 prop 更加适用disabled / checked / selected 等。
        $('input').change(function () {
            console.log($(this).prop("checked"));
        })

        // 2 自定义属性
        // 2.1 获取自定义属性
        console.log($('div').attr('data-index'));
        console.log($('div').attr('index'));
        // 2.2 设置自定义属性
        $('span').attr('index', 1)

        // 3 数据缓存 data() 这个里面的数据是存放在元素的内存里面
        $('span').data('uname', 'peach'); // 设置缓存数据
        console.log($('span').data('uname'));  // 获取缓存数据
        // 3.1 data 获取html5 自定义data-index， 第一个 不用写data- , 得到的是数字型。
        console.log($('div').data('index'));

    })

</script>

</html>

示例代码

$(function () {
    // 全选和 全不选
    // 把全选的的状态给其他商品的状态即可
    // 1. 全选
    $('.checkall').change(function () {
        // 1.1 设置其他商品的状态和全选按钮 的状态一致
        console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

        // 1.2 如果全选则 让所有的商品添加 check-cart-item 类名
        if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加类名
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })

    // 2. 如果小框里面的数值等于所有数组，则选择全选
    $('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);

        // 如果当前选择的数量等于商品数量， 则全选选中
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }

        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");
        }
    })



})

案列-全选与全不选

文本数值

文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。

普通元素内容html() 对应JS中的 innerHTML
普通元素文本内容对应JS中的 innerText
表单的值对应JS中的 value

注意：html() 可识别标签，text() 不识别标签。

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

    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容 html()
        console.log($('div').html());
        // 1.1 设置HTML内容
        $('div').html('<h1>握手</h1>')

        // 2. 获取设置元素文本内容 text()
        console.log($('div').text());
        // 2.1 设置文本内容
        $('div').text('111')

        // 3. 获取设置表单值 val()
        console.log($('input').val());
        // 3.1 设置属性值
        $('input').val('test')


    </script>
</body>

</html>

示例代码

$(function () {
    // 全选和 全不选
    // 把全选的的状态给其他商品的状态即可
    // 1. 全选
    $('.checkall').change(function () {
        // 1.1 设置其他商品的状态和全选按钮 的状态一致
        console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

        // 1.2 如果全选则 让所有的商品添加 check-cart-item 类名
        if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加类名
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })

    // 2. 如果小框里面的数值等于所有数组，则选择全选
    $('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);

        // 如果当前选择的数量等于商品数量， 则全选选中
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }

        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");
        }
    })

    // --------------------------------------------------------------------------------
    // 商品 + 计算
    $('.increment').click(function () {
        // 获取到当前多少件商品
        var n = $(this).siblings('.itxt').val()
        n++;
        $(this).siblings(".itxt").val(n);
        // 然后获取到单价标签
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1) // 得到单价

        var price = (p * n).toFixed(2); // 保留两位小数
        console.log(price);
        // 然后把价格替换到小计里面
        // 获取到小计标签
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)

    })

    // 商品 - 计算
    $('.decrement').click(function () {
        // 先获取到当前商品数量
        var n = $(this).siblings('.itxt').val()
        // 如果等于1  不做操作
        if (n == 1) {
            return false
        }
        n--;
        // 赋值到数量标签里面
        $(this).siblings(".itxt").val(n);
        // 得到商品的单价
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留两位小数
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
    })

    // 用户直接再文本款里面输入数量
    $('.itxt').change(function () {
        var n = $(this).val()
        if (n < 0) {
            n = 1
            $(this).val(n);
        }
        // 得到商品的单价
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留两位小数
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)

    })

})

案例-购物车小计计算

元素操作

$('div').each(function (i, domEle) { })

回调函数第一个是index，第二个是dom元素对象, 要转换为jquer对象

2. $.each(obj, function (i, ele) { })

$.each() 方法遍历元素主要用于遍历数据，处理数据

<!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 () {
            var sum = 0
            var arr = ["red", "green", "blue"];
            // 第一种遍历元素
            $('div').each(function (i, domEle) {
                // console.log(i, domEle);
                // 回调函数第一个是index，
                // 第二个是dom元素对象,要转换为jquer对象
                $(domEle).css('color', arr[i])
                sum += parseInt($(domEle).text())
            })


            // 第二种 $.each() 方法遍历元素 主要用于遍历数据，处理数据
            $.each(arr, function (i, ele) {
                console.log(i, ele);
            })

            $.each({
                "name": 'peach',
                "age": 12
            }, function (i, ele) {
                console.log(i);  // name
                console.log(ele); // peach

            })


        })
    </script>
</body>

</html>

示例代码

$(function () {
    // 全选和 全不选
    // 把全选的的状态给其他商品的状态即可
    // 1. 全选
    $('.checkall').change(function () {
        // 1.1 设置其他商品的状态和全选按钮 的状态一致
        console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

        // 1.2 如果全选则 让所有的商品添加 check-cart-item 类名
        if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加类名
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })

    // 2. 如果小框里面的数值等于所有数组，则选择全选
    $('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);

        // 如果当前选择的数量等于商品数量， 则全选选中
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }

        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");
        }
    })

    // --------------------------------------------------------------------------------
    // 商品 + 计算
    $('.increment').click(function () {
        // 获取到当前多少件商品
        var n = $(this).siblings('.itxt').val()
        n++;
        $(this).siblings(".itxt").val(n);
        // 然后获取到单价标签
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1) // 得到单价

        var price = (p * n).toFixed(2); // 保留两位小数
        console.log(price);
        // 然后把价格替换到小计里面
        // 获取到小计标签
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })

    // 商品 - 计算
    $('.decrement').click(function () {
        // 先获取到当前商品数量
        var n = $(this).siblings('.itxt').val()
        // 如果等于1  不做操作
        if (n == 1) {
            return false
        }
        n--;
        // 赋值到数量标签里面
        $(this).siblings(".itxt").val(n);
        // 得到商品的单价
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留两位小数
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()
    })

    // 用户直接再文本款里面输入数量
    $('.itxt').change(function () {
        var n = $(this).val()
        if (n < 0) {
            n = 1
            $(this).val(n);
        }
        // 得到商品的单价
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留两位小数
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })

    // ----------------------------------------------------------------
    // 计算总价
    getSum()

    function getSum() {
        // 先定义总件数，总价格
        var count = 0;
        var money = 0;
        $('.itxt').each(function (i, ele) {
            // ele 就是三个图书的dom对象，要转换为jquer对象
            count += parseInt($(ele).val()) // 总件数
        })
        // 修改底部总件数
        $('.amount-sum em').text(count)

        // 修改总价格
        $('.p-sum').each(function (i, ele) {
            // 总价格
            money += parseInt($(ele).text().substr(1))
        })
        // 修改底部总价格
        $(".price-sum em").text("￥" + money.toFixed(2));


    }

})

案例-购物车计算总价和总件数

创建，删除，修改元素

创建

$("<li>创建的li</li>")

添加

内部添加

$('li').append(li) // 放在元素的最后面
$('li').prepend(li) // 放在元素的最前面

2. 外部添加

$('li').after(li) // 放在目标元素的最后面
$('li').before(li) // 放在目标元素的最前面

内部添加元素，生成后，他们是父子关系

外部添加元素，生成后，他们是兄弟关系

删除

$('ul').remove() // 自杀式删除，删除元素本身
$('ul').html('') // 可以删除匹配的元素里面的子节点孩子
$('ul').empty() // 匹配删除ele 里面的所有子节点

empty() 和 html() 区别在于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>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>

    <script>
        $(function () {
            // 创建元素

            // 1.1 内部添加
            // var li = $("<li>创建的li</li>")
            // $('li').append(li) // 放在元素的最后面 
            // $('li').prepend(li)  // 放在元素的最前面

            // 1.2 外部添加
            // var li = $("<div> 我是外部添加的</div>")
            // $('li').after(li) // 放在目标元素的最后面
            // $('li').before(li)   // 放在目标元素的最前面

            // 删除元素
            // $('ul').remove() // 自杀式删除，删除元素本身
            // $('ul').html('')  // 可以删除匹配的元素里面的子节点 孩子
            $('ul').empty() // 匹配删除ele 里面的所有子节点


        })

    </script>
</body>

</html>

示例代码

$(function () {
    // 全选和 全不选
    // 把全选的的状态给其他商品的状态即可
    // 1. 全选
    $('.checkall').change(function () {
        // 1.1 设置其他商品的状态和全选按钮 的状态一致
        console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

        // 1.2 如果全选则 让所有的商品添加 check-cart-item 类名
        if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加类名
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })

    // 2. 如果小框里面的数值等于所有数组，则选择全选
    $('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);

        // 如果当前选择的数量等于商品数量， 则全选选中
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }

        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");
        }
    })

    // --------------------------------------------------------------------------------
    // 商品 + 计算
    $('.increment').click(function () {
        // 获取到当前多少件商品
        var n = $(this).siblings('.itxt').val()
        n++;
        $(this).siblings(".itxt").val(n);
        // 然后获取到单价标签
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1) // 得到单价

        var price = (p * n).toFixed(2); // 保留两位小数
        console.log(price);
        // 然后把价格替换到小计里面
        // 获取到小计标签
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })

    // 商品 - 计算
    $('.decrement').click(function () {
        // 先获取到当前商品数量
        var n = $(this).siblings('.itxt').val()
        // 如果等于1  不做操作
        if (n == 1) {
            return false
        }
        n--;
        // 赋值到数量标签里面
        $(this).siblings(".itxt").val(n);
        // 得到商品的单价
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留两位小数
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()
    })

    // 用户直接再文本款里面输入数量
    $('.itxt').change(function () {
        var n = $(this).val()
        if (n < 0) {
            n = 1
            $(this).val(n);
        }
        // 得到商品的单价
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留两位小数
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })

    // ----------------------------------------------------------------
    // 删除商品模块
    $('.p-action a').click(function () {
        $(this).parents('.cart-item').remove();
        getSum();

    })
    // 删除选中的商品
    $('.remove-batch').click(function () {
        $('.j-checkbox:checked').parents('.cart-item').remove()
        getSum()
    })

    // 清空购物车
    $('.clear-all').click(function () {
        $('.cart-item').remove()
        getSum()
    })



    // ----------------------------------------------------------------
    // 计算总价
    getSum()

    function getSum() {
        // 先定义总件数，总价格
        var count = 0;
        var money = 0;
        $('.itxt').each(function (i, ele) {
            // ele 就是三个图书的dom对象，要转换为jquer对象
            count += parseInt($(ele).val()) // 总件数
        })
        // 修改底部总件数
        $('.amount-sum em').text(count)

        // 修改总价格
        $('.p-sum').each(function (i, ele) {
            // 总价格
            money += parseInt($(ele).text().substr(1))
        })
        // 修改底部总价格
        $(".price-sum em").text("￥" + money.toFixed(2));

    }

})

案例-清空删除购物车

尺寸，位置操作

尺寸

语法	用法
width() / height()	匹配元素宽度和高度，只算width和height
innerWidth() / innerHieght()	匹配元素宽度和高度，包含padding
outerWidth() / outerHeight()	匹配元素宽度和高度，包含padding, border
outerWidth(true) / outerHeight(true)	匹配元素宽度和高度，包含padding，border，margin

如果() 里面参数为空，返回相对应值，返回数字类型
参数如果为数字，则是修改相对于的值
参数可以不写单位

<!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 {
             200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <script>
        $(function () {
            console.log($('div').height());  //200
            console.log($('div').width(250));  // 修改值

            console.log($('div').innerWidth());  //220  width + padding

            console.log($('div').outerWidth());  // 250   width + padding + border

            console.log($('div').outerWidth(true))  // 290  width + padding + border + margin

        })

    </script>
</body>

</html>

示例代码

位置

offset() 设置或者获取元素偏移量

跟父级别没关系，相对于文档的偏移量
有left, top两个属性， offset().top 获取相对于文档的值，
设置元素偏移量: offser({left: 100, top: 100})

2. position() 获取元素偏移

相对于定位的父亲偏移量坐标
有left, top两个属性， offset().top 获取相对于父亲的值
只能获取

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

        .father {
             400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }

        .son {
             150px;
            height: 150px;
            background-color: purple;
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        // 相对于文档
        console.log($('.son').offset());
        console.log($('.son').offset().top)
        //设置
        $('.son').offset({
            top: 200,
            left: 200
        })

        // 相对于父亲, 只能获取，不是设置
        console.log($('.son').position());
        console.log($('.son').position().top);

    </script>
</body>

</html>

示例代码

3. scrollTop() / scrollLeft() 设置获取元素卷去的距离

() 为空是获取，里面是数字是设置

<!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>
        body {
            height: 2000px;
        }

        .back {
            position: fixed;
             50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }

        .container {
             900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function () {
            // 设置卷去的头部距离
            $(document).scrollTop(100)

            // 获取box 距离顶部的距离
            var boxTop = $('.container').offset().top
            console.log(boxTop);

            // 注册卷去事件
            $(window).scroll(function () {
                // console.log($(document).scrollTop()); // 这个是文档距离顶部的距离
                // 如果页面的卷去大于 盒子卷去的距离，显示返回顶部按钮
                if ($(document).scrollTop() >= boxTop) {
                    $('.back').fadeIn()
                } else {
                    $('.back').fadeOut()
                }

            })

            // 点击返回顶部，
            $('.back').click(function () {
                $('html, body').stop().animate({
                    scrollTop: 0
                })
            })


        })
    </script>
</body>

</html>

示例代码

$(function () {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    var flag = true;
    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;
    toggleTool();

    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }

    $(window).scroll(function () {
        toggleTool();
        // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名


        if (flag) {
            $(".floor .w").each(function (i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();

                }
            })
        }



    });
    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function () {
        flag = false;
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        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().removeClass();
    })
})

案例-电梯导航

相关阅读:
[nodejs] web后端开发时, 用hapi/Joi对前端提交的数据进行校验--随笔
 [C++]类的空指针调用成员函数后，会发生什么事？
赵家庙保险队大队长【永远置顶】
NX二次开发-NXOpen C# OpenFileDialog弹出选择文件对话框
 NX二次开发-NXOpen C# string转tag
NX二次开发-UFUN创建扫掠UF_MODL_create_sweep
NX二次开发-NXOPEN C# WinForm点构造器UF.Ui.PointConstruct和UI加锁解锁UF.Ui.LockUgAccess
vue 移动端手写手机验证码登录
 java--Scanner扫描器
 react中this.props.history实现跳转页面的使用方法
原文地址：https://www.cnblogs.com/py-web/p/12530260.html