JavaScript入门
目录
1.什么是JavaScript？
1、是一种可以在浏览器中运行的脚本语言
2、主要用来实现在浏览器端的动作
在浏览器端的动作：
- 用户交互
- 数据处理
2.Java与javaScript
- Java需要编译
- javaScript是解释性语言
- JavaScript源代码放在Html里头
3.HTML中的js
1、在head中定义函数
<script language="JavaScript">
2、在相应标记中定义动作
<onXXX=" ">
3、应用：如何在HTML中加入javaScript,head中的Script和body中的OnLoad的使用
注意：每一条js语句必须以分号结束，即使分号前有空格，换行写分号都行，必须要有分号。
<html>
<body onLoad="alert('hi')">
<script>
document.write("Hello world！");
document.write("<h1>Hello wrold！</h1>");
</script>
</body>
</html>
//解释：
//doucument是一个对象（文本）
// 点.是运算符
// write是一个动作（写）
// 一整句的意思是：doucment这个对象做write动作
// html的元素可以写到js里<h1>是html的一级标题
//当做write这个动作的时候，也可以让html的标记感受一个动作,在body标签
//里onLoad的时候做一个动作alert,
//外层已经加了双引号，为了区分 里层用单引号
4.js变量和计算
变量是存放数据的地方，JavaScript的变量没有类型，但是数据是有不同的类型的：数值、字符串或逻辑量。针对不同的类型可以做不同的运算，而不同的运算之间又有不同的优先级
1.变量
1、需要定义一个变量的时候用var（var即varible),var后面跟着变量名
var button;
2、定义变量时可以直接赋初值，也可以不给初值，但是在第一次使用之前要赋初值
var button="red"
3、命名规则
（1）变量只能是字母、数字、下划线组成，但是第一个字符不可以是数字
（2）变量名不可以是JavaScript的关键字/保留字
4、代码演示
<html>
<body onLoad="alert('hi')">
<script>
var hello;
hello="hello";
//字符串类型
document.write(hello);
var number=18;
//数字类型
document.write(number);
</script>
</body>
</html>
2.计算
1、+号运算
（1）数字相加，可以直接想加，也可以不同的数据类型的两个数字相加，两个变量之间的相加，方便数据修改；
var number = 16+2;
var age=9.0;
var result=number+age;
（2）如果+的不是两个数字，那么+号表示连接，不是数学的角度上的相加，只有一个数字会把数字当成字符串连接起来。
var hello = hello;
hello = hello + "world";
number = 10;
document.write(hello + number);
//字符串类型,字符串连接
2、乘法、除法运算，运算顺序与数学一样，他们的优先级一样。
乘法运算符：*
除法运算符：/
var number = 16 * 1 / 2;
3、括号运算
括号的优先级最高，先算括号里面，在按优先级算外面.
var number = ((16+2) * 1 )/ 1;
4、取模运算（%），也就是取余
var result = 10 % 3;
var num = 10 % 2;
5、比较运算，比较运算返回的结果是布尔类型true或false
(1)数值比较
var tiger = 10;
var cat =10;
document.write(tiger==cat);
//10==10，为真，返回结果为true，==是等于
（2）字符串比较
按照ASCALL码表
var str = "Gello";
var str1 = "Hello"
document.write(str>str1);//false
6、代码演示
<html>
<body onLoad = "alert('hi')">
<script>
var hello = hello;
hello = hello + "world";
//字符串类型,字符串连接
document.write(hello);
var number = ((16+2) * 1 )/ 1;
//*是乘法运算，/是除法运算,先算括号
number = -number;
//数字类型
var bo = true;
//逻辑的布尔类型
var result = 10 % 3;
//取模运算，结果是1
result++;//先取结果后运算+1
++result;//先加1，后取结果
result--;
--result;
//单独运算，最好不要把它放在别的运算式子里，以方便阅读和防止运算错误
document.write(hello + number);
//从数学的角度看加号（+）在这里是不合理的，实际上这里做的是字符串的连接，把数字当成字符串
document.write(result);
var age1=18;
var age2=20;
document.write(age1==age2);
//比较运算，输出结果为false
document.write(age1 != age2);
//age1是否等于age2？不等于，结果返回true
document.write(age1 > age2);
//false
document.write(age1 < age2);
//true
document.write(age1 >= age2);
//false
document.write(age1 =< age2);
//true
</script>
</body>
</html>
1. 运算符优先级
JavaScript在计算表达式时具有一套运算规则控制运算符执行的顺序，高优先级的运算符先于底优先级的运算符执行。
下表从上到下优先级降低，相同优先级的运算符从左到右顺序执行。
| 运算符 | 描述 |
|---|---|
| . [] () | 字段访问、数组下标、函数调用以及表达式分组 |
| ++ – ~ ! delete new typeof void | 一元运算符、返回数据类型、对象创建、未定义值 |
| * / % | 乘法、除法、取模 |
| + - + | 加法、减法、字符串连接 |
| << >> >>> | 移位 |
| < <= > >= instanceof | 小于、小于等于、大于、大于等于、instanceof |
| == != === !== | 等于、不等于、严格相等、非严格相等 |
| & | 按位与 |
| ^ | 按位异或 |
| I | 按位或 |
| && | 逻辑与 |
| II | 逻辑或 |
| ?: | 条件运算 |
| = oP= | 赋值、运算赋值 |
| , | 多重求值 |
所有的逻辑运算符的优先级都低于关系运算符（！> && > II)
5.控制
1.判断
（1）判断是计算机最基本的逻辑操作，通过对变量和常数的比较，决定程序的不同走向。
（2）if-else根据条件的正确与否决定执行不同的语句，而switch-case则能根据不同的数值决定执行不同的语句
if-else代码演示：
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var age = 20;
document.write("你的年龄是"+age);
//这一句最后显示，为什么呢？
//这是写到document里的，得先形成HTML文档，然后再被浏览器警示执行。
//浏览器执行之前，JavaScript的所有语句要先被执行完
if(age >= 18)
{
alert("哟呵，成年啦");
}
else{
alert("还小呢，未成年，好好学习");
}
alert("你"+age+"岁啦");
</script>
</body>
</html>
(3)嵌套的if语句
比较大小：
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var num1 = 23;
var num2 = 10;
var num3 = 90;
var min;
if(num1 < num2)
{
if(num1 < num3)
{
min = num1;
}
else
{
min = num3;
}
}
else
{
if(num2 < num3)
{
min = num2;
}
else
{
min = num3;
}
}
alert("Minnum value: " +min);
</script>
</body>
</html>
建议：在if和else后面永远放一对{}，哪怕后面只有一句语句，利于将来的维护。
（4）switch-else:
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var grade = 78;
grade = grade / 10;
switch(grade){
case 10:
case 9:
alert("成绩等级为：A");
break;
case 8:
alert("成绩等级为：B");
break;
case 7;
alert("成绩等级为：C");
break;
case 6:
alert("成绩等级为：D");
break;
default:
alert("不及格，等级为：F");
break;
}
</script>
</body>
</html>
2.循环
反复做相同的动作是计算机最擅长的事情，其实计算机的运作就是在不断的等待人的动作，然后根据当时的情况作出各种动作。javaScript和其他主流语言一样，提供了while、do-while和for三种循环。三种循环在功能上是等价的，每种循环有自己的特点和适用的场合。
（1）while循环(先判断再执行）
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var cont = 1;
var limit =5;
while(count<=limit)
{
alert(count);
count = count + 1;
}
var total = 10;
var max = 1;
while(total > max)
{
total = total /2;
alert("Current total: "+total);
}
</script>
</body>
</html>
(2)求最大公约数（辗转相除法）
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var u = 42;
var v = 21;
var temp = v;
while( v != 0)
{
temp = u % v;
u = v;
v = temp;
}
alert("最大公约数是："+u);
</script>
</body>
</html>
(3)do-while循环（先执行再判断）
把一个数反过来：
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var number = 23871;
var reverse = 0;
do
{
var lastDigit = number % 10;
reverse = (reverse * 10)+lastDigit;
number = number / 10;
}while(number > 0);
alert("The number reversed is："+reverse);
</script>
</body>
</html>
（4）for 循环（for(init; condition; step))
有初始值，循环条件，改变动作
1到100的数字之和：
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var result = 0;
for(var i = 0; i <= 100; i++)
{
result += i;
}
alert("1到100的数字之和:"+result);
</script>
</body>
</html>
（5）如何选择循环
- 当循环的次数预先知道，或者需要有递进 的动作时，往往选择for循环。
- 如果必须执行一次，用do-while;
- 其他情况用while.
（6）break 与continue
- break：跳出循环
- continue：跳过当前循环步，进入循环的下一轮
6.函数
- 函数就是一段代码，我们给它起个名字，放起来，以后可以用
- JavaScript有很多内置函数，能帮助我们实现很多有用的功能
1.如何定义函数
- function fun_name(){} 无参函数
- function fun_name(a,b){} 有参函数
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var u = 42;
var v = 21;
//求最大值
function max(a,b)
{
return a>b?a:b;
}
//输出值
function prints(s){
document.write(s);
}
//求最大公约数
function gcd(u,v){
var a=u;
var b=v;
var temp = v;
while( v != 0)
{
temp = u % v;
u = v;
v = temp;
}
print(a+"和"+b+"最大公约数是："+u+"<br/>");
}
print(max(42,21)+"<b/r>");
print(u+"和"+v+"的最大公约数是："+gcd(u,v)+"<br/>");wz
</script>
</body>
</html>
2.函数变量
- var f=new function(“x”,“y”,“return x*y”){};
- 等价于
- function f(x,y){return x*y;}
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
function add(a,b)
{
return a+b;
}
function cal(f,a,b)
{
return f(a,b);
}
//输出值
function prints(s){
document.write(s);
}
//换行函数
function println(s)
{
print(s+"<br/>");
}
println(cal(add,5,6)+"<br/>");
</script>
</body>
</html>
3.变量空间
- 定义在任何函数之外的变量属于全局（整个网页）空间，在网页的任何地方都可以使用
- 定义在某个函数内部的变量属于局部（函数内部）空间，只在函数内部有效
- 局部有和全局重名的变量时，采用局部的
7.数组
当你需要放一些数据时，特别是每个数据将通过一个对应的索引数字来访问，需要数组。比如记录一个班级的所有学生的成绩。
1.创建数组的方式
- var a = new Array();
- var b = new Array(size);size表示数组的初始大小，大小不是固定的，不是它的最终大小
- var c = new Array(d1,d2,…,dn);
- var d = [d1,d2,…,dn];
var marks = new Arry();
marks[0] = 89;
marks[1] = 100;
var c = new Array(89,100,...);
var d = [89,100,...];
2.访问数组
- [ ]运算符访问数组中的一个单元
- a[0]，可以读也可以写
- 索引从0开始，即数组下标从零开始
- a[x] = n直接创建了数组中的一个单元x,并且赋了值n
var colors = ["red", "blue", "green"];
alert(colors[0]);
colors[2] = "black";
colors[3] = "brown";
colors[100] = "yellow";
3.数组长度
1、a.length给出数组a的长度，是其中最大下标+1
var colors = ["red","blue","green"];
var names = [];
alert(colors.length);//结果为3
alert(names.length);//结果为0
colors[4] = "brown";
alert(colord.length);//结果为4
2、.length可写
（1）长度设小
var colors = ["red","blue","green"];
colors.length = 2;//长度设小了
alert(colors[2]);//结果：undefind,把后面的东西拿掉了
（2）长度减小再增大
var colors = ["red","blue","green"];
colors.length = 2;//长度设小了
color.length = 3;//设大
alert(colors[2]);//结果：undefind,已经拿掉再设大，原来的东西已经不存在了
（3）长度增大
长度永远比下标最大值大1
var colors = ["red","blue","green"];
color.length = 4;
alert(colors[3]);
colors[colors.length]= "black";//这样写可扩展性强
colors[colors.length] = "brown";
4.转换数组为字符串
- .toString()
- .valueOf();
var colors = ["red","blue","green"];
alert(colors.toString());
alert(colors.valuesOf());
alert(colors);
alert(colors.join("*");//输出结果为red*blue*green
5.堆栈操作
堆栈先进后出原则
var colors = new Array();
var count = colors.push("red","green");//放了两个字符串进去
alert(count);//count为2
count = colors.push("black");//3
alert(count);
var item = colors.pop();//出栈black
alert(item);//black
alert(colors.length);
6.队列操作
队列先进先出原则
var colors = new Array();
var count = colors.push("red","green");//进队列
alert(count);//2
count = colors.push("black");//进队列
alert(count);
var item = colors.shift();//出队列“red"
alert(item);
alert(colors.length);
7.排序操作
（1）方法
排序方法sort()，默认从小到大
把原来的顺序颠倒过来：reverse()
var values = [1,3,2,8,5,10];
values.sort();
alert(values);//1,2,3,5,8,10
var values = [3,1,9,10,6,0];
values.reverse();
alert(values);//0,6,10,9,1,3
（2）自己写比较方法,按逆序输出（从大到小）
function compare(value1,value2){
if(value1 < value2){
return 1;
}else if(value1 > value2)
return -1;
}else{
return 0;
}
}
var values = [0,1,5,10,15];
values.sort(compare);
alert(values);//15,10,5,1,0
8.数组操作
- 连接
colors2 = colors.concat(“yellow”,[“black”,“brown”]); - 截取
colors3 = colors.slice(1,4);用slice取1-3，1是开始位置，4是结束位置，取1，2，3，4不取 - splice(开始位置，删除个数，插入元素…)
- 删除：splice(0,2);
- 插入：splice(2,0,“red”,“green”);//从2的位置开始，删除0个，插入red、green
- 替换：splice(2,1,“red”,“green”);//从2的位置开始，删除一个，red替换删除的那个
8.对象
当需要放一些数据时，特别是每个数据讲通过一个对应的名字来访问时，需要对象。JavaScript可以先创建对象，然后再设定对象的属性和动作。浏览器和浏览器中的文档都是以对象的形式提供编程接口的
1.理解JavaScript中的对象
- 对象是JavaScript的一种复合数据类型，它可以把多个数据集中在一个变量中，并且给其中的每个数据起名字
- 或者说，对象是一个属性集合，每个属性都有自己的名字和值
- JavaScript并不像其他OOP语言那样有类的概念，不是先设计类再制造对象
2.创建对象的方式
一种是直接new一个Object,另外一种是用大括号，如方式二x、y、radius是三个属性，用逗号分隔，0、0、2是赋予的值：
- 方式一：var a=new Object();
- 方式二：var ciclr={x:0,y:0,radius:2};
3.如何访问对象属性
1.运用对象
- 运算符
new一个book对象，在这之前，没有任何地方说book有title，我们给book的title赋值了，book就有title
var book = new Object();
book.title = "JavaScript";
book.translator = "李白";
book.chapter1 = new Object();
book.chapter1.title = "JavaScript简介";
- 即使构造的时候不存在的属性也可以在今后随时增加
2.删除对象属性
- delete book.chapter1;
- book.chapter1=null;
3.遍历所有属性
遍历方法：for(var x in a)
意思是对于a这个对象里的每一个属性取出来，循环的每一遍，把它作为x拿来用，然后对x进行操作干活
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var a = new Object();
a.name = "Mike";
a.age = 18;
a.salary = 10000;
for( var x in a){
//alert(x);输出a的属性
alert(x+"="+a[x]);//通过数组的方式访问它的值
}
</script>
</body>
</html>
当对象有很多属性的时候，上百上千的，哇！一个个加也太麻烦了，代码量还繁重，那怎么办呢？
答案是用构造方法。
4.构造方法
- 构造函数
1.不直接制造对象
2.通过this来定义成员
3.没有return
function CaclArea(w,h){
this.with = w;
this.height = h;
this.area = function(){
return this.with * this.height;
};
}
//this就是new CaclArea();
var r = new CaclArea(3,4);
alert(r.area());
r.with=10;//可以修改它的值
alert(r.area());
- 自定义构造函数就可以构造任意数量的对象
4.原型对象
1.原型对象的理解与应用
- 对象的prototype属性指定了它的原型对象，可以用点（.）运算符直接读它的原型对象的属性
- 当写这个属性时才在它自己内部产生实际的属性
- 只要不去改写，prototype的同一个对象里的属性都是共享的，改写之后就是自己的，但是没改的的属性仍然是prototype的
function Person(){}
Person.prototypr.name = "Mike";
Person.prototype.age = 18;
Person.prototypr.job = "Software Engineer";
Person.prototypr.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName();//Mike
var person2 = new Person();
person2.sayName();//Mike
alert(person1.sayName() == person2.sayName());//true
//改写
person1.name = "Jone";
alert(person.name);//Jone -from instance
alert(person2.name);//Mike -from prototypr
2.原型对象的问题
对某个对象的属性进行改变的时候，但不是赋值的形式，改变后的属性仍然是共享的。
function Person(){}
Person.prototype = {
constructor: Person,
name : "Mike",
age : 18,
job : "Software Engineer",
friends : ["aaa","apple"],//数组
sayName : function(){
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Pero");//person1添加朋友
alert(person1.friends);//aaa,apple,Pero
alert(person2.friends);//aaa,apple,Pero
上面代码可以可以看出friends数组，只对person1的friends操作，朋友加多了一个，但是person2的friends却也有了相同的朋友。怎么解决呢？组合原型和构造方法！
3.组合原型和构造方法
构造方法属于自己的属性，原型共享共同使用的属性与方法
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["aaa","apple"];
}//this的是属于自己的
Person.prototype = {//prototype的是共享的
constructor: Person,
sayName: function(){
alert(this.name);
}
};
var person1 = new Person("Mike"，19，"Software Engineer");
var person2 = new Person("kk",20,"Doctor");
person1.friends.push("vann");
alert(person1.friends);//aaa,apple,vann
alert(person2.friends);//aaa,apple
alert(person1.friends == person2.friends);//false
alert(person1.sayName == person2.sayName);
9.在浏览器里的JavaScript
JavaScript通常是在浏览器里运行的，程序如何能与浏览器互动呢？怎样能得到浏览器的各种信息，怎样能控制浏览器的动作呢？
1.window
1.window理解
1.全局对象
- 浏览器的全局对象是window
- 所有全局的变量实际上是window的成员
- var answer =12;
- alert(window.answer);
2.document
- window.document表示浏览器窗口中的HTML页面
- document.write()将内容写入页面
- 页面中的元素就是document里的成员
for(x in document)
document.write(x+"<br/>");//列出document里的所有成员
2.HTML中的JavaScript
3中方式：
- 在<script>/script>中标记
- 在<script>的src属性或archive指定的外部文件中
- 在某个HTML标记的事件处理器中
1.外部的JavaScript文件
（1）方式一
<script src = "util.js"></script>
（2）方式二
一个纯粹的代码文件，没有HTML标记
2.事件处理器
1）鼠标事件
（1）鼠标经过做动作（onMouseOver)：
<p onMouseOver="alert('hi');">
（2）鼠标出去做动作(onMouseOut):
<p onMouseOut="alert('bye');">
2）body事件
（1）onLoad事件，页面加载后立即执行
定义和用法:
- onload 事件在对象被加载后发生。
- onload 最常用于 元素中，用于在网页完全加载所有内容（包括图像、脚本文件、CSS 文件等）后执行脚本
- onload 事件可用于检查访问者的浏览器类型和浏览器版本，并根据这些信息加载网页的正确版本
- onload 事件也可用于处理 cookie
<body onLoad="myFunction()">
（2）onUnload事件在用户退出页面时发生(通过点击一个连接，提交表单，关闭浏览器窗口等等)
<body onunload="alert('bye');">
window.onunload = function(){
alert("unload is work");
}
3）简单对话框
（1）alert();直接弹出对话框，无取消按钮
（2）confirm();弹出对话框，有取消按钮
（3）prompt();弹出输入框
（4）console;写入控制台
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
if(confirm("还要继续吗？")){
alert("yes");
}else{
alert("bye");
}
var name = prompt("what's your name?");
alert(name);
</script>
</body>
</html>
4)状态栏
（1）status=
（2）defaultStatus=
<p onMouseOver="status='大学慕课网';"
onMouseOut = "status=' ';">
</p>
5)定时器
setInterval(),两个参数，第一个是做什么动作，第二个是时间间隔
<html>
<head>
<meta charset=utf-8>
<script>
var count = 10;
function update(){
if(count>=0)
status = count--;
}
</script>
</head>
<body onLoad="setInterval('update()',1000);">
</body>
</html>
3.window的控制方法
1.open和close
- window.open(),打开一个新的窗口
- w=window.open(“amallwin.html”,“smallwin”,“width=400,height=350,status=yes,resizable=yes”);参数
- w.close();
- window.close();
<html>
<head>
<meta charset=utf-8>
<script>
var count = 10;
function update(){
if(count>=0)
status = count--;
}
function closeWindow(){
w.close();
}
</script>
</head>
<body onLoad="setInterval('closeWindow()',3000);">
<script>
var w = open("black.html","hello","width = 300,height=300");
w.moveTo(30,30);
</script>
<p onMouseOver="status='慕课';">
</body>
</html>
2.location对象
- window.location代表当前文档的URL
- alert(location);//显示地址
- location=“http://baidu.com”;//自定义url
<html>
<head>
<meta charset=utf-8>
<script>
function jamp(){
location = "http://baidu,com";
}
</script>
</head>
<body onLoad="setInterval('jamp()',1000);">
</body>
</html>
2.document
HTML下document也是有层次的，有段落、图片、表单、表格、链接，那怎么去访问这些呢？
1.Document Object Model
- 文档对象模型
- document对象的成员提供了HTML文档的信息
图片元素：images,是一个数组
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<img name="hua" src="flower.jpg">
<p id="p" name="hi">你好啊大哥大姐叔叔阿姨</p>
<script>
alert(document.images[0].src);//第一种方式：通过images图片的数组方式访问
alert(document.hua);//第二种：通过给图片的名字来访问
alert(document.getElementsByName("hi"));
//p标签要通过getElementsByName或getElementsById
alert(document.getElementsById("p"));
</script>
</body>
</html>
2.document的成员
| 成员 | 描述 |
|---|---|
| anchors[] | 创建HTML锚 |
| forms[] | 表单 |
| images[] | 图片 |
| cookies | 浏览器证明身份 |
| title | document标题 |
| bgColor | 背景颜色 |
| fgColor | 前景颜色 |
| linkColor | 设置或获取文档中超链接的颜色 |
| alinkColor | 设置或获取文档中激活的超链接的颜色 |
| vlinkColor | 设置或获取文档中已访问过的超链接的颜色 |
1.图像
- images对象的src可以改写以装入一副新的图片
- 可以创建Image()对象来提前装载图片
- onLoad事件表明图片装载完成
（1）images[]的使用，images是一个数组
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<img name="hua" src="flower.jpg">
<p id="p" name="hi">你好啊大哥大姐叔叔阿姨</p>
<script>
alert(document.images[0].src);//第一种方式：通过images图片的数组方式访问
alert(document.hua);//第二种：通过给图片的名字来访问
alert(document.getElementsByName("hi"));
//p标签要通过getElementsByName或getElementsById
alert(document.getElementsById("p"));
</script>
</body>
</html>
（2）图片的动态变化
<body onLoad= "setInterval('show()',200)">
<!--每两百秒调用show一次-->
<img name="amm" src="1.jpg" with=300></img>
<script>
var images=new Array(6);//初始化
var index=1;
for(var i=0;i<6;i++){//循环
images[i]=new Image();//构造
images[i].src=i+".jpg";//赋值，图片名，赋值引起图片的装载，0.jpg,1.jpg...
}
function show(){
document.amm.src=images[index].src;//换图片
// document.amm.src="hua.jpg";
index=(index+1)%6;//改变值
}
</script>
</body>
9931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
