JavaScript

什么是JavaScript

JavaScript是一门世界上最流行的脚本语言

快速入门

引入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部标签-->
    <!--script标签内,写JavaScript代码-->
    <script>
        alert('HelloWorld');
    </script>
</head>
<body>

</body>
</html>

<!--外部引入-->
    <script src="js/qj.js"></script>

基本语法入门

  <!--JavaScript严格区分大小写-->
    <script>
        // 1.定义变量 变量类型 变量名 = 变量值
        var score = 71;
        //alert(score);
        // 2.条件控制
        if (score>60 && score<70){
            alert("60~70")
        }else if(score>70 && score<80){
            alert("70~80")
        }else {
            alert("exit")
        }
    </script>

数据类型

数值,文本,图形 ,音频,视频.......

number

js不区分小数和整数,Number

123 //整数
123.1 //浮点数
1.123e3 //科学计数法
-99 //负数 
NaN //not a number
Infinity //表示无限大

字符串

'abc' "abc"

布尔值

true false

逻辑运算

&& 两个都为真,结果为真
|| 一个为真,结果为真
! 真即假,假即真

比较运算符

=
== 等于(类型不一致,值一样,也会判断为true)
=== 绝对等于(类型一样,值一样,结果为true)

须知:

NaN==NaN,这个与所有的数值都不相等,包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题:
```
console.log(1/3) === (1-2/3)
```
尽量避免使用浮点数进行运算,存在精度问题
```
Math.abs(1/3-(1-2/3))<0.00000001
```

null和undefined

null 空
undefined 未定义

数组

Java的数值必须是相同类型的对象,JS中不需要这样

//保证代码的可读性,尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];

取数组下标:如果越界了,就会

undefined

对象

对象是大括号,数组是中括号

每个属性之间用逗号隔开,最后一个不需要添加

<script>
   var person = {
        name: "gy",
        age: 3,
        tags: ['java','javascript','web','...']
   }
</script>

取对象的值

person.name
> "gy"

严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    前提:IDEA需要设置支持ES6语法
    'use strict';严格检查模式,预防JavaScript的随意性导致产生的一些问题,必须写在JavaScript的第一行
    局部变量建议都使用let去定义
    -->
    
    <script>
        'use strict';

        //全局变量
        i = 1;
        //局部变量 ES6 let
        let i = 1;
    </script>
</head>
<body>

</body>
</html>

数据类型

字符串

正常字符串我们使用单引号,或者双引号包裹
注意转义字符

\'
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符

多行字符串编写

//tab上面 esc下面
var msg = `hello
world
nihao`

模板字符串

let name = "gy";
let age = 18;
let msg = `你好呀,${name}`

字符串长度

str.length

字符串的可变性,不可变

大小写转换

//注意:这里是方法,不是属性
student.toUpperCase()
student.toLowerCase()

console.log(student.indexOf('u'))
substring

[)
student.substring(1) //从第一个字符截取到最后一个字符串
student.substring(1,3) //[1,3)

数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6] //通过下标取值和赋值

长度

arr.length

注意:加入给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失

indexOf(通过元素获得下标索引)

arr.indexOf(2)

注意:字符串的"1"和数字1是不同的

slice() 截取Array的一部分,返回一个新数组,类似于String中的substring
push() pop()

push() 压入到尾部
pop() 弹出尾部的一个元素

unshift() shift()

unshift() 压入到头部
shift() 弹出头部的一个元素

排序sort()

arr.sort()

元素反转reverse()

arr.reverse()

concat()

(3) ["A", "B", "C"]
arr.concat([1,2,3])
(6) ["A", "B", "C",1,2,3]
arr
(3) ["A", "B", "C"]

注意:concat()并没有修改数组,只是会返回一个新的数组

连接符join

打印拼接数组,使用特定的字符串连接

(3) ["A", "B", "C"]
arr.join('-')
"A-B-C"

多维数组

arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
4

对象

若干个键值对

var 对象名 = {
	属性名: 属性值,
	属性名: 属性值,
	属性名: 属性值,
}

//定义了一个person对象,它有四个属性
var person = {
    name: "gy",
    age: 18,
    email: "3377153969@qq.com",
    sex: 男
}

在js中,{...}表示一个对象,键值对描述属性xxxx:xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号

对象赋值

person.name = "yg"
"yg"
person.name
"yg"

使用一个不存在的对象属性,不会报错

person.haha
undefined

动态的删减属性,通过delete删除对象的属性

delete person.name
true
person

动态的添加,直接给新的属性添加值即可

person.haha = "haha"
"haha"
person

判断属性值是否在这个对象中

'age' in person
true
//继承
'toString' in person
true

判断一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

流程控制

if判断

var age = 3;
if(age > 3){
	alert("haha");
}else{
	alert("kuwa");
}

while循环,避免程序死循环

var age = 3;
while (age < 100){
    age = age+1;
	alert(age);
}

for循环

for (let i = 1;i < 100;i++){
	console.log(i);
}

forEach循环

var age = [12,3,12,3,12,3,12,31,23,123];
//函数
age.forEach(function (value)){
	console.log(value)
})

for...in

//for(var index in object){}
for(var num in age){
	if(age.hasOwnProperty(num)){
		console.log("存在")
		console.log(age[num])
	}
}

Map和Set

Map:

'use strict';
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom'); //通过key获得value
map.set('admin',123456); //新增或修改
map.delete("tom"); //删除
console.log(name);

Set:无序不重复的集合

set.add(2); //添加
set.delete(1); //删除
console.log(set.has(3)) //是否包含某个元素

iterator

遍历数组:

var arr = [1,2,3,4,5,6]
for (var x of arr){
    console.log(x)
}

遍历map:

var map = new Map([["tom",100],["jack",90],["haha",80]]);
for (let x of map){
    console.log(x)
}

遍历set:

var set = new Set([1,2,3,4,5,6]);
for (let x of set){
    console.log(x)
}

函数

定义函数

绝对值函数

定义方式一

function abs(x) {
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

一旦执行到return代表函数结束,返回结果

如果没有执行return,函数执行完也会返回结果,结果就是undefined

定义方式二

var abs = function(x) {
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

function(x){...}是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数

调用函数

abs(10) //10
abs(-10)  //10

参数问题:JavaScript可以传任意一个参数,也可以不传递参数

假设不存在参数,如何规避?

var abs = function(x) {
    if (typeof x !== 'number'){
        throw 'Not a number';
    }
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

arguments

arguments是一个JS免费赠送的关键字;

代表传递进来的所有的参数,是一个数组

var abs = function(x) {
	
	console.log("x=>"+x);
	
	for(var i = 0;i < arguments.length;i++){
		console.log(arguments[i]);
	}
	
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

rest

ES6引入的新特性,获取除了已经定义的参数之外的所有参数

以前

if (arguments.length>2){
    for (var i = 0;i < arguments.length;i++){
        //...
    }
}

现在

function aaa(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    //rest参数只能写在最后面,必须用...标识
    console.log(rest);
}

变量的作用域

在JavaScript中,var定义变量实际是有作用域的

假设在函数体中声明,则在函数体外不可以使用

function qj() {
	var x = 1;
	x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名,只要在函数内部,就不冲突

function qj() {
	var x = 1;
	x = x + 1;
}
function qj2() {
	var x = 1;
	x = x + 1;
}

内部函数可以访问外部函数的成员,反之则不行

function gy() {
    var i = 1;

    function yg() {
        var y = x + 1; //2
    }

    var z = y + 1; //Uncaught ReferenceError: y is not defined
}

假设内部函数变量和外部函数的变量重名

function gy(){
	var x = 1;
	
	function gy2(){
		var x = 'A';
		console.log('inner'+x); //outer1
	}
	console.log('outer'+x); //inner
	gy2()
}

gy()

假设在JavaScript中,函数查找变量从自身函数开始,由内向外查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量

提升变量的作用域

function gy(){
    var x = "x"+y;
    console.log(x);
    var y = 'y';
}

结果:x -> undefined

说明:js执行引擎,自动提升了y的声明,但是不会提升变量y的赋值

function gy(){
    var y;
    var x = "x"+y;
    console.log(x);
    y = 'y';
}

这个是在JavaScript建立之初就存在的特性

养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码维护

function gy(){
    var x = 1;
   	    y = x + 1;
   		z,i,a;
}

全局函数

//全局变量
x = 1;
function f(){
    console.log(x);
}
f()
console.log(x);

全局对象 window

var x = 'xxx';
alert(x);
alert(window.x); //默认所有的全局变量,都会自动绑定在window对象下

alert()这个函数本身也是一个window变量

var x = 'xxx';
window.alert(x);

var old_alert = window.alert;

window.alert = function(){

};
//发现alert()失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的window上.如果不同的js文件,使用了相同的全局变量,就会产生冲突.如何才能减少冲突?

//唯一全局变量
var App = {};

//定义全局变量
App.name = 'gy';
App.add = function(a,b){
    return a + b;
}

把自己的代码全部放在自己定义的唯一空间名字中,降低全局命名冲突的问题

局部作用域

function aaa() {
    for (var i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1); //出了作用域还可以使用
}

ES6 let关键字,解决局部作用域冲突问题

function aaa() {
    for (let i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1); //Uncaught ReferenceError: i is not defined
}

常量const

在ES6之前,怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值

var PI = '3.14';
console.log(PI);
PI = '2.13'; //可以改变这个值
console.log(PI);

在ES6引入了常量关键字const

const PI = '3.14';
console.log(PI);
PI = '2.13'; //Uncaught TypeError: Assignment to constant variable
console.log(PI);

方法

定义方法

方法就是把函数放在对象内部,对象只有两个东西:属性和方法

var gy = {
    //属性
    name: 'gy',
    birth: 2023,
    //方法
    age:function () {
        //今年减去出生年份
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}

apply

在js中可以控制this指向

//方法
function getAge() {
    //今年减去出生年份
    var now = new Date().getFullYear();
    return now-this.birth;
}

var gy = {
    name: 'gy',
    birth: 2020,
    age: getAge
}

getAge.apply(gy,[]); //this指向了gy,参数为空

内部对象

标准对象

typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

Date

基本使用

var now = new Date();

now.getFullYear(); //年
now.getMonth(); //月
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getSeconds(); //秒

now.getTime(); //时间戳 全世界统一
console.log(new Date(1699959324927)) //时间戳转换为时间

转换

now
Tue Nov 14 2023 18:55:24 GMT+0800 (中国标准时间)
now.toLocaleString()
'2023/11/14 18:55:24'
now.toGMTString()
'Tue, 14 Nov 2023 10:55:24 GMT

Json

Json是什么

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中,一切皆为对象,任何js支持的类型

格式:

对象都用{}
数组都用[]
所有的键值对都是用key:value

var user = {
    name: "gy",
    age: 18,
    sex: '男'
}

//对象转化为json字符串{"name":"gy","age":18,"sex":"男"}
var jsonUser = JSON.stringify(user);

//json字符串转化为对象
var obj = JSON.parse('{"name":"gy","age":18,"sex":"男"}');

JSON和JS对象的区别

var obj = {a:'hello',b:'hellob'};
var json = '{"a":"hello","b":"hellob"}'

面向对象编程

类:模板
对象:具体的实例

var Student = {
    name: "gy",
    age: 18,
    run: function () {
        console.log(this.name + "run...");
    }
};

var Bird = {
    fly: function () {
        console.log(this.name + "fly...");
    }
}

var xiaoming = {
    name: "xiaoming"
};

//__proto__原型
xiaoming.__proto__ = Bird;

function Student(name) {
    this.name = name;
}

//给student新增一个方法
Student.prototype.hello = function () {
    alert('hello')
};

class继承

定义一个类,属性,方法

//ES6之后
//定义一个学生的类
class Student{
	constructor(name) {
	this.name = name;
	}

	hello(){
		alert('hello')
	}
}

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");

继承

class Student{
	constructor(name) {
	this.name = name;
	}

	hello(){
		alert('hello')
	}
}

class XiaoStudent extends Student{
	constructor(name,grade) {
	super(name);
	this.grade =grade;
	}

	MyGrade(){
		alert(123)
	}
}

var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",1);

原型链

850375-20190708153139577-2105652554

操作BOM对象(重点)

BOM:浏览器对象模型

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
716
window.innerWidth
934
window.outerHeight
824
window.outerWidth
1536

Navigator,封装了浏览器的信息

Navigator.appName
undefined
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0'
navigator.platform
'Win32'

大多数时候,我们不会使用navigator对象,因为会被人修改

不建议使用这些属性来判断和编写代码

screen

//代表屏幕尺寸
screen.width
1536 px
screen.height
864 px

location(重要)

location代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload() //刷新网页
//设置新的地址
location.assign('https://blog.kuangstudy.com/')

document

document代表当前的页面,HTML DOM文档树

document.title
'Title'
document.title='gy'
'gy'

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById('app');
</script>

获取cookie

document.cookie
'BIDUPSID=668F0B51C34FA2DF0A8672950C42EB20; PSTM=1615030644; BAIDUID=EEDDF4119F80'

服务器端可以设置cookie:httpOnly

history

history.back() //后退
history.forward() //前进

操作DOM对象(重点)

DOM:文档对象模型

核心

浏览器网页就是一个DOM树形结构

更新:更新DOM节点
遍历DOM节点:得到DOM节点
删除:删除一个DOM节点
添加:添加一个DOM节点

要操作一个DOM节点,就必须要先获得

获得DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>


<script>
    //对应css选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');
    
    var childrens =father.children; //获取父节点下的所有子节点
</script>
</body>
</html>

更新节点

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

<script>
    var id1 = document.getElementById('id1');
</script>

操作文本:

id1.innerText='456' 修改文本的值
id1.innerHTML='< strong >123< /strong >' 可以解析HTML文本标签

操作css:

id1.style.color = 'yellow'; //属性使用 字符串 包裹
id1.style.fontSize = '20px';
id1.style.padding = '2em'

删除节点

删除节点的步骤:先获取父节点,再通过父节点下的所有子节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>

<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self)
</script>

注意:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意

插入节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
</script>

list.appendChild(js) //追加到后面

效果:

创建一个新的标签,实现插入

var js = document.getElementById('js'); //已经存在的节点
var list = document.getElementById('list');

//通过js创建一个新的节点
var newP = document.createElement('p'); //创建一个p标签
newP.id = 'newP';
newP.innerText = "hello world";

//list.appendChild(newP);

//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript')

//创建一个style标签
var myStyle = document.createElement('style'); //创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerText = 'body{background-color: green;}'; //设置标签内容

document.getElementsByTagName('head')[0].appendChild(myStyle)

insert

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

操作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="post">
    <p>
        <span>用户名:</span><input type="text" id="username">
    </p>

    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
</form>

<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');

    input_text.value //得到输入框的值单选框
    input_text.value ='123' //修改输入框的值
    
    //对于单选框,多选框等固定的值,boy_radio.value只能取到当前的值
    boy_radio.checked; //查看返回结果,是否为true,如果为true,则被选中
    girl_radio.checked = true; //赋值
</script>
</body>
</html>

提交表单(MD5加密):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="https://www.baidu.com/" method="post">
    <p>
        <span>用户名:</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码:</span><input type="text" id="password" name="password">
    </p>
    
    <input type="hidden" id="md5-password" name="password">

    <!--绑定事件onlick被点击-->
    <button type="submit" onclick="aaa()">提交</button>
</form>

<script>
    function aaa() {
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        var md5password = document.getElementById('md5-password');
        //MD5算法
        password.value = md5(password.value);
        md5password.value = md5(password.value);
    }
</script>
</body>
</html>

jQuery

公式:$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.3.1.min.js"></script>
</head>
<body>

<a href="" id="test-jquery">点我</a>

<script>
    document.getElementById('id');
    //选择器就是css的选择器
    $('#test-jquery').click(function () {
        alert('hello world');
    })
</script>

</body>
</html>

选择器

<script>
    //原生js,选择器少,麻烦不好记
    //标签
    document.getElementsByTagName()
    //id
    document.getElementById()
    //类
    document.getElementsByClassName()
    
    //jQuery css中的选择器它全部都能用
    $('p').click(); //标签选择器
    $('#id1').click(); //id选择器
    $('.class1').click(); //class选择器
</script>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.3.1.min.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--获取鼠标的当前的一个坐标-->
mouse:<span id="mouseMove"></span>

<div id="divMove">
    在这里点击鼠标试试
</div>

<script>
    //在当前网页元素加载完毕后,响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
    });
</script>
</body>
</html>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text(); //获得值
$('#test-ul li[name=python]').text('设置值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('123'); //设置值

css的操作

$('#test-ul li[name=python]').css({"color","red"});

元素的显示和隐藏:本质display:none;

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

posted @ 2023-11-16 08:30 郭岩不会打代码阅读(14) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· GUI编程

· 面向对象编程

· JavaScript

· JavaScript随笔

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义

公告

昵称：郭岩不会打代码
园龄： 1年10个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

gy486926

JavaScript

JavaScript

什么是JavaScript

快速入门

引入JavaScript

基本语法入门

数据类型

严格检查模式

数据类型

字符串

数组

对象

流程控制

Map和Set

iterator

函数

定义函数

变量的作用域

方法

内部对象

Date

Json

面向对象编程

操作BOM对象(重点)

操作DOM对象(重点)

操作表单

jQuery

选择器

事件

操作DOM

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜