1
2
3
4
5
6
7
8
9
<script>
// 在浏览器中弹出警告框
alert("你能行么？");
// 在浏览器页面中输出一个内容
document.write("我在浏览器页面中显示");
// 向控制台输出一个内容
console.log("我在控制台显示");
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
// string强制类型转换分为两种方法
// 1.调用toString方法
// 2.调用String函数
var a = 159;
a = a.toString();
document.write(a);
document.write(typeof a);
a = "iloveyou";
a = String(a);
document.write(a);
document.write(typeof a);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var a = "123";
a = Number(a);
console.log(typeof a);
console.log(a);
var b = "456px";
b = parseInt(b);
console.log(typeof b);
console.log(b);
var c = "125.56";
c = parseFloat(c);
console.log(typeof c);
console.log(c);
</script>

1
2
3
4
5
6
7
8
9
10
11
<script>
var a = 154;
a = Boolean(a);
console.log(typeof a);
console.log(a);
var b = "ily";
b = Boolean(b);
console.log(typeof b);
console.log(b);
</script>

1
2
3
4
5
6
7
8
9
10
11
<script>
var result = 1 && 2;
console.log(result);
var result = 0 && 2;
console.log(result);
var result = 1 || 2;
console.log(result);
var result = 0 || 2;
console.log(result);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
// 对象的练习
// 创建对象
var obj = new Object();
//给对象添加属性值
//语法:对象.属性名=属性值
obj.name = "李白";
obj.sex = "男";
obj.age = "20";
//读取属性
// 语法：对象.属性名
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);
//修改属性
//语法：对象.属性名 = 新值
obj.name = "程咬金";
console.log(obj.name);
//删除属性
//语法 : delete 对象.属性名
delete obj.name;
console.log(obj.name);
</script>

1
2
3
4
5
6
7
8
9
<script>
var obj2={
name:"李白",
age:18,
sex:"男"
};
console.log(obj2);
</script>

1
2
3
4
5
6
7
8
<script>
var obj = new Object();
obj["name"] = "熊大";
var n = "name";
console.log(obj[n]);
console.log("name" in Object);
</script>

1
2
3
4
5
6
7
8
9
10
11
<script>
function write(){
console.log("这是我的第一个函数");
}
write();
var read = function(){
console.log("这是我的第二个函数");
};
read();
</script>

1
2
3
4
5
6
7
8
<script>
function sum(a,b){
console.log(a+b);
}
// 在调用函数时,可以在()中指定实参
sum(1,3);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <script>
function sayHello(o){
console.log("我是"+o.name+",今年"+o.age+",住在"+o.address);
}
var obj={
name:"李白",
age:18,
address:"古代"
}
sayHello(obj);
function A(a){
console.log("a ="+a );
a(obj);
}
A(sayHello);
// sayHello()
// 调用函数，相当于使用函数的返回值
// sayHello
// 函数对象，相当于直接使用函数对象

</script>

1
2
3
4
5
6
7
8
9
10
11

<script>
(function(){
alert("我是一个匿名函数");
})();
(function(a,b){
alert("a="+a);
alert("b="+b);
})(159,306);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
// 创建一个的对象
var obj = new Object;
// 向对象中添加属性
obj.name="李白";
obj.age=18;
// 对象中的属性值可以实任何的数据类型，也可以是函数
obj.sayName = function(){
console.log(obj.name);
};
console.log(obj.sayName);
obj.sayName();
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script>
function fun(){
console.log(a);
var a=35;
// 在函数作用域中，使用var关键字声明的变量
// 会在函数中所有的代码执行之前被声明，但并未被赋值
}
function fun1(){
c=15;
console.log(c);
// 在函数中，不使用var声明的变量都会成为全局变量
}
function fun2(e){
alert(e);
// 定义形参就相当于在函数作用域中声明了变量
}
</script>

1
2
3
4
5
6
7
8
9
10
11
<script>
fun();
function fun(){
console.log("我是fun函数");
}
var fun2 = function(){
console.log("我是fun2函数");
};
fun2();
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
function fun(){
console.log(this.name);
}
fun();
//创建一个对象
var obj = {
name:"李白",
sayName:fun
};
var name="我是全局作用域的name";
obj.sayName();
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
//使用工厂创建对象
function createPerson(name,age,sex){
var obj = new Object();
obj.name=name;
obj.age=age;
obj.sex=sex;
obj.sayName = function(){
alert(this.name);
};
return obj;
}
var obj2=createPerson("李白",18,"男");
var obj3=createPerson("诸葛",36,"女");
var obj4=createPerson("文松",34,"不男不女");
console.log(obj2);
console.log(obj3);
console.log(obj4);
obj2.sayName();
obj3.sayName();
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <script>
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.sayName=function(){
alert(this.name);
};
}
var per1=new Person("李白",38,"男");
var per2=new Person("杜甫",38,"男");
var per3=new Person("西施",36,"女");
console.log(per1);
console.log(per2);
console.log(per3);
per1.sayName();
// 使用instanceof可以检查一个对象是否是一个类的实例
// 语法：对象 instanceof 构造函数
// 如果是，返回true，反之返回false
alert(per1 instanceof Person);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <script>
// 将构造函数的内部方法提到全局作用域当中
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
// this.sayName=fun;
}
/* function fun(){
alert("hello ,我是"+this.name);
} */
// 向原型函数添加方法
Person.prototype.sayName=function(){
alert("hello ,我是"+this.name);
};
var per1=new Person("李白",19,"男");
var per2=new Person("杜甫",20,"男");
console.log(per1);
console.log(per2);
per1.sayName();
per2.sayName();
console.log(per1.sayName == per2.sayName);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
function MyClass(){
}
// 向MyClass原型中添加属性a
MyClass.prototype.a=123;
// 向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function(){
alert("Hello");
};
// 创建对象
var mc1=new MyClass();
var mc2=new MyClass();
console.log(MyClass.prototype);
console.log(mc2.__proto__ == MyClass.prototype);
// 向mc1中添加a属性
mc1.a = "我是mc1中的a";
console.log(mc1.a);
console.log(mc2.a);
mc1.sayHello();
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script>
function MyClass(){
}
// 向MyClass的原型中添加一个name属性
MyClass.prototype.name="我是原型中的名字";
var mc = new MyClass();
mc.name;
// 为mc的name赋值
// mc.name="我是mc的name";
console.log(mc.name);
// 使用in检查对象中是否含有某个属性值时，对象中没有，原型中有，也会返回true
console.log("name" in mc);
// 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
// 使用该方法只有当对象自身中含有该属性时，才会返回true
console.log(mc.hasOwnProperty("name"));
</script>

1
2
3
4
5
6
7
8
9
10
11
<script>
// 创建数组
var arr=new Array();
// 对数组赋值
arr[0]=1;
arr[1]=2;
// 查看数组
console.log(arr);
console.log(arr.length);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
// 使用字面量数组
var arr = [0,1,2,3,4];
console.log(arr);
var arr2 = new Array(1,5,9);
console.log(arr2);
arr3 = [5,6,7];
console.log(arr3);
arr4 = new Array(3);
console.log(arr4.length);
// 数组中可以放任意的数据类型
</script>

1
2
3
4
5
6
7
<script>
var arr = [1,2,3];
arr.forEach(function(value,index,obj){
console.log(value);
});
</script>

1
2
3
4
5
6
7
8
9
10
11

getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
/* 在js中，使用Date对象来表示一个时间*/
// 创建一个Date对象
var date = new Date();
console.log(date);
//date表示的是当前代码的执行时间
// 创建一个指定的对象时间
// 需要在构造函数中传递一个表示时间的字符串作为参数
// 顺序依次为:月/日/年 时:分:秒
var date1 = new Date("12/05/2030 14:10:36");
console.log(date1);
// getDate()获取当前日期对象是几日
var d = date.getDate();
console.log(d);
</script>

1
2
3
4
5
6
7
 <script>
var reg = new RegExp("a","i"); //这个正则表达式用来检测一个字符串中是否含有a
var str = "abc";
var result = reg.test(str);
console.log(result);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

使用字面量来创建正则表达式
语法：var 变量 = /正则表达式/匹配模式;
创建一个正则表达式，检查一个字符串中是否有a或者b
使用|表示 或者 的意思
使用 [] 里的内容也是或的关系
[ab] == a|b
[a-z] 任意的小写字母
[A-Z] 任意的大写字母
[A-z] 任意字母
[0-9] 任意数字
[^ ]表示除了

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
var reg = /a/i;
var result = reg.test("abcd");
console.log(result);
/* 检查一个字符串中是否含有abc 或者 adc 或者aec */
var reg1 = /a[bde]c/;
var result2 = reg1.test("abc");
console.log(result2);
var reg3 = /[^ab]/;
var result3 = reg3.test("ab");
console.log(result3);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.split(); 可以见一个字符串拆分成一个数组
方法中可以传递一个正则表达式为参数，这样方法会根据正则表达式去拆分字符串
这个方法即使不指定全局匹配，也会全部拆分
2.search(); 可以搜索字符串中是否含有指定内容
如果搜索到指定内容，则返回第一次出现的索引，如果没有搜索到返回-1
可以接受一个正则表达式作为参数，根据正则表达式去检索字符串
search() 只会查找第一个，即使设置了全局匹配也没有用
3.match(); 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
默认情况match只会找到第一个符合要求的内容，之后就会停止
我们可以设置正则表达式为全局模式，这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式，且顺序无所谓
match()会将匹配到的内容封装到一个数组中返回，
4.replace() 可以将字符串中指定内容替换为新的内容
参数：
第一个参数：指被替换的内容，可以接受一个正则表达式作为参数
第二个参数：新内容
默认只会替换第一个

1
2
3
4
5
6
7
8
9
10
11
12

量词
通过量词可以设置一个内容出现的次数，量词只对它前边的一个内容起作用
{n} 正常出现n次
{m,n} 出现m-n次
{m,} 出现m次以上
+ 至少一个，相当于{1,}
* 0个或多个，相当于{0,}
? 0个或1个 相当于{0,1}
^表示开头
$表示结尾

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 <script>
var reg = /a{3}/;
var result = reg.test("aaa");
console.log(result);
var reg2 = /a{1,3}b/;
var result2 = reg2.test("a");
console.log(result2);
var reg3 = /a{4,}/;
var result3 = reg3.test("aaaa");
console.log(result3);
var reg4 = /^a/;
var result4 = reg4.test("abbb");
console.log(result4);
var reg5 = /b$/;
var result5 = reg5.test("b");
console.log(result5);
// 创建一个正则表达式，用来检测一个字符串是否为合法手机号
/*
手机号的规则：
1.以1开头
2.第二位为3-9的任意数字
3.三位以后的数字为0-9任意9个
^1
[3-9] [0-9]{9}$
*/
var phonenum = /^1[3-9][0-9]{9}$/;
console.log(phonenum.test("15961591591"))
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.在正则表达式中表示任意字符，表示转义字符
在正则表达式中，用. 来表示 .
用\ 来表示 
注意：在使用构造函数时，由于它的参数是一个字符串，而是一个转义字符，
如果使用则需要使用\来代替
元字符：
w 表示任意字母、数字、_
[A-z0-9_]
W 表示除了字母、数字、_
[^A-z0-9_]
d 表示任意的数字
[0-9]
D 表示除了数字
[^0-9]
s 表示空格
S 表示除了空格
b 表示单词边界
B 表示除了单词边界

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
// 创建一个正则表达式，检查一个字符串中是否含有单词child
var reg = /bchildb/;
var result = reg.test("hello child");
console.log(result);
// 创建一个正则表达式，用来删除一个字符串的前后空格
var str = "
hello
";
str = str.replace(/^s*|s*$/g,"");
console.log(str);
</script>

1
2
3
4
5
6
7
8
9
10
<body>
<button id="btn">这是个按钮</button>
<script>
// 获取到button对象
var btn = document.getElementById("btn");
// 修改按钮的文字
btn.innerHTML = "i'm button";
</script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<!-- 不推荐使用该种方式 -->
<!-- <button id="btn" οnclick="alert('点我');">我是一个按钮</button> -->
<button id="btn" onclick="alert('点我');">我是一个按钮</button>
<script>
// 获取按钮对象
var btn = document.getElementById("btn");
/* 可以为按钮的对应事件绑定处理函数的形式来响应事件 */
// 绑定一个单击事件
btn.onclick = function(){
alert("你点我");
};
</script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
// 获取按钮对象
var btn = document.getElementById("btn");
// 为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("你好");
};
};
</script>
</head>
<body>
<button id="btn">我是按钮</button>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
height: 100px;
width: 100px;
background-color: greenyellow;
}
</style>
<script>
window.onload = function(){
// 点击按钮,修改box1的大小和颜色
// 获取按钮对象
var button01 = document.getElementById("button01");
button01.onclick = function(){
box1.style.height = "300px";
box1.style.width = "300px";
box1.style.backgroundColor = "black";
};
// 点击按钮2后,显示元素样式值
var button2 = document.getElementById("button02");
button2.onclick = function(){
// 语法: 元素.style.样式
// 通过style属性设置和读取的样式都是内联样式,无法读取样式表中的样式
alert(box1.style.backgroundColor);
};
};
</script>
</head>
<body>
<div id="box1"></div>
<button id="button01">超级变变变</button>
<button id="button02">读取样式值</button>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: greenyellow;
}
#s1{
background-color: hotpink;
}
</style>
<script>
window.onload = function(){
// 为span绑定单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function(event){
alert("我是span的响应函数");
// 取消事件的冒泡
// 可以将事件对象的cancelBubble设置为true，即可取消冒泡
event = event || window.event;
event.cancelBubble = true;
};
// 为div绑定单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function(event){
alert("我是div的响应函数");
event = event || window.event;
event.cancelBubble = true;
};
// 为body绑定单击响应函数
document.onclick = function(){
alert("我是body的响应函数");
};
}
</script>
</head>
<body>
<div id="box1">
我是div
<span id="s1">我是span</span>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
// 获取ul对象
var ul = document.getElementById("ul");
// 为btn添加一个单击响应函数
var btn = document.getElementById("btn");
btn.onclick = function(){
//创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新建超链接</a>"
// 将li添加到ul中
ul.appendChild(li);
};
// 只绑定一次事件而运用到多个元素上，即使元素是后添加的
ul.onclick = function(event){
event = event || window.event;
// target表示触发事件的对象
if(event.target.className == "link"){
alert("我是ul响应函数");
}
};
};
</script>
</head>
<body>
<button id="btn">添加超链接</button>
<ul id="ul" style="background-color: chartreuse;">
<li><a href="javascript:;" class="link">超链接</a></li>
<li><a href="javascript:;" class="link">超链接</a></li>
<li><a href="javascript:;" class="link">超链接</a></li>
</ul>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: chartreuse;
}
</style>
<script>
window.onload = function(){
// 当鼠标滚轮向下滚动时，box1变长，当滚轮向上滚动时，box1变短
var box1 = document.getElementById("box1");
box1.onmousewheel = function(event){
event = event || window.event;
// event.wheelDelta可以获取鼠标滚轮滚动的方向，向上为正，向下为负
// 在火狐中使用event.detail来获取滚动的方向，向上为负，向下为正
if(event.wheelDelta > 0 || event.detail <0){
// 向上滚，box1变短
box1.style.height = box1.clientHeight-10+"px";
}else{
// 向下滚,box1变长
box1.style.height = box1.clientHeight+10+"px";
}
/*
使用addEventListener()方法绑定响应函数，取消默认行为时需要使用event来取消
默认行为event.preventDefault();
*/
// 当滚动条滚动时，如果浏览器有滚动条，滚动条会随之滚动，
// 这是浏览器默认行为，加入return false取消即可。
return false;
};
};
</script>
</head>
<body style="height: 2000px;">
<div id="box1"></div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
document.onkeydown = function(event){
console.log("按下");
event = event || window.event;
/*
可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下
altKey、ctrlKey、shiftKey 这三个用来判断alt ctrl shift是否被按下，是返回true，不是返回false
*/
// 判读y和ctrl是否被同时按下
if(event.keyCode === 89 && event.ctrlKey){
console.log("y和ctrl被同时按下");
}
};
document.onkeyup = function(){
console.log("弹起");
};
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function(event){
event = event || window.event;
// 让文本不能输入数字
// 在文本框输入内容，属于onkeydown的默认行为，取消默认行为，输入的内容不会出现在文本框中
// 数字编码48-57
小键盘上的数字编码为96-105
if(event.keyCode>=96 && event.keyCode<=105){
return false;
}
};
};
</script>
</head>
<body>
<input type="text">
</body>
</html>

1
2
3
4
5
6
7
8
9

BOM--浏览器对象模型，BOM可以使我们通过js来操作浏览器
BOM对象：
1.window 代表的是整个浏览器窗口，同时window也是网页中的全局对象
2.Navigator 代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器
3.Locaton 代表当前浏览器的地址栏信息，通过Locatin可以获取地址栏信息，或者操作浏览器跳转页面
4.History 操作浏览器向前或向后翻页，该操作只在当次访问时有效
5.Screen 代表用户的屏幕信息，通过该对象可以获取到用户显示器的相关信息

1
2
3
4
5
6

1.appName 属性返回浏览器的应用程序名称：
2.userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串包含有
用来描述浏览器信息的内容，不同的浏览器有不同的userAgent
3.appCodeName 属性返回浏览器的应用程序代码名称：

1
2
3
4
5
6

1.length属性，可以获取当前访问的链接数量
2.back(); 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
3.forward(); 可以跳转到下一个页面，作用和浏览器的前进按钮一样
4.go(); 可以用来跳转到指定的页面，需要一个整数为参数，n表示前进跳转n个页面，-n表示后退跳转n个页面

1
2
3
4
5
6
7

1.直接打印location，可以获取到地址栏的信息（当前页面的完整路径）
2.直接将location属性修改为一个完整的路径，或相对路径，页面会自动给跳转到该路径，并且生成相应的记录
3.assign(); 用来跳转到其他的页面，作用和直接修改location一样
4.reload(); 用于重新加载当前页面，作用和刷新按钮一样，在方法中传递一个true，会强制清空缓存刷新页面
5.replace(); 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，不会生成记录，无法使用回退按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b1{
width: 100px;
height: 100px;
background-color: blue;
}
.b2{
width: 200px;
height: 200px;
background-color: chartreuse;
}
</style>
<script>
window.onload = function(){
var btn01 = document.getElementById("btn01");
var box1 = document.getElementById("box1");
btn01.onclick = function(){
// addClass(box1,"b2");
// removeClass(box1,"b1");
toggleClass(box1,"b2");
};
};
// 定义一个函数，用来向一个元素中添加指定的class属性值
// 参数:
//
obj 要添加class属性的元素
//
cn
要添加的class值
function addClass(obj,cn){
// 检查obj中是否含有cn
if(!hasClass(obj,cn)){
obj.className += " "+cn;
}
}
// 判断一个元素中是否含有指定的class属性值,如果有class,则返回true,没有返回false
function hasClass(obj,cn){
// 创建一个正则表达式
var reg = new RegExp("\b"+cn+"\b");
return reg.test(obj.className);
}
// 删除一个元素中的指定class属性
function removeClass(obj,cn){
// 创建一个正则表达式
var reg = new RegExp("\b"+cn+"\b");
// 删除class
obj.className = obj.className.replace(reg,"");
}
// 定义一个切换类toggleClass,元素中具有该类则删除,没有该类则添加
function toggleClass(obj,cn){
// 判断obj中是否含有cn
if(hasClass(obj,cn)){
removeClass(obj,cn);
//有就删除
}else{
addClass(obj,cn);
//没有就添加
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮修改box的样式</button>
<br><br>
<div id="box1" class="b1"></div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

JSON（JavaScript Object Notation）JS对象表示法
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互。
JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须要加双引号，其他的和JS语法一致
JSON分类：
1.对象
2.数组
JSON中允许的值：
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组
将JSON字符串转化为JS中的对象，在JS中，有一个工具类叫做JSON
这个对象可以将JSON转换为JS对象，也可以将一个JS对象转换为JSON
json--> js对象
JSON.parse();可以将JSON字符串转为JS对象，需要一个JSON字符串作为参数，会将该字符串转为JS对象并返回。
JS对象-->JSON
JSON。stringify(); 可以将一个JS对象转换位JSON字符串，需要一个js对象作为参数，会返回一个JSON字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = '[1,2,3,"hello",true]';
var obj2 = '{"arr":[1,2,3]}';
var arr2 = '[{"name":"李白","age":18,"gender":"男"},{"name":"杜甫","age":18,"gender":"男"}]'
var json = '{"name":"李白","age":18,"gender":"男"}';
var o = JSON.parse(json);
console.log(o.gender);
var o2 = JSON.parse(arr);
console.log(o2[1]);
var obj3 = {name:"网三",age:16,sex:"男"};
var str = JSON.stringify(obj3);
console.log(str);
</script>
</body>
</html>