jQuery DOM操作（一）：筛选和遍历jQuery对象

其他 2019-05-13 03:38:20 阅读次数: 0
版权声明：本文为 [onefine] 原创文章，转载请注明出处： https://blog.csdn.net/jiduochou963/article/details/89525213

一、DOM对象和jQuery对象

1.1 区别

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery Demo</title>
</head>
<body>
<div id="div">div</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var DOMObject = document.getElementById('div');
        var jQueryObject = $('#div');

        console.log(DOMObject);
        console.log(jQueryObject);

    })
</script>

</body>
</html>

执行：
在这里插入图片描述

1.2 检测

  • DOM Object: if(obj.nodeType)
  • jQuery Object: if(obj.jquery)

一个栗子：

<div id="div">div</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var DOMObject = document.getElementById('div');
        var jQueryObject = $('#div');

        console.log(DOMObject.nodeType);
        console.log(jQueryObject.jquery);  // 打印出jQuery版本号

		console.log(jQueryObject.nodeType);
        console.log(DOMObject.jquery);
    })
</script>

在这里插入图片描述

1.3 转换

DOM obj -> jQuery obj：var jqueryObj = $(domObj);

jQuery obj -> DOM obj：var domObj = jqueryObj.get([index]);

一个栗子：

<div id="div">div</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var DOMObject = document.getElementById('div');
        var jQueryObject = $('#div');

        console.log(DOMObject);
        console.log(jQueryObject);

        console.log($(DOMObject));
        console.log(jQueryObject.get(0));
    })
</script>

在这里插入图片描述

二、如何创建HTML元素

2.1 如何创建

  • $('<div>Hello </div>');
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var div = $('<div>Hello</div>');
        console.log(div);
    })
</script>

在这里插入图片描述
但是创建出来的元素没有放到页面上之前，这个元素是存在内存中的，通过选择器是选择不到的：

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var div = $('<div>Hello</div>');
        console.log(div);

        console.log($('div'));
    })
</script>

在这里插入图片描述
通过appendTo将创建出来的元素放到页面上：

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var div = $('<div>Hello</div>');
        console.log(div);

        div.appendTo('body');  # 将创建的div追加到body元素最后面

        console.log($('div'));
    })
</script>

在这里插入图片描述
在这里插入图片描述

2.2 设置属性

方法一：

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var link1 = $('<a>', {  // 注意，必须为空元素，如<a>onefine</a>是无效的。
            text: 'baidu',
            href: 'http://www.baidu.com',
            target: '_blank',
            title: 'goto baidu'
        });

        link1.appendTo('body');
    })
</script>

在这里插入图片描述

方法二：

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var link1 = $('<a>', {  // 注意，必须为空元素，如<a>onefine</a>是无效的。
            text: 'baidu',
            href: 'http://www.baidu.com',
            target: '_blank',
            title: 'goto baidu'
        });

        link1.appendTo('body');
        
        var link2 = $('<a>baidu</a>').attr({
            href: 'http://www.baidu.com',
            target: '_blank',
            title: 'goto baidu'
        });

        link2.appendTo('body');
    })
</script>

在这里插入图片描述

三、检查和获取元素

在这里插入图片描述

3.1 检查元素数量

<ul>
    <li class="item-1">item-1-x</li>
    <li class="item-2">item-2-x</li>
    <li class="item-3">item-3-x</li>
    <li class="item-4">item-4-x</li>
    <li class="item-5">item-5-x</li>
    <li class="item-6">item-6-x</li>
    <li class="item-7">item-7-x</li>
</ul>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var elements = $('li');

        // 获取元素的数量
        console.log(elements.length);
    })
</script>

在这里插入图片描述
一个栗子——对不存在的元素进行操作：

$(function () {
        var elements = $('li');

        // 获取元素的数量
        console.log(elements.length);

        var elements2 = $('div');
        console.log(elements2[0].style.color = 'blue');
        // elements2[0] 和 elements2.get(0)效果一样，都是将jQuery对象转换为DOM对象
    })

在这里插入图片描述

这是由于所选择的元素不存在，所以后面的操作失败：

var elements2 = $('div');
console.log(elements2.get(0));  // 返回undefined

在这里插入图片描述

由于大部分jQuery方法默认增加了对元素数量的判断，在调用绝大部分jQuery方法的时候是不会报错的，比如eq方法：

var elements2 = $('div');
console.log(elements2.eq(0).addClass('blue'));

在这里插入图片描述

3.2 提取元素——正序都从0开始编号

  • [index]：返回DOM元素
  • get([index])：返回DOM元素或元素集合，此方法和上一个得到的结果是一样的（对上一个方法做了增强），只不过不传递参数（索引）会获取一个元素的集合（详下面的例子）
  • eq(index)：返回jQuery对象
  • first()：获取第一个元素
  • last()：获取最后一个元素
  • toArray()：将jQuery对象之间转换为DOM元素的一个数组

更多详jQuery官网文档： http://api.jquery.com/

get做了增强

<ul>
    <li class="item-1">item-1-x</li>
    <li class="item-2">item-2-x</li>
    <li class="item-3">item-3-x</li>
    <li class="item-4">item-4-x</li>
    <li class="item-5">item-5-x</li>
    <li class="item-6">item-6-x</li>
    <li class="item-7">item-7-x</li>
</ul>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var elements = $('li');

        console.log(elements[0]);
        console.log(elements.get(0));
        console.log(elements.get());  // 不加索引返回所有元素
        console.log(elements.get(-1));  // 从后往前获取元素，从1开始编号
        console.log(elements.get(-4));

        console.log(elements[100]); // 越界两者都返回undefined
        console.log(elements.get(100));
        console.log(elements.get(-100));
    })
</script>

在这里插入图片描述

eq方法返回的是jQuery对象

<script>
    $(function () {
        var elements = $('li');

        console.log(elements.eq(0));
        console.log(elements.eq());  // 不加索引返回什么都不反回，和get相区别
        console.log(elements.get());
    })
</script>

在这里插入图片描述

eq方法与eq筛选器

这两者都能得到同样的结果，但推荐首选使用eq方法，因为eq方法的性能比eq筛选器的性能高很多：

<script>
    $(function () {
        var elements = $('li');

        console.log(elements.eq(0));  // 推荐使用
        console.log($('li:eq(0)'));
    })
</script>

在这里插入图片描述

eq方法与get方法传入负值

<script>
    $(function () {
        var elements = $('li');

        console.log(elements.eq(-1));  // 返回jQuery对象
        console.log(elements.get(-1));  // 返回DOM对象
    })
</script>

在这里插入图片描述

获取第一个元素和最后一个元素的快捷方式

  • first()
  • last()

注意：first和last方法对应也有筛选器的形式，但是性能不如方法，所以一般不介意使用筛选器。

console.log(elements.first());
console.log(elements.last());

在这里插入图片描述

toArray()方法和get()方法类似

console.log(elements.toArray());
console.log(elements.get());

在这里插入图片描述

四、通过关系查找jQuery对象

  • parents()：能够获取所选元素的所有父元素。
  • parent([selector])：
  • parentsUntil([selector])：获取所选元素的所有直到选择器之前的父元素。
  • children([selector])：能够获取所选元素的第一个直接子元素。
  • contents()：返回文本节点
  • find(selector)：通过选择器来筛选其中所有的后代元素，包括子孙元素
  • closest(selector)：首先检查当前元素是否匹配，否则逐级向上寻找，直至返回一个空的jQuery对象。

兄弟姐妹元素查找jQuery对象的方法：

  • next([selector])：往后，取得当前元素之后紧邻的一个同辈元素。
  • nextAll([selector])：取得当前元素之后的所有同辈元素。
  • nextUnitl([selector])：取得当前元素之后的所有同辈元素直到遇到匹配的元素为止。
  • prev([selector])：往前，完全查找同辈元素，与next相似
  • prevAll([selector])：
  • prevUntil([selector])：
  • siblings([selector])：同时往前往后，取得元素的所有同辈元素的元素集合，即吧元素的所有兄弟姐妹全部取出来。

4.1 parents方法

<div id="box">
    <div>
        <div>
            <p id="info">Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var element = $('#info').parents();
        console.log(element);
    })
</script>

在这里插入图片描述
但是这里获取出了所有的父元素，也可以在parents方法中添加参数实现对所有父元素进行过滤：

var element = $('#info').parents('div');
console.log(element);

在这里插入图片描述

4.2 children方法

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        var element = $('#box').children();
        console.log(element);

        var element2 = $('#box > *');  // 子元素选择器效果和上面一样
        console.log(element2);
    })
</script>

在这里插入图片描述
不过children方法不反回文本节点如p标签内的内容，如果要返回文本节点可以使用contents方法：

<script>
    $(function () {
        var element = $('#info').children();
        console.log(element);

    })
</script>

在这里插入图片描述

4.3 contents()方法

<script>
    $(function () {
        var element = $('#info').children();
        console.log(element);

        var element2 = $('#info').contents();
        console.log(element2);
    })
</script>

在这里插入图片描述

<script>
    $(function () {
        var element = $('#box').children();
        console.log(element);

        var element2 = $('#box').contents();
        console.log(element2);
    })
</script>

在这里插入图片描述
可见children只返回了div，但contents返回了所有的文本节点（空格、换行）。

4.4 find()方法

<script>
    $(function () {
        var element = $('#box').find('p');
        console.log(element);
    })
</script>

在这里插入图片描述

4.5 兄弟姐妹选择器

console.log($('.item-4').next('li'));
console.log($('.item-4').nextAll('li'));
console.log($('.item-4').nextUntil('.item-6'));  // 不包括.item-6
console.log($('.item-4').nextUntil('.item-xxx'));  // 等价于nextUntil()，直到最后。。和nextAll类似

在这里插入图片描述

console.log($('.item-4').prev('li'));
console.log($('.item-4').prevAll('li'));
console.log($('.item-4').prevUntil('.item-1'));
console.log($('.item-4').prevUntil('.item-6'));

在这里插入图片描述

console.log($('.item-4').siblings('li'));  // 取出的元素不包含自身

在这里插入图片描述

4.6 其他注意

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet.</p>
            <ul>
                <li class="item-1">item-1-x</li>
                <li class="item-2">item-2-x</li>
                <li class="item-3">item-3-x</li>
                <li class="item-4">item-4-x</li>
                <li class="item-5">item-5-x</li>
                <li class="item-6">item-6-x</li>
                <li class="item-7">item-7-x</li>
            </ul>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        console.log($('#box3').children());
        console.log($('#box3').contents());
    })
</script>

在这里插入图片描述

console.log($('#box3').children('ul'));
console.log($('#box3').contents('ul'));

在这里插入图片描述

console.log($('#box3').find('.item-3'));

在这里插入图片描述

console.log($('#info').parent());
console.log($('#info').parents());

在这里插入图片描述

console.log($('#info').parent('#box3'));
console.log($('#info').parents('#box3'));

在这里插入图片描述

console.log($('#info').parent('#box2'));
console.log($('#info').parents('#box2'));

在这里插入图片描述

console.log($('#info').parent('#box2'));
console.log($('#info').parents('#box2'));
console.log($('#info').parentsUntil('#box2'));

在这里插入图片描述

console.log($('#info').parentsUntil('#box1'));

在这里插入图片描述
所以，parentsUntil只获取到选择器之前的所有父元素。

console.log($('#info').parent('#box2'));
console.log($('#info').parents('#box2'));
console.log($('#info').parents('#info'));
console.log($('#info').closest('#box2'));
console.log($('#info').closest('#info'));

在这里插入图片描述

console.log($('#info').parents('div'));
console.log($('#info').closest('div'));

在这里插入图片描述

4.7 添加元素（选择多个元素）

  • add(selector)
console.log($('.item-4, .item-1'));
console.log($('.item-4').add('.item-1').add('.item-7'));

在这里插入图片描述

4.8 过滤元素（删除不想要的元素）

  • not(selector)
  • filter(selector)：与not相反
  • has(selector)：保留包含特定后代的元素，去掉不包含这些指定后代的元素
console.log($('li'));
console.log($('li').not('.item-4'));

在这里插入图片描述

console.log($('li').not('.item-4'));
console.log($('li').filter('.item-4'));

在这里插入图片描述
注意，not和filter的参数不止可以是一个选择器，还可以是一个函数：

console.log($('li').not(function(index) {
    return $(this).hasClass('item-4')
    // $(this)返回的是每一个jQuery对象——此函数调用的对象
    // hasClass('item-4')：检查是否拥有名为item-4的类
}));
console.log($('li').filter(function(index) {
    return $(this).hasClass('item-4')
}));

在这里插入图片描述

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet.</p>
            <ul>
                <li class="item-1">item-1-x</li>
                <li class="item-2">item-2-x</li>
                <li class="item-3">item-3-x</li>
                <li class="item-4">item-4-x</li>
                <li class="item-5">item-5-x</li>
                <li class="item-6">item-6-x</li>
                <li class="item-7">item-7-x</li>
                <li class="item-8">
                    <ul></ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        console.log($('li').has('ul'));
        console.log($('#box1').has('ul'));
    })
</script>

在这里插入图片描述

4.10 获取子集

  • slice(start [, end]) ：根据开始和结束的索引位置来选取匹配的子集
<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet.</p>
            <ul>
                <li class="item-1">item-1-x</li>
                <li class="item-2">item-2-x</li>
                <li class="item-3">item-3-x</li>
                <li class="item-4">item-4-x</li>
                <li class="item-5">item-5-x</li>
                <li class="item-6">item-6-x</li>
                <li class="item-7">item-7-x</li>
                <li class="item-8">
                    <ul></ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {

        console.log($('li').slice(0));
        console.log($('li').slice(0,3));

    })
</script>

在这里插入图片描述

console.log($('li').slice(4));
console.log($('li').slice(4, 6)); // 左闭右开，编号从0开始，编号为4，其实选择的是第5个元素
console.log($('li').slice(6, 4));

在这里插入图片描述

console.log($('li').slice(-4));
console.log($('li').slice(-4, -5));
console.log($('li').slice(-6, -4));

在这里插入图片描述

4.11 转换元素

  • map(callback)：将一个jQuery对象转换为另一个jQuery对象——具体由callback决定。
<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet.</p>
            <ul>
                <li class="item-1">item-1-x</li>
                <li class="item-2">item-2-x</li>
                <li class="item-3">item-3-x</li>
                <li class="item-4">item-4-x</li>
                <li class="item-5">item-5-x</li>
                <li class="item-6">item-6-x</li>
                <li class="item-7">item-7-x</li>
                <li class="item-8">
                    <ul></ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        console.log($('div').map(function (index, domElement) {
            return this.id; // id是DOM对象的属性
            // 等价：return $(this)[0].id;
            // this指向当前执行map回调函数的元素的DOM元素domElement，等价：return domElement.id;
        }));
    })
</script>

在这里插入图片描述

当回调函数返回none或者undefined会怎样呢？

<script>
    $(function () {
        console.log($('div').map(function (index, domElement) {
            return null || undefined;
            // 一旦返回null或者undefined，此元素就会被跳过，返回值就不会加入到集合中。
        }));
    })
</script>

在这里插入图片描述

4.12 遍历元素

  • each(iterator)
<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet.</p>
            <ul>
                <li class="item-1">item-1-x</li>
                <li class="item-2">item-2-x</li>
                <li class="item-3">item-3-x</li>
                <li class="item-4">item-4-x</li>
                <li class="item-5">item-5-x</li>
                <li class="item-6">item-6-x</li>
                <li class="item-7">item-7-x</li>
                <li class="item-8">
                    <ul></ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        console.log($('div').each(function (index, domElement) {
            this.title = this.innerText;
        }));
    })
</script>

在这里插入图片描述

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet.</p>
            <ul>
                <li class="item-1">item-1-x</li>
                <li class="item-2">item-2-x</li>
                <li class="item-3">item-3-x</li>
                <li class="item-4">item-4-x</li>
                <li class="item-5">item-5-x</li>
                <li class="item-6">item-6-x</li>
                <li class="item-7">item-7-x</li>
                <li class="item-8">
                    <ul></ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        console.log($('li').each(function (index, domElement) {
            this.title = this.innerText;
        }));
    })
</script>

在这里插入图片描述
在这里插入图片描述

$(function () {
    console.log($('div').each(function (index, domElement) {
        if(this.id === 'box1'){
            return true;  // 相当于continue
            // return false; // 相当于break
        }
        this.title = this.id;
    }));
})

在这里插入图片描述

<script>
    $(function () {
        console.log($('div').each(function (index, domElement) {
            if(this.id === 'box2'){
                // return true;  // 相当于continue
                return false; // 相当于break
            }
            this.title = this.id;
        }));
    })
</script>

在这里插入图片描述

4.13 jQuery对象的其他操作

  • is(selector)：元素里面至少有一个符合给定的参数返回true
  • end()：回到最近的一次破坏性操作之前，将匹配的元素集合变成前一次的状态。
  • addBack([selector])：

破坏性操作： 任何对jQuery对象进行改变的操作。如：删除元素、not()、filter()、map()、not()、children()、find()、next()、parent()等等

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet.</p>
            <ul>
                <li class="item-1">item-1-x</li>
                <li class="item-2">item-2-x</li>
                <li class="item-3">item-3-x</li>
                <li class="item-4">item-4-x</li>
                <li class="item-5">item-5-x</li>
                <li class="item-6">item-6-x</li>
                <li class="item-7">item-7-x</li>
                <li class="item-8">
                    <ul></ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        console.log($('#box3').children().is('p'));
        console.log($('#box3').children().is('li'));
        console.log($('#box3').children().is('img'));
    })
</script>

在这里插入图片描述

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet.</p>
            <ul>
                <li class="item-1">item-1-x</li>
                <li class="item-2">item-2-x</li>
                <li class="item-3">item-3-x</li>
                <li class="item-4">item-4-x</li>
                <li class="item-5">item-5-x</li>
                <li class="item-6">item-6-x</li>
                <li class="item-7">item-7-x</li>
                <li class="item-8">
                    <ul></ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        console.log($('#box3').find('.item-4').css('color', 'red'));
    })
</script>

在这里插入图片描述
在这里插入图片描述

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet.</p>
            <ul>
                <li class="item-1">item-1-x</li>
                <li class="item-2">item-2-x</li>
                <li class="item-3">item-3-x</li>
                <li class="item-4">item-4-x</li>
                <li class="item-5">item-5-x</li>
                <li class="item-6">item-6-x</li>
                <li class="item-7">item-7-x</li>
                <li class="item-8">
                    <ul></ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>
    $(function () {
        console.log(
            $('#box3').find('.item-4').css('color', 'red')
            .end()
            .find('.item-6').css('color', 'green'));
    })
</script>

在这里插入图片描述
在这里插入图片描述

console.log($('#box3').find('.item-4'));
console.log($('#box3').find('.item-4').end());

在这里插入图片描述
注意：使用end时必须保证是破坏性操作，如果不是破坏性操作，end方法什么都不会去返回，返回一个空对象。

console.log($('#box3').end());

在这里插入图片描述

<script>
    $(function () {
        console.log($('.item-4').nextUntil('.item-6'));
        
        console.log($('.item-4').nextUntil('.item-6')
            .addBack().css('color', 'orange'));
    })
</script>

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/jiduochou963/article/details/89525213
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022