1. js对象
1.1 object对象
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
75
76
77
78
79
80
81
82
83
84
85
86
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>object对象</title> </head> <body> <script> // 1.定义对象方法一 var obj = new Object(); console.log(obj , typeof (obj)) obj.name = "孙坚" ; obj.age = 18; obj.weight = "200斤" ; obj.eat = function (){ alert( "我会吃竹子" ); } console.log(obj.name) // obj.eat(); //2.定义对象方法二 /* 对象中的成员不要使用单引号,在特殊场景中,比如json格式字符串的转换中会报错; */ var obj = { name: "张三" , "age" : 20, sex : "男性" , drink : function (something){ console.log( "我会喝牛栏山" ,something); } } //调用方式一 console.log(obj.sex) obj.drink( "老白干" ) //调用方式二 console.log(obj[ "age" ]) obj[ "drink" ](1) // 注意点 var str = "name" console.log(obj.str , "<==========================>" ) //error console.log(obj.name) console.log(obj[str]) // obj["name"] // eval 可以把字符串当成代码执行 eval( "console.log(333)" ) //3.定义对象方法三 /* 类比python中定义类的写法 , this等价于self */ function Person(name,age,sex){ this .name = name; this .age = age; this .sex = sex; this .func = function (){ console.log( "我是func" ); return this .sex; } } var obj1 = new Person( "刘一风" ,30, "男性" ); var obj2 = new Person( "张三风" ,90, "女性" ); console.log(obj1.name); var res = obj1.func(); console.log(res); console.log(obj2.name) var res = obj2.func(); console.log(res); //4.遍历对象 for ( var i in obj1){ console.log(i) } //5. with(对象) 语法可以直接获取对象成员的值 with (obj1){ console.log(name); console.log(sex); console.log(age); res = func(); console.log(res); } console.log( "<===================================>" ) //将4和5结合,遍历对象中的数据; for ( var i in obj1){ //console.log(i , typeof(i)) // name age sex func ... string with (obj1){ console.log(eval(i)) } } </script> </body> </html> |
1.2 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
25
26
27
28
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>json对象</title> </head> <body> <script> var data = { 'name' : "文东" , age:20, "sleep" : function (){ alert( "文东一天睡23小时,还有一个小时上厕所." ); } } // js对象 => json格式的字符串 var res = JSON.stringify(data); console.log(res , typeof (res)); // {"name":"文东","age":20} // json格式的字符串 => js对象 res = '{"name":"东东","age":30}' ; // success // res = "{'name':90,'age':40}"; error 引号必须是双引号 var res2 = JSON.parse(res); console.log(res2, typeof (res2)); </script> </body> </html> |
2. js字符串函数
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>字符串对象的相关方法</title> </head> <body> <script> var string = "to be or not to be" ; //获取字符串长度 length var res = string.length var res = string[-1] console.log(res) //1.清除两侧的空白 trim [ python的strip ] var res = string.trim() console.log(string) console.log(res) //2.获取首次出现的位置 indexOf [ python的find ] /*找不到返回-1*/ var string = "to be or not to be" ; var res = string.indexOf( "z" ) console.log(res) //3/最后一次出现的位置 lastIndexOf /*找不到返回-1*/ var res = string.lastIndexOf( "zzz" ) console.log(res); //4.连接字符串 concat [ python的 os.path.join + ] var res = string.concat( "d:\\" , "python32\\" , "day42" ); console.log(res); //5.截取字符串 slice /* string.slice(开始值,结束值) 字符串的切片 留头舍尾 [支持逆向下标]*/ var string = "11122233e or not to be" ; var res = string.slice(1,7); var res = string.slice(-5,-1); // to b // var res = string.slice(-5,-10); //截取不到返回空 console.log(res, "<==1==>" ) //6.截取字符串 substr /* string.substr(开始值,截取几个) */ var string = "11122233e or not to be" ; var res = string.substr(3,4) console.log(res, "<==2==>" ) //7.拆分字符串 split [ python的 split ] var string = "11122233e or not to be" ; var res = string.split( " " ) console.log(res, "<==3==>" ) //8.大小写 toUpperCase toLowerCase var string = "11122233e Or noT tO be" ; res = string.toUpperCase(); res = string.toLowerCase(); console.log(res, "<==4==>" ) //9.search 匹配第一次找到的索引位置,找不到返回-1 var string = "aaabbb oldaoy ccc" var res = string.search(/oldboy/) console.log(res, "<==5==>" ) //10.match 返回匹配的数据 /* /正则表达式/修饰符 g:全局匹配 i:不区分大小写 m:多行匹配 */ var string = "我的电话是 : 13838384388 你的电话是: 13854381438" var res = string.match(/\d{11}/); // 匹配一个 var res = string.match(/\d{11}/g); // 匹配多个,(需要修饰符加上g) console.log(res) console.log(res[0]) console.log(res[1]) //11.字符串替换 replace /* replace默认只替换一次 */ var string = "to be or not to be" ; var res = string.replace( "to" , "two" ) console.log(res, "<==6==>" ) // 方法一: function myreplace(string,a,b){ /* 找最后一个to,如果找不到返回-1 如果能找到就不停的进行替换,直到-1为止,循环终止; */ while (string.lastIndexOf(a) != -1){ console.log(1) string = string.replace(a,b); } return string; } var string = "to be or not to be" ; var res = myreplace(string, "to" , "two" ) console.log(res) // two be or not two be // 方法二 var string = "to be or not to be" ; var res = string.replace(/to/g, "two" ); console.log(res) </script> </body> </html> |
3. js数组相关方法
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>数组对象的相关方法</title> </head> <body> <script> // 1.定义一个数组 var arr = Array(); var arr = Array(10,11,12); var arr = [15,16,17] console.log(arr , typeof (arr)) // ### 1.增 var arr = []; arr[0] = 10; arr[1] = 11; arr[2] = 12; // js特征:允许在一个临时的索引值上插入数据; ok arr[10] = 50; console.log(arr) console.log(arr[5]) // (1)push 从数组的最后插入元素 相当于python的append var arr = []; var res = arr.push(111); var res = arr.push(222); var res = arr.push(333); console.log(res,arr) // (2)unshift 从数组的前面插入元素 相当于python的insert var arr = [100,101]; var res = arr.unshift(1); var res = arr.unshift(333); console.log(res , arr); // (3)concat 迭代追加数据 相当于python的extend var arr1 = [1,2,3] var arr2 = [ "你好" , "我好" , "她也好" ] var res = arr1.concat(arr2) console.log(res, typeof (res)); // ###2删 // (1) delete 删除 /* 把值删掉了,原位置用空来取代,返回undifined */ var arr = [1, 2, 3, "你好" , "我好" , "她也好" ]; delete arr[1]; console.log(arr); console.log(arr[1]) // (2)pop 从后面删除; var arr = [1, 2, 3, "你好" , "我好" , "她也好" ]; var res = arr.pop(); console.log(res ,arr); // (3)shift 从前面删除 var arr = [1, 2, 3, "你好" , "我好" , "她也好" ]; var res = arr.shift() console.log(res , arr) // ### 特别splice 从指定位置往后进行删除或者添加 /* arr.splice(从第几个位置开始,删除几个,[可选的是添加的元素]) */ var arr = [1, 2, 3, "你好" , "我好" , "她也好" ]; // 从第二个2位置开始,删除2个 var res = arr.splice(2,2) console.log(res , arr) // 从第二个2位置开始,删除0个,添加,"hello","world" var arr = [1, 2, 3, "你好" , "我好" , "她也好" ]; var res = arr.splice(2,0, "hello" , "world" ) console.log(res , arr) // ###3改查 var arr = [1, 2, 3, "你好" , "我好" , "她也好" ]; //修改元素 arr[3] = "你不好" ; //获取元素 console.log(arr[3]); console.log(arr); // ###4 其他方法 // 拼接字符串 join /* split 和 join 是一对;*/ var arr = [ "you" , "can" , "you" , "up" ]; var res = arr.join( "#" ) console.log(res) // 数组元素反转 reverse var arr = [100,200,3,150]; var res = arr.reverse(); console.log(res); // 截取数组的一部分 slice /* arr.slice(开始值,结束值) 数组的切片 留头舍尾 [支持逆向下标]*/ var arr = [ "宋健" , "何旭彤" , "刘利伟" , "高雪峰" , "戈隆" , "王致和" , "马生平" ] var res = arr.slice(2) // var res = arr.slice(2,4) var res = arr.slice(-3,-1) console.log(res); // 排序 默认升序 sort var arr = [1,2,3,4,9,22,21]; var arr = [ "1" , "2" , "3" , "4" , "9" , "22" , "21" ]; var res = arr.sort() console.log(res) var arr = [100,1,2,3,4,9,22,21]; // sorted 里面的参数是一个函数,通过函数进行升序或者降序排序; /* return 1代表交换位置,如果return -1 代表不交换位置 */ var res = arr.sort( function (a,b){ if (a>b){ return -1; } else { return 1; } }); console.log(res) </script> <!-- python : 冒泡排序 nums = [1,22,3,2,4,9,21]; def bubble_sort(nums): for i in range(len(nums) - 1): # 这个循环负责设置冒泡排序进行的次数 for j in range(len(nums) - i - 1): # j为列表下标 if nums[j] > nums[j + 1]: nums[j], nums[j + 1] = nums[j + 1], nums[j] break ; return nums res = bubble_sort(nums) print(res) --> </body> </html> |
4. js数学对象相关方法
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
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>数学对象中的相关方法</title> </head> <body> <script> //四舍五入round var res = Math.round(3.5) var res = Math.round(2.5) var res = Math.round(2.31) console.log(res) //最大值 max var res = Math.max(1,2,3,4,34343); //最小值 min var res = Math.min(1,2,3,4,34343); //绝对值 abs var res = Math.abs(-90); console.log(res) //向下取整 floor 地板 var res = Math.floor(3.001) //向上取整 ceil 天花板 var res = Math.ceil(3.990) //幂运算 pow var res = Math.pow(2,3) //开方运算 sqrt var res = Math.sqrt(9) console.log(res) // ### 随机值推导公式 //获取从0到1随机值 0<x<1 var res = Math.random() console.log(res) //获取1~10的随机值 1 <= x <= 10 var res = Math.ceil(Math.random() * 10 ) console.log(res) // 1.获取从 m 到 n 的随机值 5,14 m=5 , n=14 // 1 <= x <= 10 => 1+4 <= x <= 10+4 < 5 <= x <= 14 var res = Math.ceil(Math.random() * 10 ) + 4 // m = 5 , n = 14 // 2.拆解数字,把对应的m和n进行替换; var res = Math.ceil(Math.random() * (14-5+1) ) + (5 - 1) // 3.推出最后结果 var res = Math.ceil(Math.random() * (n-m+1) ) + (m - 1) // 4.封装函数:终极版:随机值; function randrange(m,n){ return Math.ceil(Math.random() * (n-m+1) ) + (m - 1); } </script> </body> </html> |
5. BOM对象
5.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html><html lang= "en" ><head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>BOM对象 </title></head><body> <script> /*### BOMjs BOM对象 : 针对于浏览器的控制 browser object model js 中最大的对象 window 整个浏览器窗口出现的所有内容行为都是window对象中的成员; */ console.log(window) // 1.弹出警告框 // window.alert('你好') // 2.确认弹窗 // var res = window.confirm("确认弹窗") // console.log(res); // true / false // 3.等待输入弹窗 // var res = window.prompt("请输入您的银行密码:") // console.log(res); // 4.关闭浏览器窗口 // window.close(); // innerHeight innerWidth 获取浏览器窗口内部的宽和高 console.log(`浏览器窗口内部的宽度${window.innerWidth}`) console.log(`浏览器窗口内部的高度${window.innerHeight}`) // window.open("http://www.baidu.com","_self"); // 在当前页面跳转 // window.open("http://www.baidu.com","_blank","width=500,height=500"); // 在新窗口页面跳转 // ###定时器 /* # 定时器种类(两种):基于单线程的异步并发程序; window.setInterval(函数名,间隔时间(毫秒)) // 定时执行多次任务 window.setTimeout(函数名,间隔时间(毫秒)) // 定时执行一次任务 window.clearInterval(id号) // 清除定时器 setInterval window.clearTimeout(id号) // 清除定时器 setTimeout */ var num = 1 function func(){ console.log(`我执行了${num}`); num++; } var id1 = window.setInterval(func,1000); var id2 = window.setTimeout(func,2000); console.log(id1,"id1") console.log(id2,"id2") console.log("我执行完了....") window.clearInterval(id1) </script> </body></html><!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>BOM对象 </title> </head> <body> <script> /* ### BOM js BOM对象 : 针对于浏览器的控制 browser object model js 中最大的对象 window 整个浏览器窗口出现的所有内容行为都是window对象中的成员; */ console.log(window) // 1.弹出警告框 // window.alert('你好') // 2.确认弹窗 // var res = window.confirm("确认弹窗") // console.log(res); // true / false // 3.等待输入弹窗 // var res = window.prompt("请输入您的银行密码:") // console.log(res); // 4.关闭浏览器窗口 // window.close(); // innerHeight innerWidth 获取浏览器窗口内部的宽和高 console.log(`浏览器窗口内部的宽度${window.innerWidth}`) console.log(`浏览器窗口内部的高度${window.innerHeight}`) // window.open("http://www.baidu.com","_self"); // 在当前页面跳转 // window.open("http://www.baidu.com","_blank","width=500,height=500"); // 在新窗口页面跳转 // ###定时器 /* # 定时器种类(两种):基于单线程的异步并发程序; window.setInterval(函数名,间隔时间(毫秒)) // 定时执行多次任务 window.setTimeout(函数名,间隔时间(毫秒)) // 定时执行一次任务 window.clearInterval(id号) // 清除定时器 setInterval window.clearTimeout(id号) // 清除定时器 setTimeout */ var num = 1 function func(){ console.log(`我执行了${num}`); num++; } var id1 = window.setInterval(func,1000); var id2 = window.setTimeout(func,2000); console.log(id1, "id1" ) console.log(id2, "id2" ) console.log( "我执行完了...." ) window.clearInterval(id1) </script> </body> </html> |
5.2 获取年月日时分秒
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
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>获取年月日时分秒</title> <style> #clock { width:500px; height:50px; border:solid 1px red; border-radius: 25px; text-align: center; line-height: 50px; background-color: chartreuse; color:red; } </style> </head> <body> <div id= "clock" > </div> <script> var obj = document.getElementById( "clock" ); console.log(obj) function func(){ var d = new Date(); console.log(d); // 获取年份 var year = d.getFullYear() // 获取月份 月份范围 0 ~ 11 0代表1月份 var month = d.getMonth() // 获取日期 var date = d.getDate() // 获取小时 var hour = d.getHours() // 获取分钟 var minutes = d.getMinutes() // 获取秒数 var seconds = d.getSeconds() strvar= `现在的时间是: ${year}年-${month+1}月-${date}日 ${hour}:${minutes}:${seconds}`; console.log(strvar); obj.innerHTML = strvar console.log(minutes, typeof (minutes)); // 清除定时器的效果 if (minutes == 8){ clearInterval(id); } } var id = window.setInterval(func,1000) </script> </body> </html> |
5.3 Navigator
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>BOM模型中 Navigator 对象 </title> </head> <body> <script> console.log(navigator); console.log(navigator.platform) // 判断是pc端还是移动端 console.log(navigator.userAgent) // 在爬虫程序中,可以伪造成浏览器进行数据爬取,绕开服务端的反爬机制; </script> </body> </html> |
5.4 历史对象
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
|
<!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> <button onclick= "func1()" >查看历史对象</button> <button onclick= "func2()" >跳转到上一页</button> <button onclick= "func3()" >跳转到下一页</button> <button onclick= "func4()" >当前页面刷新</button> <script> function func1(){ console.log(history); } function func2(){ history.go(-1); } function func3(){ // history.go(1); history.go(2); } function func4(){ history.go(0); } </script> </body> </html> |
6. BOM对象location
location作用: 负责刷新页面,跳转页面用的,可以获取地址栏上面的参数
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
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>BOM对象 location</title> </head> <body> <button onclick= "func1()" >查看location对象</button> <button onclick= "func2()" >跳转其他页面</button> <button onclick= "func3()" >刷新页面</button> <button onclick= "func4()" >过一秒在刷新页面</button> <script> function func1(){ /* 链接地址: http://ip + 端口号 + 路径 + 参数 + 锚点 */ console.log(location); console.log(`协议:${location.protocol}`); console.log(`ip端口号:${location.host}`); console.log(`端口号:${location.port}`); console.log(`路径:${location.pathname}`); console.log(`获取锚点:${location.hash}`); console.log(`获取地址栏参数:${location.search}`); console.log(`完全地址:${location.href}`) } //跳转页面 function func2(){ // location.href = "http://www.baidu.com";方法一 location.assign( "http://www.jd.com" ); } //刷新页面 function func3(){ location.reload(); } // 过一秒在刷新页面 function func4(){ setTimeout(func3,1000); console.log( "我执行了..." ) } // 每过一秒刷新一下页面 /* 等待所有页面图片文字全部加载完毕之后,再去执行对应的代码 */ window.onload = function (){ func4() } </script> </body> </html> |
7. 小提示
1
2
3
4
5
6
|
js三大对象 1. 本地对象:js语法 2. bom对象:浏览器相关的成员(针对于浏览器的控制)brower object model 3. dom文档对象:关于html文件节点相关的数据、相关的值(针对于html的控制) document object model js是单线程的异步程序 定时器是单线程的异步程序(例子) |
ceshi.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
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<!doctype html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Document</ title > < style > *{margin:0; padding:0; list-style:none;} .wrap{height:170px; width:490px; margin:60px auto; overflow: hidden; position: relative; margin:100px auto;} .wrap ul{position:absolute;} .wrap ul li{height:170px;} .wrap ol{position:absolute; right:5px; bottom:10px;} .wrap ol li{height:20px; width: 20px; background:#ccc; border:solid 1px #666; margin-left:5px; color:#000; float:left; line-height:center; text-align:center; cursor:pointer;} .wrap ol .on{background:#E97305; color:#fff;} </ style > < script type = "text/javascript" > window.onload=function(){ var wrap=document.getElementById('wrap'), pic=document.getElementById('pic').getElementsByTagName("li"), list=document.getElementById('list').getElementsByTagName('li'), index=0, timer=null; // 定义并调用自动播放函数 timer = setInterval(autoPlay, 2000); // 鼠标划过整个容器时停止自动播放 wrap.onmouseover = function () { clearInterval(timer); } // 鼠标离开整个容器时继续播放至下一张 wrap.onmouseout = function () { timer = setInterval(autoPlay, 2000); } // 遍历所有数字导航实现划过切换至对应的图片 for (var i = 0; i < list.length ; i++) { list[i] .onmouseover = function () { clearInterval(timer); index = this .innerText - 1; changePic(index); }; }; function autoPlay () { if (++index >= pic.length) index = 0; changePic(index); } // 定义图片切换函数 function changePic (curIndex) { for (var i = 0; i < pic.length ; ++i) { pic[i] .style.display = "none" ; list[i] .className = "" ; } pic[curIndex] .style.display = "block" ; list[curIndex] .className = "on" ; } }; </script> </ head > < body > < div class = "wrap" id = 'wrap' > < ul id = "pic" > < li >< img src = "../image/img1.png" alt = "" ></ li > < li >< img src = "../image/img2.png" alt = "" ></ li > < li >< img src = "../image/img3.png" alt = "" ></ li > </ ul > < ol id = "list" > < li class = "on" >1</ li > < li >2</ li > < li >3</ li > < li >4</ li > < li >5</ li > </ ol > </ div > </ body > </ html > |
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注服务器之家的更多内容!
原文链接:https://blog.csdn.net/weixin_46818279/article/details/122421625