jQuery 是⼀套兼容多浏览器的 javascript 脚本库。 1.在官网中下载jquery 2.在html页面中引入,使用script标签对引入jquery 3.在html页面中使用jquery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js入门</title> <!--引入jquery--> <!--<script src="js/jquery-3.6.0.min.js"></script>--> <script src="js/js.js"></script> </head> <body> <div id="box">div</div> <!-- 1.在官网中下载jquery 2.在html页面中引入,使用script标签对引入jquery 3.在html页面中使用jquery --> <script> /*获取DOM对象*/ var box1 = document.getElementById("box"); /*jquery对象*/ /*var jq_obj = $("#box"); console.log(box1); console.log(jq_obj);*/ var box = $("box"); </script> </body> </html>
通过css实现背景色隔行换色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.datalist{
border:1px solid #007108;
font-family:Arial;
border-collapse:collapse;
/*background-color:#d9ffdc;*/
font-size:14px;
}
.datalist th{
border:1px solid #007108;
/*background-color:#00a40c;*/
color:#FFFFFF;
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #007108;
text-align:left;
padding-top:4px;
padding-bottom:4px;
padding-left:10px;
padding-right:10px;
}
/*1）通过css实现背景色隔行换色*/
/* tr:nth-child(odd){!*odd基数*!
background:palegoldenrod;
font-size: 30px;
}
tr:nth-child(even){!*even奇数*!
background:darkturquoise;
font-size: 30px;
}*/
</style>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
<script>
/* /!*1) 通过js的DOM操作实现隔行换色*!/
window.οnlοad=function (){
/!*获取到所有的tr*!/
var trs = document.getElementsByTagName("tr");
for(var i=0;i<=trs.length-1;i++){
if(i%2==0){
trs[i].style.background="red";
}else {
trs[i].style.background="green";
}
}
}*/
//2) 通过jquery 实现隔行换色
$(function (){
/*获取所有的奇数行设置背景色*/
$("tr:odd").css("background","palegoldenrod")
/*获取所有的奇数行设置背景色*/
$("tr:even").css("background","darkturquoise")
});
</script>
</head>
<body>
<table class="datalist">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr> <!-- 奇数行 -->
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr> <!-- 奇数行 -->
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
<tr> <!-- 奇数行 -->
<td>lovehate</td>
<td>W47</td>
<td>Sep 5th</td>
<td>Virgo</td>
<td>6098017</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>slepox</td>
<td>W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr> <!-- 奇数行 -->
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>shenhuanyan</td>
<td>W25</td>
<td>Jan 31th</td>
<td>Aquarius</td>
<td>0621827</td>
</tr>
<tr> <!-- 奇数行 -->
<td>tuonene</td>
<td>W210</td>
<td>Nov 26th</td>
<td>Sagittarius</td>
<td>0091704</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>ArthurRivers</td>
<td>W91</td>
<td>Feb 26th</td>
<td>Pisces</td>
<td>0468357</td>
</tr>
<tr> <!-- 奇数行 -->
<td>reconzansp</td>
<td>W09</td>
<td>Oct 13th</td>
<td>Libra</td>
<td>3643041</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr> <!-- 奇数行 -->
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
<tr> <!-- 奇数行 -->
<td>shanghen</td>
<td>W42</td>
<td>May 24th</td>
<td>Gemini</td>
<td>1544254</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>venessawj</td>
<td>W45</td>
<td>Apr 1st</td>
<td>Aries</td>
<td>1523753</td>
</tr>
<tr> <!-- 奇数行 -->
<td>lightyear</td>
<td>W311</td>
<td>Mar 23th</td>
<td>Aries</td>
<td>1002908</td>
</tr>
</table>
</body>
</html>
获取jquery包装集对象 获取jsDOM对象 jsDOM对象转为jquery对象 jquery对象转为jsDOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<!--
获取jquery包装集对象
$("选择器")
如果元素不存在,不会返回null,会返回空的query对象,根据length==0来判断是否获取成功
获取jsDOM对象
document.getElement....
如果元素不存在,返回null,根据==null判断是否获取到DOM对象
jsDOM对象转为jquery对象
$(js对象)
jquery对象转为jsDOM对象
jq对象[索引]
jq对象.get()
注意:
1.jsDOM对象与jq对象不能互相调用其方法
2.jq的函数只能jq对象能够调用
-->
<div id="box">box</div>
<script>
//DOM
var js_obj = document.getElementById("box");
console.log(js_obj);
//jq
var jq_obj =$("#box");
console.log(jq_obj.length);
//js-jq
console.log($(js_obj));
//jq-js
console.log(jq_obj[0]);
console.log(jq_obj.get(0));
</script>
</body>
</html>
jquery选择器: 基础选择器 层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="box">
<div class="item1">
我是div1
<p class="red">div1的p1</p>
<p>div1的p2</p>
</div>
<div>
我是div2
<p class="red">div2的p1</p>
<p>div1的p2</p>
</div>
<div>
我是div3
<p class="red">div3的p1</p>
<p>div3的p2</p>
</div>
</div>
<!--
jquery选择器:
选中某个|组元素
分类:
基础选择器
id选择器 #id $("#testDiv")选择id为testDiv的元素
元素名称选择器 element $("div")选择所有div元素
类选择器 .class $(".blue")选择所有class=blue的元素
选择所有元素 * $("*")选择⻚⾯所有元素
组合选择器 selector1,selector2,selectorN $("#testDiv,span,.blue")同时选中多个选择器匹配的元素
层次选择器
后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素
⼦代选择器 parent > child $("#parent>div")选择id为parent的直接div⼦元素
相邻选择器 prev + next $(".blue + img")选择css类为blue的下⼀个img元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素
-->
<script>
/*基础选择器*/
/*id选择器*/
console.log($("#box"));
//元素名称选择器
console.log($("div"));
/*类选择器*/
console.log($(".red"));
/*通配符选择器*/
console.log($("*"));
//组合选择器
console.log($("#box,.red"));
//层次选择器
//后代选择器 : 所有满足条件的子元素
console.log($("body div"));
//⼦代选择器 : 满足条件的直接子元素
console.log($("body>div"));
//相邻选择器
console.log($(".item1+div"));
//同辈选择器
console.log($(".item1~div"));
</script>
</body>
</html>
jquery选择器: 表单选择器: 属性选择器: 过滤选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
<style>
/*html中主要存在abc属性的元素就被选中*/
/*[abc]{
background: red;
}*/
/*input标签中主要存在abc属性的元素就被选中*/
input[abc]{
background: red;
}
</style>
</head>
<body>
<form id='myform' name="myform" method="post">
<input type="hidden" name="uno" value="9999" disabled="disabled" />
姓名:<input type="text" id="uname" name="uname" abc="123"/><br />
密码:<input type="password" id="upwd" name="upwd" value="123456" abc="567"/><br />
年龄:<input type="radio" name="uage" value="0" checked="checked"/>⼩屁孩
<input type="radio" name="uage" value="1"/>你懂得 <br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码"/>代码<br />
来⾃:<select id="ufrom" name="ufrom" abc="123">
<option value="-1" selected="selected">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select ><br />
简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
头像:<input type="file" /><br />
<input type="image" src="http://www.baidu.com/img/bd_logo1.png"
width="20" height="20"/>
<button type="submit" οnclick="return checkForm();">提交</button>
<button type="reset" >重置</button>
</form>
<!--
表单选择器
表单选择器 :input
查找所有的input元素：$(":input")；
注意：会匹配所有的input、textarea、select和button元素。
⽂本框选择器 :text 查找所有⽂本框：$(":text")
密码框选择器 :password 查找所有密码框：$(":password")
单选按钮选择器 :radio 查找所有单选按钮：$(":radio")
复选框选择器 :checkbox 查找所有复选框：$(":checkbox")
提交按钮选择器 :submit 查找所有提交按钮：$(":submit")
图像域选择器 :image 查找所有图像域：$(":image")
重置按钮选择器 :reset 查找所有重置按钮：$(":reset")
按钮选择器 :button 查找所有按钮：$(":button")
⽂件域选择器 :file 查找所有⽂件域：$(":file")
属性选择器:
[属性名]包含这个属性的被选中
[属性名="属性值"] 包含指定属性=指定值的元素被选中
过滤选择器:
-->
<script>
/*表单选择器*/
console.log($(":input"));
//单选框
console.log($(":radio"));
//属性选择器
console.log($("[abc]"));
console.log($("input[abc]"));
console.log($("input[abc=123]"));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
<style>
/*html中主要存在abc属性的元素就被选中*/
/*[abc]{
background: red;
}*/
/*input标签中主要存在abc属性的元素就被选中*/
input[abc]{
background: red;
}
</style>
</head>
<body>
<form id='myform' name="myform" method="post">
<input type="hidden" name="uno" value="9999" disabled="disabled" />
姓名:<input type="text" id="uname" name="uname" abc="123"/><br />
密码:<input type="password" id="upwd" name="upwd" value="123456" abc="567"/><br />
年龄:<input type="radio" name="uage" value="0" checked="checked"/>⼩屁孩
<input type="radio" name="uage" value="1"/>你懂得 <br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码"/>代码<br />
来⾃:<select id="ufrom" name="ufrom" abc="123">
<option value="-1" selected="selected">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select ><br />
简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
头像:<input type="file" /><br />
<input type="image" src="http://www.baidu.com/img/bd_logo1.png"
width="20" height="20"/>
<button type="submit" οnclick="return checkForm();">提交</button>
<button type="reset" >重置</button>
</form>
<!--
表单选择器
表单选择器 :input
查找所有的input元素：$(":input")；
注意：会匹配所有的input、textarea、select和button元素。
⽂本框选择器 :text 查找所有⽂本框：$(":text")
密码框选择器 :password 查找所有密码框：$(":password")
单选按钮选择器 :radio 查找所有单选按钮：$(":radio")
复选框选择器 :checkbox 查找所有复选框：$(":checkbox")
提交按钮选择器 :submit 查找所有提交按钮：$(":submit")
图像域选择器 :image 查找所有图像域：$(":image")
重置按钮选择器 :reset 查找所有重置按钮：$(":reset")
按钮选择器 :button 查找所有按钮：$(":button")
⽂件域选择器 :file 查找所有⽂件域：$(":file")
属性选择器:
[属性名]包含这个属性的被选中
[属性名="属性值"] 包含指定属性=指定值的元素被选中
过滤选择器:
-->
<script>
/*表单选择器*/
console.log($(":input"));
//单选框
console.log($(":radio"));
//属性选择器
console.log($("[abc]"));
console.log($("input[abc]"));
console.log($("input[abc=123]"));
</script>
</body>
</html>
操作属性: 分类: 区别: attr 与 prop 获取属性值 设置属性值 移出属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<form action="" id="myform">
<input type="checkbox" name="ch" value="aaaa" haha="hahahahha"/> aa
<input type="checkbox" name="ch" value="bbbb" haha="hehehehhe" checked="checked"/> bb
</form>
<!--
操作属性:
分类:
固有属性 : 标签提供的属性
固有属性 : src,href...
共有属性 : id,class,name...
自定义属性 : abc haha
boolean属性 : checked selected disabled
区别: attr 与 prop
1.attr可以操作固有属性,自定义属性
prop只能操作固有属性
2.attr 操作布尔属性(checked),得到的属性值为属性设置的值 checked = 'checked'
prop 操作布尔属性(checked),得到的结果为true|false
获取属性值
attr(属性名称) 获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。attr('checked')attr('name')
prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')
设置属性值
attr(属性名称，属性值)设置指定的属性值，
操作 checkbox 时，
选中返回 checked，
没有选中返回 undefined。
attr('checked',’checked’)
attr('name',’zs’)
prop(属性名称，属性值) 设置具有true和false的属性值 prop('checked',’true
移出属性
removeAttr(属性名) 移除指定的属性 removeAttr('checked')
-->
<script>
//获取属性值
//操作布尔属性
console.log($("input[type='checkbox']:even").attr("checked")); //checked
console.log($("input[type='checkbox']:odd").attr("checked")); //undefined
console.log($("input[type='checkbox']:even").prop("checked")); //true
console.log($("input[type='checkbox']:odd").prop("checked")); //false
//固有属性
console.log($("input[type='checkbox']:even").attr("value")); //aaaa
console.log($("input[type='checkbox']:odd").attr("value")); //bbbb
console.log($("input[type='checkbox']:even").prop("value")); //aaaa
console.log($("input[type='checkbox']:odd").prop("value")); //bbbb
//自定义属性
console.log($("input[type='checkbox']:even").attr("haha")); //hahahaha
console.log($("input[type='checkbox']:odd").attr("haha")); //hahahaha
console.log($("input[type='checkbox']:even").prop("haha")); //undefined
console.log($("input[type='checkbox']:odd").prop("haha")); //undefined
//设置属性
//设置默认选中
//$("input[type='checkbox']:even").attr("checked","checked");
//$("input[type='checkbox']:odd").prop("checked",true);
//取消被选中状态
//$("input[type='checkbox']:odd").prop("checked",false);
//$("input[type='checkbox']:odd").prop("checked",null);
$("input[type='checkbox']:odd").removeAttr("checked");
$("input[type='checkbox']:odd").removeAttr("haha");
$("input[type='checkbox']:odd").removeAttr("name");
</script>
</body>
</html>
操作元素样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作元素样式</title>
<!--引入jq-->
<script src="js/jquery-3.6.0.min.js"></script>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: skyblue;
}
.larger{
font-size: 30px;
}
.green {
background : green;
}
.weight{
font-weight: bolder;
}
</style>
</head>
<body>
<h3>css()⽅法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝⾊</div>
<div id="conRed">⼤红⾊</div>
<div id="remove" class="blue larger">天蓝⾊</div>
<!--
attr("class") 获取class属性的值，即样式名称
attr("class","样式名") 修改class属性的值，修改样式
addClass("样式名") 添加样式名称
css() 添加具体的样式
removeClass(class) 移除样式名称
-->
<script>
console.log($("#conBlue").attr("class"));
//addClass
$("#conBlue").addClass("weight");
//添加指定属性,如果原标签中已经存在,覆盖原有的值列表
//$("#conBlue").attr("class","weight");
$("#conBlue").removeClass("larger");
$("#conBlue").css("font-style","italic");
</script>
</body>
</html>
获取元素的html内容 获取元素的⽂本内容，不包含html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3 id="title"><span>html()和text()⽅法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
<!--
html() 获取元素的html内容
text() 获取元素的⽂本内容，不包含html
html("html, 内容") 设定元素的html内容
text("text 内容") 设置元素的⽂本内容，不包含html
val() 获取元素value值
val("值") 设定元素的value值
html 与 text之间的区别:
html可以识别纯文本,以及html标签结构
text只能识别存储本
-->
<script>
//操作纯文本
$("#html").html("你好html");
$("#text").text("你好text");
//带有html标签结构
$("#html").html("<h3 style='background: salmon'>你好html</h3>");
$("#text").text("<h3 style='background: salmon'>你好text</h3>");
console.log( $("#title").html());
console.log( $("#title").text());
$("[type='text']").val("哈哈哈");
console.log( $("[type='text']").val());
</script>
</body>
</html>
创建于添加 删除元素 遍历元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
#box{
border : 3px saddlebrown dashed;
}
</style>
</head>
<body>
<div id="box">
<div class="item1">内容1</div>
<div class="item2">内容2</div>
</div>
<!--
创建于添加
创建元素
$('创建内容')
添加元素
prepend(content) 在被选元素内部的开头插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector) 把 content 元素或内容加⼊ selector 元素开头
append(content) 在被选元素内部的结尾插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector) 把 content元素或内容插⼊selector 元素内，默认是在尾部
before() 在元素前插⼊指定的元素或内容:$(selector).before(content)
after() 在元素后插⼊指定的元素或内容:$(selector).after(content)
删除元素
remove() 删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。
empty() 清空所选元素的内容
遍历元素
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
-->
<script>
//创建元素
var ele = $('<p id="p1"><span>你好span</span>你好p1</p>');
//添加元素
//$("#box").prepend(ele);
$("#box").prepend("<p>p2</p>");
ele.prependTo($("#box"));
$("#box").before("<div>box前面</div>");
//删除元素
//$("#box").empty();
//$("#box").remove();
//遍历所有div
$("div").each(function (index,element) {
console.log(index+'---->'+element);
console.log($(element));
});
</script>
</body>
</html>
链式绑定 1.ready 加载事件-> window.onload 2.bind 绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
/*js*/
window.onload = function(){
document.getElementById("btn").style.background = "red";
}
/*jq*/
//1)
$(function(){
$("#btn").css("background","green");
//bind
/*$("#btn").bind("click",function(){
alert("hahaha");
})*/
//链式绑定
$("#btn").bind("click",function(){
alert("hahaha");
}).bind("mouseover",function(){
console.log("移入");
});
$("#btn").bind({
"click":function(){
console.log("点击事件");
},
"mousemove":function(){
console.log("移动了");
}
})
})
</script>
</head>
<body>
<!--
1.ready 加载事件-> window.onload
$(function(){})
$(document).ready(function(){})
window.onload : 待DOM结构,与资源全部加载完成之后触发
ready : 待DOM结构载完成之后触发
2.bind 绑定事件
bind("事件名称",function(){
触发函数
})
-->
<button id="btn" type="button">按钮</button>
<img src="images/pexels-photo-5957341.jpeg" alt="">
</body>
</html>
ajax 异步请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<!--
ajax 异步请求 *****
$.ajax({ -> 配置请求的参数设置
type : 请求方式 "GET|POST",
url : "请求服务器的位置",
data : 请求数据,
dataType : 预期的服务器响应数据的类型 json,text,html,
success : function(data){
请求成功后的回调函数
参数data: 服务器响应的数据
},
error : function(){
请求失败后的回调函数
}
});
-->
<button id="btn" type="button">按钮</button>
<form action="">
<input type="text" name="uname" value="zhangsan"> 用户名
<input type="password" name="upwd" value="1234"> 用户密码
</form>
<script>
$("#btn").bind("click",function(){
console.log($("form").serialize());
$.ajax({
type : "GET",
url : "js/data.json",
/*data : {
"name" : "zhangsan",
age : 18
},*/
data :$("form").serialize() , /*表单提交*/
dataType : "JSON",
success : function (data) {
console.log(data);
console.log(data.code);
console.log(data.message);
console.log(data.result);
},
error : function () {
console.log("请求失败!!!!");
}
});
/*
//GET : 请求json⽂件,传递参数,拿到返回值
$.get('js/data.json',{name:"tom",age:100},function(data){
console.log(data);
});
//POST : 请求json⽂件,传递参数,拿到返回值
$.post('js/data.json',{name:"tom",age:100},function(data){
console.log(data);
});*/
//响应结果固定为json
/*$.getJSON('js/data.json',{name:"tom",age:100},function(data){
console.log(data); // 要求返回的数据格式是JSON格式
})*/
});
</script>
</body>
</html>
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
