2021-09-28

最新推荐文章于 2021-10-19 12:41:26 发布

心怡的文静

最新推荐文章于 2021-10-19 12:41:26 发布

阅读量159

点赞数 2

分类专栏： JavaScript 文章标签： html5

本文链接：https://blog.csdn.net/weixin_46459597/article/details/120539783

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1--排他思想


<!DOCTYPE html>
<html lang="en">

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

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //排他思想： 所有元素全部清除   给当前元素设置样式

        
        //1 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        //btns得到的是伪数组  里边的每个元素是btns[i]
        for  (var i = 0; i < btns.length; i++) {
            btns[i].onclick =function () {
                //点击按钮变色 思路：先把所有的背景色去掉 点击谁谁为粉色
                for (var i = 0; i <btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

</html>

2--百度换肤

<!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>
        body {
            background: url(images/mj1.jpg) ;
            background-size: cover;
        }
        div {
            width: 500px;
            border: 1px solid;
            margin: 200px auto;
        }
        img {
            width: 100px;
            height: 80px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/mj1.jpg" alt="">
        <img src="images/mj2.jpg" alt="">
        <img src="images/mj3.jpg" alt="">
        <img src="images/mj4.jpg" alt="">
    </div>
    <script>
        var imgs = document.querySelectorAll('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () { 
                document.body.style.backgroundImage = 'url('+this.src +')';
            }
        }
    </script>
</body>
</html>

3--表格隔行变色

<!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>
        table  {
            text-align: center;
            margin: 150px auto;
        }
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        tbody tr {
            height: 30px;
        }
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            color: blue;
        }
        .bg {
            background-color: pink;
        }
    </style>
</head>
<body>  
    <table>
        <thead>
            <tr>
                <td>代码</td>
                <td>名称</td>
                <td>最新公布净值</td>
                <td>积累净值</td>
                <td>前单位净值</td>
                <td>净值增长率</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金橞3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>            <tr>
                <td>003526</td>
                <td>农银金橞3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>            <tr>
                <td>003526</td>
                <td>农银金橞3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>            <tr>
                <td>003526</td>
                <td>农银金橞3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>            <tr>
                <td>003526</td>
                <td>农银金橞3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>            <tr>
                <td>003526</td>
                <td>农银金橞3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>            <tr>
                <td>003526</td>
                <td>农银金橞3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>

    <script>
        //1 获取元素   获取tbady里的tr
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        //利用循环 绑定注册事件
        for (var i = 0;i <trs.length; i++) {
            //3 鼠标经过
            trs[i].onmouseover = function () {    
                this.className = 'bg';
            }
            //4 鼠标离开
            trs[i].onmouseout = function (){
                this.className = '';
            }
        }
    </script>
</body>
</html>

4--全选和反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            margin: 100px auto;
            /* border: 1px solid black; */
        }
        table {
            width: 400px;
            font-size: 15px;
            text-align: center;
            background-color: pink;
        }
        .box table,td,th{ 
            border:1px solid black; 
            border-collapse: collapse;  
        }
    </style>
</head>
<body>
    <div class="box">
    <table>
        <thead>
            <tr>
                <td>
                    <input type="checkbox" id="j_cbAll" >
                </td>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iPhone Pro</td>
                <td>5000</td>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPhone Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPhone Watch</td>
                    <td>6000</td>
                </tr>
            </tr>
        </tbody>
    </table>
    </div>

    <script>
        ///1 全选和取消全选的做法：让下边所有复选框的checked的 属性为选中状态   跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll');//全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');//下边所有的复选框
        // 注册事件
        j_cbAll.onclick = function () {
            //把全选按钮的状态给下边所以的复选框就行了
                for (var i = 0; i <j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
        }

        //2 下边的复选按钮影响上边的全选按钮：给下面所有的复选框绑定事件  每次点击都要循环、
        for (var i = 0; i <j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                //flag 控制全选按钮是否被选中
                var flag = true;
                //每次点击下边的复选框 都要检查剩下的按钮是否被点中  
                for (var i = 0; i<j_tbs.length; i++) {
                    if (!j_tbs[i].checked ) {
                        flag = false;
                    }
                }
                j_cbAll.checked = flag;
            }
        }

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

5自定义属性操作

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

</head>
<body>
    <div id="demo" index='我是自定义属性' class="nav"></div>
    <script>
        var div = document.querySelector('div');
        //1 获取元素的属性值
        //(1) element.属性
        console.log(div.id);
        console.log(div.index);
        //(2) element.getAttribute('属性')  get得到  attribute属性
        console.log(div.getAttribute('id'));
        //index为自定义属性  方法二可以获取  一不行    
        console.log(div.getAttribute('index'));

        //2 设置元素属性
        //(1) element.属性='值'
        div.id = 'test';
        console.log(div.id);
        div.className = 'navs';
        console.log(div.className);
        //(2) element.setAttribute('属性','值');   也是主要针对自定义属性
        div.setAttribute('index','我被修改属性值了');
        console.log(div.getAttribute('index'));
        div.setAttribute('class','footer');//class特殊  这里写class 不是className
    </script>
</body>
</html>

节点概念

    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima">x</span>
        </div>
    </div>
    
    <script>
        //1.父节点parentNode 得到的是离元素最近的父级节点(得到box 不是demo)
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        //得到的是离元素最近的父级节点(得到box 不是demo)找不到父节点返回null
        console.log(erweima.parentNode);
    </script>

父节点操作

    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima">x</span>
        </div>
    </div>
    <script>
        //父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        //得到最近的父级节点 找不到返回null
        console.log(erweima.parentNode);//.box
    </script>

子节点操作

    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>
    <div class="demo">
        <div class="box">
            <span class="erweima">x</span>
        </div>
    </div>
    <script>
        //DOM提供的方法(API)获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // var lis = document.querySelector('ul').querySelectorAll('li')
        console.log(lis);//4li
        //1.子节点的方法 childNodes(标准) 所以有的子节点 包含元素节点 文本节点等等...
        console.log(ul.childNodes);//五个text换行 四个li
        console.log(ul.childNodes[0].nodeType);//3   文本节点是3
        console.log(ul.childNodes[1].nodeType);//1   元素节点是1
        //方法  理解即可
        for (var i = 0; i <ul.childNodes.length; i++) {
            if (ul.childNodes[i].nodeType == 1) {
                console.log(ul.childNodes[i]);
            }
        }

        //2.parentNode.children(非标准 但没事) 只返回元素节点 需要掌握
        console.log(ul.children);
    </script>

子节点-第一和最后子元素

    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        //1   firstChild第一个子节点 不管是文本还是元素节点
        console.log(ol.firstChild);//text
        //1.1 firstElementChild返回第一个子元素节点  IE9以上支持
        console.log(ol.firstElementChild);//我是li1

        //2.  lastChild第一个子节点 不管是文本还是元素节点
        console.log(ol.lastChild);//text
        //2.1 lastElementChild返回最后一个子元素节点  IE9以上支持
        console.log(ol.lastElementChild);//我是li4
        //firstChild和lastChild获取文本和元素节点 不适用 
        //firstElementChild和lastElementChild值支持IE9以上

        //3.实际开发的写法  没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);//我是li1
        console.log(ol.children[3]);//我是li4
        //li的数量不固定 确保是最后一个
        console.log(ol.children[ol.children.length-1]);//我是li
    </script>

新浪下拉菜单

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            font-size: 14px;
        }
        li {
            list-style: none;
        }
        .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%;
        }
        .nav ul li {
            border-bottom: 1px solid #fecc5b;            
            border-left: 1px solid #fecc5b;
            border-right: 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>
        //获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children;//4个li
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>
</html>

兄弟节点

    <div>我是div</div>
    <span>我是span</span>

    <script>
        //兄弟节点
        //node.nextSibling  包含元素节点 文本节点等等...
        var div = document.querySelector('div');
        console.log(div.nextSibling);//text  得到的是换行
        //node.previosSibling   包含元素节点 文本节点等等...
        console.log(div.previousSibling);//text  得到的是换行

        //node.nextElementSibling 得到上一个兄弟 元素 节点   IE9以上才支持
        console.log(div.nextElementSibling);//我是span
        //node.previosElementSibling 得到下一个兄弟 元素 节点 IE9以上才支持
        console.log(div.previousElementSibling);//null
        //解决兼容行的方法 (自己封装一个函数)
        function getNextElementSibling(element) {
            var el = element;
            while (el = el.nextSibling) {
                if (el.nodeType == 1){
                    return el;
                }
            }
            return null;
        }
    </script>

创建节点

    <ul>
        <li>123</li>
    </ul>

    <script>
        //1. 创建元素节点
        var li = document.createElement('li');
        //2. 添加节点node.appendChild(child) node父级 child子级 后面追加元素 类似于数组的push
        var ul =document.querySelector('ul');
        ul.appendChild(li);
        //3. 添加节点 node.insertBefore(child,指定元素)
        var lili = document.createElement('li');
        ul.insertBefore(lili,ul.children[0]);
        //4. 我们想添加一个新的元素：1 创建元素 2. 添加元素
    </script>

简单版的发布留言

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            background-color: pink;
            width: 200px;
            margin: 10px;
        }
        
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10">123</textarea>
    <button>发布</button>
    <ul>
        <!-- <li>123</li> -->
    </ul>
    
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');

        //注册事件
        btn.onclick = function () {
            if (text.value == '') {
                alert('请输入内容');
            }else {
            //创建元素
            var li = document.createElement('li');
            //内容传入
            li.innerHTML = text.value;
            //创建元素
            // ul.appendChild(li);
            //想要最新留言一直在最前边显示
            ul.insertBefore(li,ul.children[0])
            }
        }
    </script>

删除节点

    <button>删除</button>
    <ul>
        <li>胸大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>

    <script>
        //1. 获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        //2. 删除元素 node.removerChild(child)
        ul.removeChild(ul.children[0]);//删除第一个胸大

        //3. 点击按钮依次删除里边的孩子
        btn.onclick = function () {
            //加一个判断 当没有元
            if (ul.children.length == 0) {
                this.disabled = true;//禁用按钮
            }else {
                ul.removeChild (ul.children[0]);
            }
        }
    </script>

删除留言

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
            width: 200px;
            background-color: pink;
            margin: 10px;
        }
        li a {
            float: right;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10">123</textarea>
    <button>发布</button>
    <ul>
        <!-- <li>123</li> -->
    </ul>
    
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');

        //注册事件
        btn.onclick = function () {
            if (text.value == '') {
                alert('请输入内容');
            }else {
            //创建元素
            var li = document.createElement('li');
            //内容传入
            li.innerHTML = text.value + '<a href="javascript:;">删除</a>';           
            //创建元素
            // ul.appendChild(li);
            //想要最新留言一直在最前边显示
            ul.insertBefore(li,ul.children[0])
            //删除元素
            var as = document.querySelectorAll('a');
            for (var i = 0; i < as.length; i++) {
                as[i].onclick = function () {
                   ul.removeChild(this.parentNode); 
                }
            }
            }
        }
    </script>

克隆节点

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        var ul = document.querySelector('ul');
        //1. node.cloneNode(); 括号为空或者为false 浅拷贝只复制标签 不复制里边的内容
        //2. node.cloneNode(true); 括号为true 深拷贝 复制标签也复制里边的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>

动态生成表格案例

<!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>
        table {
            width: 500px;
            margin: 100px;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table cellspacing='0'>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>林俊杰</td>
                <td>JavaScript</td>
                <td>100</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>林文静</td>
                <td>JavaScript</td> 
                <td>90</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>林更新</td>
                <td>JavaScript</td>
                <td>80</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>林允儿</td>
                <td>JavaScript</td>
                <td>70</td>
                <td><a href="#">删除</a></td>
            </tr> -->
        </tbody>
    </table>

    <script>
        //1. 先准备好学生的数据
        var datas = [
            {
            name: '林文静',
            subject: 'JavaScript',
            socre: 100,
        },
        {
            name : '林俊杰',
            subject: 'JavaScript',
            socre : 90,
        },
        {
            name : '林更新',
            subject: 'JavaScript',
            socre : 100,
        },
        {
            name : '林允儿',
            subject: 'JavaS cript',
            socre : 70,
        },
        {
            name : '林允儿',
            subject: 'JavaS cript',
            socre : 70,
        }]
        //所有的数据是放在tbody的  加多少行书有多少人决定的(数组length)
        //2 往tbody里创建行 有几个人创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {//外面for循环管行 tr
            //创建tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);//插入行
            // // 行里创建单元格 td  单元格的数量取决于每个对象里属性的个数
            // // for in循环遍历对象 datas[i]
            for (var k in datas[i]) {
                //创建单元格
                var td = document.createElement('td');
                // console.log(datas[i][k]);
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            //3. 创建有删除两个字的单元格
            var td = document.createElement('td');//创建一个新的单元格
            td.innerHTML =  "<a href='javascript:;'>删除</a>";//存入链接
            tr.appendChild(td);//追加元素
        }   
        //4. 删除操作开始
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                //点击a删除当前所在的行(链接的爸爸的爸爸 tr td) node.removeChild(child);
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
        // for (var k in obj) {
        //     k得到的是属性名
        //     obj[k]得到的是属性值
        // }
    </script>
</body>

</html>

三种动态创建元素的区别

    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>

    <script>
        //三种创建元素方式的区别
        //1. document.write()创建元素
        //如果页面文档流加载完毕 再调用这句话会导致页面重绘(会有一个新的页面)
        var btn = document.querySelector('button');
        btn.onclick = function () {
            document.write('<div>123</div>'); //创建了一个div标签
        }

        //2. innerHTML创建元素
        //innerHTML 创建多个元素效率高(不要拼接字符串，要采取数组形式拼接)，结构稍微复杂
        var inner = document.querySelector('.inner');
        // for (var i = 1; i < 100; i++) {
        //     inner.innerHTML += '<a href="#">百度</a>';
        // }
        //效率更高的写法
        var arr = [];
        for (var i = 1; i < 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');//数组转为字符串

        //3. document.createElement()创建元素
        //creatElenment()创建多个元素效率稍微低一点点 但是结构更清晰
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100;i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }

        //面试题：请问innerHTMLHE和createElement谁的效率更高
        //答：如果innerHTML不采用拼接字符串而采用数组的形式 效率更高 createElement效率低一点点但createElenment结构更清晰
    </script>

心怡的文静

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2021-09-28

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title&...
复制链接

扫一扫