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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* 控制浏览器弹出一个警告框 alert("这是我的第一行js代码"); */ /*向body内容中输出一个内容 document.write();*/ /*向控制台输出内容 console.log("控制") */ console.log("控asdadsasdasd制"); </script> </head> <body> </body> </html>
js语句位置
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1可以将js代码编写到外部js文件中 然后 通过script引入 2写到外部文件可以在不同的文件引入 3一旦引入外部文件 就不能编写代码 写也没用 4可以在创建一个script编写 --> <script type="text/javascript" src="js/js.js"> </script> </head> <body> </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
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--STring 字符串 Number 数值 Boolean 布尔值 Null 控制 Undefined 未定义 Onject 对象 前五个疏忽引用类型 Object是引用类型 --> <!--String字符串 -js中字符串需要引号引起来 -使用单引号双引号都可以 但不要混用 -双引号不能嵌套双引号 --> <!--1Number 包括所有整数和小数 2Number.MAX_VALUE 表示最大的数 3字符串和整数输出结果一样使用typeof 关键字 返回数据类型小写 4如果使用的值超过最大值 就返回 Infinity 表示正无穷 5如果使用的值超过最小值 就返回 -Infinity 表示负无穷 6使用 typeof 检查Infinity 会返回number 7NaN表示 Not A Number 8使用typeof检查NaN也会返回一个number 9如果进行浮点运算 结果不精确 --> <!--Boolean 布尔值 treu false --> <!--1内建对象Math Function 2宿主对象 BOM DOM 3自定义对象 --> <!-- var obj = new Object(); --> <!--删除属性 delete 对象.属性--> <!--如果属性名是特殊字符 就不能用点了 对象名["属性名"]--> <!--检查对象中是否有某一个属性 console.log("agse" in obj); --> <!--基本类型和引用类型的区别 如果俩个变量保存的同一个引用 一个改变另一个也会改变--> <!--对象字面量：在创建对象的时候指定属性值 var obj={属性名1:属性值,属性名2:属性值,属性名3:属性值,也能写对象} --> <!-- 函数 也是一个对象封装代码 调用 Function 方式1：var a = new Function("要执行的代码"); 调用：函数对象名(); --> <!--方式2: function fun(参数列表){ 方法体 } --> <!--方式3: var fun = function(参数列表){ 方法体 }; 这相当于赋值语句 加分号 --> <!--参数 function fun(a,b){ console.log(a+b); } fun(1,2); 解释器不会检查实参类型 解释器也不会检查实参数量 多余的参数不会传进去 少的实参 魂被定义为undefined --> <!-- return 返回值 如果屁股后面不跟任何值 默认undefined--> <!--函数作为对象的属性就变成了方法 var obj = new Object; obj.fun1=function(a,b){ return a+b; }; console.log(obj.fun1(1,2)); --> <script> var obj = new Object; obj.fun1=function(a,b){ return a+b; }; console.log(obj.fun1(1,2)); </script> </head> <body> </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> <!-- 作用域 ： -全局作用域和局部作用域 全局作用域： 直接写在script中的代码都是全局变量 在打开页面时创建 关闭页面时结束 在全局作用域中有一个全局对象window 它代表浏览器的一个窗口由浏览器创建 在全局作用域中： 创建的变量都会作为window对象的属性保存 创建的方法都作为window的函数使用 不写 var a 相当于window.a 声明在引用的下面 属性： 我们使用var关键字声明的所有变量 会在所有代码执行之前被声明， 会在执行到那个语句的时候赋值 但是如果没写var 会报错 声明在引用的下面 方法： function声明的函数会在所有的代码执行之前被创建 所以可以再声明之前调用 var声明的和属性一样 虽然被提前声明 但是赋值不会提前 不能提前调用 局部作用域： 调用的时候创建函数作用域 函数执行完毕以后 被销毁 每调用一次 产生一个作用域 之间是独立的 在函数中变量不写 var 就会成为全局变量 --> <script> var a=10; var a=20; console.log(a) </script> <head> <meta charset="UTF-8"> <title></title> </head> <body> </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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /* 每次调用构造方法的时候 * */ /*我们创建的每一个函数 解析器都会向函数中添加一个 属性prototype 这个属性对应一个对象，这个对象就是原型对象 如果函数作为普通函数调用没有任何作用 一般用来在构造方法中放 所有对象 共有的东西 可以通过d对象名.__proto__来访问该属性 当我们访问对象的方法和属性时 他会先在对象 中寻找，如果没有就去原型对象中寻找,在没有就去原型的原型里找 function Person(){ } var p1 = new Person(); var p2 = new Person(); console.log(p1.__proto__==p2.__proto__);//"true" */ window.a </script> </head> <body> </body> </html>
toString方法
复制代码
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> /* * 当输出对象的时候打印 "[object Object]"其实时调用了toString方法 * 这个方法在对象的原型的原型里 * 重写原型 即可 */ function Person(name,age){ this.name=name; this.age=age; } var p1 = new Person("张三",15); var p2 = new Person("张三",15); /*p1.__proto__.toString = function(){ return "aaaa"; }*/ p1.toString=function(){ return "ccc" } console.log(p1.toString()); console.log(p2); </script> <body> </body> </html>
垃圾回收
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body><!--当对象没有引用时js会自动回收，我们不需要也不能进行垃圾回收操作 我们要做的就是把不用的对象设置为null --> </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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /*var arr = new Array(); arr[0]=1; arr[1]=1; arr[arr.length]=8 //向末尾添加一个数 //leghth还能设置长度 //如果修改的长度小于元素数量 多余的元素会被删除 console.log(arr);//"1,1" leghth还能设置长度 js的数组什么都能放 跟java的集合一样 * 常用方法 * push()向末尾添加一个元素或多个元素 返回值为数组新的长度 * pop() 删除并返回最后一个元素 * unshift 向前添加元素 其他的会靠后 并返回新的数组长度 * shift 删除第一个元素 其他的会靠前 并返回被删除的元素 * slice(start ,end) 从数组提取指定元素，如果传负数 就是从后往前算 * splice(start,end,XXX)删除元素 并插入新元素到start之前并返回被删除的元素 之后的元素向前移动 * concat(X,X,X...)连接多个数组 也可以是元素 不会改变原数组 * join()将数组转成字符串 参数可以填连接符 * reverse()反转数组 * sort() 对数组排序 影响原数组 * */ arr = [5,35,3,34,534,] arr.sort(function(a,b){ return b-a; }); console.log(arr); </script> </head> <body> </body> </html>
arguments
复制代码
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> <head> <meta charset="UTF-8"> <title></title> <!--再调用函数时 传递的实参都会保存到 arguments 通过索引可以拿到具体的参数值 通过length可以获取长度 --> <script type="text/javascript"> function fun(a,b){ console.log(a+b) console.log(arguments[0]);//aa } fun("aa",2); </script> </head> <body> </body> </html>
Date对象
复制代码
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> <head> <meta charset="UTF-8"> <title></title> </head><!-- --> <body> <script type="text/javascript"> /*var a = new Date(); console.log(a) console.log(a.getFullYear());//"2020" console.log(a.getDay());//"1" 第几周 console.log(a.getMonth());//2 0代表1月 以此类推。。 console.log(a.getTime());//"1583160582545" 时间*/ var a = new Date("1/1/1970 8:0:1"); console.log(a.getTime()); </script> </body> </html>
Math对象
复制代码
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- --> <script type="text/javascript"> //console.log(Math);//"[object Math]" //console.log(Date);//"function Date() { [native code] }" //Math是一个定义好的对象 不用new 可以直接用 /*生成0-10之间的随机数 * Math。random()可以生成0-1之间的小数 * Math.round()四舍五入 * console.log(Math.round(Math.random()*9)+1);//1-10的随机数 * Math.max(X,x,X) 返回最大值 * Math.min(X,x,X) 返回最小值 */ //console.log(Math.abs(-10)); function Person(){ this.name=123; this.a =function(){ console.log(Math.abs(-10)); } }; var p1 = new Person(); var p2 = new Person(); p1.a(); </script> </head> <body> </body> </html>
String对象
复制代码
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> <head> <meta charset="UTF-8"> <title></title><!-- charAt() 返回指定索引的字符 --> <script type="text/javascript"> var str = "aasd sad"; //console.log(str.length);//"8" //console.log(str.charAt(2));//s //console.log(str.charCodeAt(0));//97 //console.log(str.concat("111"));//拼接字符串 元字符串不变 //console.log(str.indexOf("sad")); 返回指定字符串第一次出现的索引 //console.log(str.slice(0,2)); //截取字符串 不改变原字符串 console.log(str.substr(" ")[0]); </script> </head> <body> </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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /*语法 var 变量 = new RegExp("正则表达式","匹配模式") test()这个方法检测字符串是否符合规则 返回boolean 第二个参数 可以是 i:忽略大小写 g:全局匹配模式 * */ /*var a = new RegExp("a","i"); console.log(a.test("SdA"))*/ /*var s="/a/i"; console.log(s.test("SdA"));*/ /*|:代表或 [] 中括号里的内容也代表或 [a-z]：a-z小写范围 [A-Z]：a-z大写范围 [A-z]：所有字母范围 [^ab]除了a和b ^a 不带[] 表示以a开头 a$ 表示以a结尾 ^a$ 表示 只能有一个字符且是a * * * //不需要指定全局 删除符合规则的 * var a ="ababa bab"; var result = a.split(可以传递正则表达式)[0]; * * * 查找符合规则的索引的字符串 * var a ="acb 2a3 ba ba12b"; var result = a.search(/2[A-z]3/);"4" * * 匹配所有符合规则的字符串 放到数组 * var a ="acb 2a3 ba ba12b"; var result = a.match(/[A-z]/g); "a,c,b,a,b,a,b,a,b" * * * 替换所有符合规则的 需要只当全局 * * var a ="acb 2a3 ba ba12b"; var result = a.replace(/[A-z]/g,"1"); "111 213 11 11121" 量词 a{3} a正好出现3次 (ab){3} ab出现3次 (ab){1,3}ab出现1次到3次 (ab){3,}ab出现3次以上 + 表示至少一个 相当于{1,} * 表示0个或多个 相当于{0,} * ？表示0个或一个相当于{0,1} 电子邮件正则表达式 * * */ var a ="1a429@qq.com"; var reg = /^([A-z]|[0-9]){3,8}@[A-z]{2,5}.[A-z]{1,5}$/; var result = reg.test(a); console.log(result); </script> </head> <body> </body> </html>
DOM
复制代码
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> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">我是按钮</button> <script type="text/javascript"> /*DOM 文档对象模型 文档：整个HTML页面 对象：网页中的每个部分都变成对象 模型：表示对象之间的关系 */ /*浏览器为我们提供了文档节点，对象是window属性 */ var bt = document.getElementById("btn"); bt.innerHTML="嗯"//改变了html的内容 console.log(); </script> </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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id ="a">按钮</button> </body> <script type="text/javascript"> /*点击按钮 移动鼠标 关闭窗口 都是事件*/ //获取按钮对象 var bt = document.getElementById("a"); //给按钮绑定单击事件 bt.onclick=function(){ alert("讨厌~"); } </script> </html>
文档的加载
复制代码
1
2
DOM查询
复制代码
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- innerHTML用于获取元素内部html代码 自闭和标签没有html代码 我们可以直接.name/value/type读取其他内容 docoment.getElementById(id) 通过id属性获取一个元素节点对象 docoment.getElementsByTagName(标签名) 通过标签获取一组元素节点对象 docoment.getElementsByName(标签名) 通过name值获得一组对象 --> <!--上面通过window的方法document获取了元素节点 该元素节点是整个页面的 当一个标签有子类的时候 我们想单独拿到子类的某个标签 就需要使用以获得的元素节点的：下面这些方法元素几点同样有 docoment.getElementById(id) 通过id属性获取一个元素节点对象 docoment.getElementsByTagName(标签名) 通过标签获取一组元素节点对象 docoment.getElementsByName(标签名) 通过name值获得一组对象 --> </head> <body> </body> </html>
DOM案例
复制代码
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var bt = document.getElementById("checkAllBut") bt.onclick=function(){ var arr = document.getElementsByName("item") for(var i=0;i<arr.length;i++){ arr[i].checked=true; } } var bt1 = document.getElementById("checkNoBut") bt1.onclick=function(){ var arr = document.getElementsByName("item") for(var i=0;i<arr.length;i++){ arr[i].checked=false; } } var bt2 = document.getElementById("checkRevBut") bt2.onclick=function(){ var arr = document.getElementsByName("item") for(var i=0;i<arr.length;i++){ arr[i].checked=!arr[i].checked ; } } var bt3 = document.getElementById("submita") bt3.onclick=function(){ var arr = document.getElementsByName("item") for(var i=0;i<arr.length;i++){ if(arr[i].checked){ alert(arr[i].value); } } } }; </script> </head> <body> <form action=""> <input type="checkbox" name="item" value="足球" />足球 <input type="checkbox" name="item" value="篮球" />篮球 <input type="checkbox" name="item" value="橄榄球" />橄榄球 <input type="checkbox" name="item" value="乒乓球" />乒乓球 <input type="button" id="checkAllBut" value="全选" /> <input type="button" id="checkNoBut" value="全不选" /> <input type="button" id="checkRevBut" value="反选" /> <input type="submit" id="submita" value="提交" /> </form> </body> </html>
DOM增删改
复制代码
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var bt = document.getElementById("bt0"); bt.onclick=function(){ // 创建节点<li></li>元素 var li = document.createElement("li") //创建文本内容 var text = document.createTextNode("南京") //将内容放到li标签 li.appendChild(text); //将<li>南京</li>放到ul var city = document.getElementById("city"); city.appendChild(li); } var bt1 = document.getElementById("bt1"); bt1.onclick=function(){ // 创建节点<li></li>元素 var li = document.createElement("li") //创建文本内容 var text = document.createTextNode("南京") //将内容放到li标签 li.appendChild(text); //将<li>南京</li>放到ul var city = document.getElementById("city"); var sj =document.getElementById("sj"); city.insertBefore(li,sj); } var bt2 = document.getElementById("bt2"); bt2.onclick=function(){ // 创建节点<li></li>元素 var li = document.createElement("li") //创建文本内容 var text = document.createTextNode("广西") //将内容放到li标签 li.appendChild(text); //将<li>南京</li>放到ul var city = document.getElementById("city"); var sh =document.getElementById("sh"); //新节点替换旧节点 city.replaceChild(li,sh); } var bt3 = document.getElementById("bt3"); bt3.onclick=function(){ var sh = document.getElementById("sh"); //如果点确认执行代码 if(confirm("确认删除"+sh.innerHTML +"吗？")){ //或者 这种更常用 不用获取父节点了 sh.parentNode.removeChild(sh) } /*var city = document.getElementById("city"); var sh = document.getElementById("sh"); city.removeChild(sh);*/ } } </script> </head> <body> </body> <div id="total"> <ul id = "city"> <li id ="sj">深圳</li> <li>北京</li> <li id ="sh">上海</li> <li>青岛</li> </ul> </div> <div id=bt> <button id = "bt0"> 添加南京</button> <button id = "bt1"> 添加南京到第一个</button> <button id = "bt2"> 用广西替换上海</button> <button id = "bt3"> 删除上海</button> </div> </html>
DOM操作样式
复制代码
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 100px; background-color: black; } </style> <script> window.onload=function(){ var c = document.getElementById("box1"); var bt =document.getElementById("bt"); bt.onclick=function(){ //js修改css的语法 //元素对象.style.样式=样式值 //注意css样式如果含有-号 不合法 比如background-color //需要将这种样式编程驼峰命名 //我们通过js设置的属性都是内联样式 内联样式优先级高与样式表 //如果要读取css样式 默认读取的是内联样式 要想读到样式表里的 //以下这俩种只读 不能修改 //获取当前生效的样式值 语法：元素.currentStyle.样式名 只有ie支持 //其他浏览器 window.getComputedStyle(css对象) 返回css对象 //css对象.样式 获取生效的样式值 ie8或以下不支持 /*alert(getComputedStyle(c,null).backgroundColor); alert(getComputedStyle(c,null).width);*/ //alert(c.currentStyle.backgroundColor); //上面的问题是读取样式 的俩个方式 都不能完全兼容所有浏览器怎么办？ //定义一个方法 传入css对象和样式名 //如果有这个对象说不不是ie8以下的浏览器 var getStyle =function(obj,style){ if(window.getComputedStyle){//必须加window 加了就是对象的变量 没加就是变量 如果找变量没找到会报错 对象的属性没找到就是undefined return getComputedStyle(obj)[style]; }//否则就是ie8或以下的浏览器 else{ return obj.currentStyle.style; } } alert(getStyle(c, "backgroundColor")); } } </script> </head> <body> <button id ="bt">变成红色</button> <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
43
44
45
46
47
48
49
50
51
52
53<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 50px; height: 50px; border: 1px solid red ; margin-bottom: 10px; } #box1{ width: 50px; height: 50px; border: 1px solid black ; } </style> <script> window.onload=function(){ var div1 = document.getElementById("box"); var div2 = document.getElementById("box1"); /*onmousemove * -该事件将会在鼠标移动在元素中被触发 * *事件对象： * -当事件被触发后 浏览器每次都会将一个事件对象作为实参传递给响应函数 *在该对象中封装了事件的一切信息 比如 鼠标坐标 键盘按下等等 * * * 在ie8以下的浏览器中 事件对象是作为window对象的属性保存的 * 用的时候用window调用即可 但是不兼容火狐浏览器 再做判断是否有event * * event=event||window.event; */ div1.onmousemove=function(event){ var x = event.clientX; var y = event.clientY; div2.innerHTML="x="+x+","+"y="+y } } </script> </head> <body> <div id="box"></div> <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
43
44
45
46<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ //之前的连接绑定了事件那么新创建的连接如何绑定连接 //绑定给父元素 利用事件的冒泡 这就叫事件的委派 //但是这就引发了另一个问题 这个父元素下的所有元素都会触发这个事件 怎么办？ //事件的target保存了用户具体点击了那个元素 var ul = document.getElementById("ul"); ul.onclick=function(event){ event=event||window.event; if(event.target.className=="link"){ alert(event.target); } } //之前的连接绑定了事件那么新创建的连接如何绑定连接 var bt = document.getElementById("bt"); bt.onclick=function(){ var ul = document.getElementById("ul"); var li = document.createElement("li"); li.innerHTML="<a href='#'>超链接4</a>"; ul.appendChild(li); } } </script> </head> <body> <button id ="bt">添加超链接</button> <ul id= "ul" style="background-color: red;"> <li><a href="javascript:;" class="link">超链接1</a></li> <li><a href="javascript:;" class="link">超链接2</a></li> <li><a href="javascript:;" class="link">超链接3</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
45
46
47<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--使用对象.事件 =函数的形式为一个按钮绑定2个事件 后面的会覆盖前面的 要同时触发多个事件怎么办 ie8以下不支持 addEventListener() -事件的字符串 click 不要写onclick -回调函数 -是否在捕获阶段触发事件 需要一个布尔值 一般是false this是绑定的对象 按照绑定顺序依次执行 ie8一下支持的: attachEvent() -事件的字符串 onclick -回调函数 按照绑定顺序逆序执行 this是window --> <script> window.onload=function(){ var bt =document.getElementById("bt") bind(bt,"click",function(){ alert("1"); }) } function bind(obj,event,callBack){ if(obj.addEventListener()){ obj.addEventListener(event,callBack,false); }else{ obj.attachEvent("on"+event,callBack); } } </script> </head> <body> <button id ="bt">按钮</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
50
51
52
53
54<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div{ width: 100px; height: 100px; background-color: red; position: absolute; } </style> <script> /*鼠标按下 onmousedown * 鼠标移动onmousemove * 鼠标松开onmouseup */ window.onload=function(){ //求出偏移量 var div = document.getElementById("div"); div.onmousedown=function(event){ //求出偏移量 var ol = event.clientX-div.offsetLeft; var ot = event.clientY-div.offsetTop; document.onmousemove=function(event){ event=event||window.event; div.style.left=event.clientX-ol+"px"; div.style.top=event.clientY-ot+"px"; } document.onmouseup=function(){ //鼠标松开 这俩个事件就没用了 document.onmousemove=null; document.onmouseup=null; } //文字无法拖拽 return false; } } </script> </head> <body> asdas <div id="div"></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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ /*当onkeydown连续触发时 第一次和第二次间隔时间长 后面很快*/ document.onkeydown=function(){ console.log("按下") } document.onkeyup=function(){ console.log("松开"); } //通过keycode获取按键 document.onkeydown=function(event){ console.log(event.keyCode) } } </script> </head> <body> </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> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div{ width: 100px; height: 100px; background-color: red; position: absolute; } </style> <script> window.onload=function(){ var div = document.getElementById("div"); document.onkeydown=function(event){ switch(event.keyCode){ case 37: div.style.left=div.offsetLeft-100+"px"; break; case 38: div.style.top=div.offsetTop-100+"px"; break; case 39: div.style.left=div.offsetLeft+100+"px"; break; case 40: div.style.top=div.offsetTop+100+"px"; break; } } } </script> </head> <body> <div id="div"></div> </body> </html>
BOM
复制代码
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /*BOM对象 -window -代表浏览器窗口 Navigator -代表浏览器的信息 该对象可以识别不同浏览器 由于历史原因他的属性大多数已经不能帮我们识别浏览器了 一般用userAgent判断浏览器信息 Edge：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362 charme： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36 IE11: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko IE8:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729) 判断是不是IE结局方案 if("ActiveXObject in window") 如果是true 就是IE -Location -代表浏览器的地址栏信息 -History -代表浏览器的历史纪录 只能访问当次的上次下次*/ if("ActiveXObject" in window){ alert("你是IE"); }else { alert("你不是IE") } </script> </head> <body> </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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--需求:页面上显示1，2，3，4 来回变换--> <script> window.onload=function(){ var ss = document.getElementById("ss"); //如果希望程序间隔一段时间运行 /*for(var i=0;i<100;i++){ ss.innerHTML=i; }*/ //setInterval(a,b) window的方法 可以直接调 //-函数 //-每次调用间隔时间 //返回值 int类型 作为定时器的标识 var num =1; var as = setInterval(function(){ ss.innerHTML=num++; if(num==20){ clearInterval(as) } },100) //关闭定时器 clearInterval } </script> </head> <body> <div id="ss">1</div> </body> </html>
延时调用
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //延时调用只会调用一次 setTimeout(function(){ console.log("sss"); },1000) </script> </head> <body> </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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 50px; background-color: red; position: absolute; } </style> <script> window.onload=function(){ /* 给div绑定是错误的 因为他的范围太小 var box = document.getElementById("box1"); box.οnmοusemοve=function(event){ event=event||window.event; var x = event.clientX; var y = event.clientY; box.style.left=x+"px"; box.style.top=y+"px"; }*/ var box = document.getElementById("box1"); document.onmousemove=function(event){ event=event||window.event; var x = event.clientX; var y = event.clientY; box.style.left=x+"px"; box.style.top=y+"px"; } } </script> </head> <body> <div id="box1"></div> </body> </html>
DOM补充
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var body =document.body; //获取body元素 var html = document.documentElement //获取html元素 var all = document.all //获取所有元素 var div =document.querySelector(".box div") 找class为box的div下的所有div </script> </head> <body> </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/* */ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 50px; background-color: red; } #div2{ width: 10px; height: 5px; background-color: black; } </style> <script type="text/javascript"> var div1 = document.getElementsById("div1"); //下面这种方式修改 是不好的 每行代码都会让浏览器重新渲染 三十个样式就渲染三十遍 性能低 div1.style.width=100px; div1.style.heigth=100px; div1.style.background=100px; //我们可以该类名一行代码修改多条样式 div.className=box1; </script> </head> <body> <div class = "div1"></div> </body> </html>
JSON
复制代码
1
2
3
4
5
6
7前端与后台交互 传递js对象数据怎么办？ 既然别人不认识js对象那就把对象转成字符串传递 所有语言都认识字符串 在js中有一个工具JSON 将json转成对象 JSON.pares（json字符串） JSON.stringify（js对象）
最后
以上就是虚幻龙猫最近收集整理的关于JavaScript的全部内容，更多相关JavaScript内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复