-
JavaScript知识点(根据例子来学习)
立即执行函数
(function(){ document.write("通常将匿名函数与事件处理程序一起使用") })();- 1
- 2
- 3
input标签、rowspan
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>shiyantitle> <link rel="stylesheet" href="./page1.css"> head> <body> id 前台拿数据，name 后台拿数据 时间：<input type="time" placeholder="请输入时间" autofocus><br> 日期：<input type="date" placeholder="请输入日期"><br> 数字：<input type="number" placeholder="输入数字" value="0" max="100" min="-100" step="20"><br> 日期时间:<input type="datetime_local" placeholder="日期时间"> 搜索：<input type="search" required pattern="[0-9][a-z]{2}">!!!!!!!!!!!!!! 邮箱：<input type="email"> 网址：<input type="url"> 滑块：<input type="range"> 颜色：<input type="color"> 音频:loop autopaly, muted (10.21)：<audio src="" controls>audio> 视频： <video src="" controls>video> <table border="1" > <tr> <th>分类th> <th>技能th> <th>分数th> tr> <tr> <td rowspan="3">编程语言td> <td>JavaScripttd> <td>8td> tr> <tr> <td>C++td> <td>7td> tr> <tr> <td>Swifttd> <td>8td> tr> <tr> <td rowspan="2">产品设计td> <td>PhotoShoptd> <td>6td> tr> <tr> <td>Axuretd> <td>5td> tr> <tr> <td rowspan="2">销售td> <td>社交媒体td> <td>3td> tr> <tr> <td>C++td> <td>7td> tr> table> 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
选择器、伪类选择器a:hover
DOCTYPE html> <html> <head> <style> p { background-color: orange; } #p2 { color: red; background-color: cadetblue; } .para { color: blue; } p.para2 { color: aliceblue; } #div h2{ color:aqua; background:gray; } /* 未访问前 */ a:link{ color:pink; } /* 访问以后 */ a:visited{ color:aqua; } /* 鼠标悬停 */ a:hover{ color:firebrick; font-size: 30px; } /* 点中时 */ a:active{ color:red; } style> head> <body> <p id="p1">这是一个段落p> <hr> <p class="para" id="p2">这是第二个段落p> <hr> <p class="para2">这是三个段落p> <div id="div"> <h2>标题1h2> <h2>标题1h2> <h2>标题1h2> <h2>标题1h2> div> <a href="https://www.baidu.com">百度链接a> 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
函数
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> 函数 1、函数定义 与调用 2、函数参数 、arguments 3、return 返回值 结束 4、作用域 ：全局变量 、局部变量<br> <button name="button" id='btn1'>点击button><br><br> <script> //1 定义 方法1 // document.write("123"); //方法2 函数表达式 (匿名函数) var w=function(){ document.write("通常将匿名函数与事件处理程序一起使用") } // w(); // document.write("123") //通常将匿名函数与事件处理程序一起使用 btn1.onlick=function(){ w(); }; //自调用函数-立即执行函数 (function(){ document.write("通常将匿名函数与事件处理程序一起使用") })(); document.write("
") //2 函数参数 直接写形参名字 function write(name1, name){ document.write("hello,"+name1+"
"); document.write("hello,"+name+"
"); } write(123,23) //实参个数多于形参:只出现前面的 // write(1,2,3,4) //实参少于形参:出现undefined // write(123) // arguments 对象 // 函数有一个名为 arguments 的内置对象。实参赋给形参使用这个参数来接收. //arguments 对象类似于数组的结构（可以遍历，可以用下标访问）。 //如果函数调用的参数太多，则可以使用 arguments 对象来得到这些参数。 function f(a, b){ // document.write(arguments.length+"
") // document.write(arguments[0]+"
") // document.write(arguments[1]+"
") // document.write(arguments[3]) var max=arguments[0] for(var i=1; i<arguments.length; i++){ if(arguments[i]>max) max=arguments[i] } document.write(max) } f(1,2,234,3) document.write("
") var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); m.forEach(function (value, key, map) { document.write(value+key+map+"
"); }); 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
- 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
变量作用域
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> JavaScript 中，变量的作用域有 全局作用域 和 局部作用域 两种。 1、全局变量 函数外定义的变量 没有用 var定义的变量(let) window对象定义的变量(window.c=1) 2、局部变量 函数内用var定义的变量 形参 变量的生命周期 全局变量活得和您的应用程序（窗口、网页）一样久。 局部变量活得不长。它们在函数调用时创建，在函数完成后被删除。 <script> //1 全局变量 var str1=" 1我是全局" document.write(str1) function fn1(){ var str2="我是局部" //2 局部变量 使用var在函数内部定义的变量 let s="123" } fn1(); console.log(str1); // console.log(s); //6 以下程序运行结果是: //对Js而言，只要变量是在同一个范围（函数）里，就视为已经声明， //哪怕是在变量声明前就使用 /* var num1=10; function fn2(){ //因为num1是局部的 fn1内部的。所以提升到fn1函数最前面声明 console.log(num1);//输出？undefined var num1=20; } fn2()*/ var a="1111" function fn3(){ console.log(a); var a="2222" console.log(a); } fn3(); 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
- 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> head> <body> 查找元素方法： 1 通过 id 查找元素<br> <p id="intro">Hello!p><button name="button" id='btn0'>确定button> <script> var p = document.getElementById("para"); // document.write(); var btn0 = document.getElementById("btn0"); btn0.click = function () { document.write("nihao"); } script> <hr> 2、通过标签名查找元素<br> <ul> <li>【#回应何时开学#】li> <li>【#回应何时开学#】li> <li>【#回应何时开学#】li> <li>【#回应何时开学#】li> <li>【#回应何时开学#】li> <li>【#回应何时开学#】li> ul> <script> var lis = document.getElementsByTagName('li'); console.log(lis); for (var i = 0; i < lis.length; i++) { if (i % 2 == 0) { lis[i].style.background = "blue"; } } script> <hr> 3 html5新增的 通过 CSS 选择器查找 HTML 元素:<br> querySelectorAll() 方法 :查找匹配指定 CSS 选择器（id、类名、标签等）的所有 HTML 元素<br> querySelector() 方法 :查找匹配指定 CSS 选择器的第一个 HTML 元素<br> <p id="p1">Hello!p> <button name="button" id='btn1'>确定button> <p class="imp">Hello!p> <p class="imp">world!p> <script> //querySelectorAll() 方法 获得class为imp的元素 .不能少 var p1 = document.querySelectorAll('.imp') console.log(p1) //querySelector（）方法 获得id为btn1的元素 #不能少 var p2 = document.querySelector('#btn1') console.log(p2) var ps = document.querySelectorAll(".imp"); console.log(ps); ps[1].innerHTML = "123456789"; 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
- 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
面向对象
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>面向对象title> head> <body> 1、什么是JavaScript对象？ 对象是有(属性)和(方法)的集合。 2、创建对象的三种方式：<br> 01、使用new object()方式 <script> //创建 var person = new Object(); // console.log(person) // console.log(typeof(person)) //设置属性和方法 person.name="123" person.age = 18; //设置方法 person.say=function(){ console.log("say") } //访问属性 // console.log(person.name) // console.log(person.age) //调用方法 // person.say() script> <br> 01 使用字面量定义 var 对象={ //键值对的形式 键 属性名 ：值 属性值， 属性名 ：值， //方法 冒号后面跟着一个匿名函数。 方法:function(){ } } <script> var person = { name:"123", age:123, say:function(){ console.log("say") } } // person.say() script> <br> 3、使用自定义的构造函数声明多个类型特点一致的对象 //构造函数的语法格式： // function 构造函数名(){ // this.属性=值; // this.方法=function(){} // } //new 构造函数名(); 函数名首字母要大写 <script> //1创建构造函数 function Person(name, age){ // console.log(this); this.name = name; this.age = age; this.say=function(){ console.log("say") } } //2通过构造函数new对象 var p1 = new Person("hzy", 18) var p2 = new Person("hhh", 21) // console.log(p1.say()) // p2.say() //3属性访问访问2:['属性名'] // console.log(p1['name']) //01什么时候 必须用['属性名'] //属性名里包含特殊字符: var obj={ } obj['content-type']='text/css' // obj.c-c='123'//错误 //属性名不确定 var Name='123' obj.Name=20; // console.log(obj.Name) // for in 遍历属性 //for(变量 in 对象){ //} // for(var i in obj){ // console.log('====', i, obj.i)//undefine // console.log('====', i, obj[i]) // } script> 4、相关问题-对象赋值与引用 内存： 栈：局部变量 全局变量 堆：对象 <script> //01基本数据类型 在内存中的存储 var a=10 var b=a b=20; console.log(a) script> <script> //02复杂数据类型 在内存中存储 var obj1={name:"Tom"} var obj2=obj1 obj1.name='123' console.log(obj2.name) script> <script> //03基本数据类型作为函数参数 script> <script> //04复杂数据类型作为函数参数 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
- 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
- 121
- 122
Math库
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> Math 对象 Math 对象用于执行数学任务。<br> 使用 Math 的属性和方法的语法：<br> var pi_value=Math.PI; var sqrt_value=Math.sqrt(15);<br><br> <hr> <script> var i; i=Math.round(5/2) //四舍五入 //取整 向下取整 i=Math.floor(5/2) //绝对值 Math.abs(-100) //随机数 0-1之间 i=Math.random() //产生0-10之间的随机数？ i=Math.random()*10 //产生5-10之间的随机数？ i=Math.random()*5+5 //公式：取x到y之间的随机数:; //Math.random()*(y-x)+x //问题：如何产生0到10之间的随机整数？ //方法：先产生0- 之间的随机数 然后 . document.write(i); //alert(i); /*练习 写一个随机点菜的小程序 1 创建一个数组 2 随机产生数组下标 3 将下标对应的数组元素 输出来. js中定义数组:var arr=["鱼头豆腐","红烧排骨","土豆丝","西红柿鸡蛋汤","鸦片鱼头","小鸡炖蘑菇"] */ 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
- 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> <head> <meta charset="utf-8"> <title>title> head> <body> 1、静态成员 <script> function Person(name, age) { this.name = name; this.age = age; //静态属性 类名.属性 if (!Person.count) { Person.count = 0; } Person.count++; } /*设置一个属性 计算创建出多少对象 需要静态成员-判定在构造函数上的属性和方法 */ Person.print = function(){ alert("创建了"+Person.count+"对象") } var p1=new Person('qwe', 123) var p2 = new Person('qw', 1) console.log(Person.count) Person.print() 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
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
特殊的引用类型：Boolean、Number 和 String
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> 为了便于操作基本类型值，js还提供了 3 个特殊的引用类型：Boolean、Number 和 String。 Number 对象：基本包装类型 提供数字的对象（包括整数、浮点数等） 1、NaN属性：非数字（(Not a Number)。） 2、isNaN（）函数：判断是否为非数字 3、toString()：把数字转为字符串 4、把变量转换为数值 这三种 JavaScript 方法可用于将变量转换为数字： Number() 方法 可用于把其他类型转换为数值 parseInt() 方法 解析一段字符串并返回整型数值。允许空格。只返回首个数字： parseFloat() 方法 解析一段字符串并返回数值。允许空格。只返回首个数字： <br><br><hr><br> <script> //1 NaN属性 //document.writeln("===============
") //2 isNaN 判断是否为非数字 //3、toString()：把数字转为字符串 //n不是数字吗？怎么会有方法 // 4 Number() 方法 可用于把 其它类型转换为数值 //布尔类型 //数字组成的字符串 //日期对象 //字母+数字字符串 //5 parseInt() 方法 解析一段字符串并返回整型数值。允许空格。只返回首个数字 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
- 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> <head> <meta charset="utf-8"> <title>title> head> <body> 1、静态成员 <script> function Person(name, age) { this.name = name; this.age = age; //静态属性 类名.属性 if (!Person.count) { Person.count = 0; } Person.count++; } /*设置一个属性 计算创建出多少对象 需要静态成员-判定在构造函数上的属性和方法 */ Person.print = function(){ alert("创建了"+Person.count+"对象") } var p1=new Person('qwe', 123) var p2 = new Person('qw', 1) console.log(Person.count) Person.print() 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
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
原型prototype
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> 2、构造函数问题：存在浪费内存空间问题 <script> function Person(name,age){ this.name=name; this.age=age; this.say=function(){ console.log('hello'); } } //浪费内存空间问题 var p1 = new Person('abc', 123) var p2 = new Person('ab', 12) // console.log(p1) // console.log(p2) //===严格相等 //如果两个值都引用同一个对象或是函数，那么相等，否则不相等 // console.log(p1.say===p2.say) script> 3 构造函数原型prototype 通过原型来实现所有对象共享方法。 <script> function Person(name,age){ this.name=name; this.age=age; } //每个构造函数 都有一个prototype属性,指向另外一个对象. console.dir(Person) //我们可以把共有的方法,直接定义在prototype对象上,让所有对象实例共享. //通过原型添加方法 Person.prototype.say = function(){ alert("hello") } var p1=new Person("tom",10); var p2=new Person("jerry",10); console.log(p1.say===p2.say) script> 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
- 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
基于原型链的继承
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> 1 基于原型链的继承 <script> function Person(age){ this.age=age } Person.prototype.say=function(){ alert('hello world'); } function Student(){ } //继承 //1 构造父类的实例 var p1=new Person(20) //2 设置为子类的原型对象 Student.prototype=p1 问题：Student.prototype.constructor指向哪个构造函数 // console.log(Student.prototype.constructor===p1.constructor) //3 修复子类函数原型的constructor指针即可 Student.prototype.constructor=Student; var stu1=new Student() // stu1.say() // console.log(stu1.age) script> <br> 2 存在问题：实例共享引用类型，新创建的对象都有“玩游戏”这个变量，如p1、p2 <script> function Parent() { this.newArr = ["唱歌", "跑步"]; } function Child() { this.name = "abc"; } Child.prototype = new Parent() Child.prototype.constructor = Child // 对于属性不希望继承 var p1 = new Child() p1.newArr.push("玩游戏") // console.log(p1.newArr);/// var p2 = new Child(); // console.log(p2.newArr) script> <br> 3 call函数 <script> //call函数 var demo1={ name:'好人:', showABC:function(param1,param2){ console.log(this.name,param1,param2) } } demo1.showABC('张三','李四') var demo2={ name:'坏人' } //call来让demo2对象 借用demo1的showABC方法 demo1.showABC.call(demo2, "1", '2') script> <br> 4 利用构造函数继承属性 <script> function Father(uname,age){ this.uname=uname; this.age=age; console.log(uname, age) } // Son想要继承Father的属性 function Son(name, age){ Father.call(this, name, age) } console.log(Son(12, 2)) 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
- 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
对象原型proto
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> 4 对象原型__proto__ 请问为什么对象 可以访问原型里的方法？ 原因：每个对象都有一个属性__proto__指向原型prototype, 所以可以使用原型对象里的方法 <script> function Person(name,age){ this.name=name; this.age=age; } Person.prototype.sayHello = function(){ alert("Hello") } var p1=new Person("tom",10); var p2=new Person("jerry",10); // 输出__proto__属性 // console.log(p1.__proto__) // console.log(p1.__proto__===p2.__proto__) script> <br> 5 原型对象的constructor构造函数 原型对象里面都有一个属性 constructor属性,constructor我们称为构造函数 因为它指回构造函数本身. <script> // console.log(Person.prototype.constructor) //有时候 我们需要用写代码让constructor指向原来的构造函数 Person.prototype = { eat: function(){}, study:function(){}, toString:function(){} } // Person.prototype.toString = function(){ // alert("alert") // } //打印 constructor指向了? // consoel.log(Person.prototype.constructor) //可以手动让constructor指向原来的构造函数 // 父亲的父亲的父亲 // null 继承 console.log(p1.__proto__.toString()===p1.__proto__.__proto__.toString()) console.log(p1.__proto__.__proto__.toString()) script> <br> 6 原型对象的应用 扩展内置对象方法 数组也有原型对象 <script> Array.prototype.sun = function(){ var sum=0 for(var i=0; i>this.length; i++){ sum+=i; } console.log('sum: '+sum) return sum } var arr = [1, 2, 3, 4, 5] console.log(arr.__proto__) 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
- 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
ES6的类
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上课title> head> <body> 1、箭头函数 <script> var fn = function(){ console.log("1") } var fn1=()=>{ console.log("fn1") } // fn() // fn1() script> <br> 2、es6中标准的类 <script> class Person{ name="23" age="20" // say=function(){ // console.log(name, age) // } //将函数直接添加到原型Prototype上面 say(){ console.log(name, age) } } var p1 = new Person() // console.log(p1) // console.log(p1.prototype===p1.__proto__) script> <br> 3、静态成员 <script> class Student{ name="2" static count=0 static doCount(){ if(!Student.count){ Student.count=0 } Student.count++ console.log("当前对象的个数是"+Student.count) } } var s1 = new Student(); // Student.doCount() var s1=new Student(); // Student.doCount() // console.log(s1===s1) script> <br> 4、类中的构造函数 <script> class Teacher{ // name="tea" // age=999 //私有属性 #+属性名 #name #age getAge(){ return this.#age } set age(age){ if(age>0 && age<200) this.#age=age else console.log("数据错误") } get name(){ return this.#name } set name(name){ this.#name=name } constructor(name, age){//可以不用写属性 this.#name=name this.#age=age } // Uncaught SyntaxError: A class may only have one constructor // constructor(name, age, ls){ // this.name=name // this.age=age // this.ls = ls // } say(){ console.log(this.name, this.age, this.#name, this.#age)// } } var t1 = new Teacher("t", 123, "2",'23') // console.log(t1.getAge()) // t1.say() // t1.age=10 // t1.say() // console.log(t1.age2) script> <br> 5、继承 <script> class S extends Teacher{ constructor(name, age){ super(name, age) } say(){ console.log(this.age) } } var s = new S('2', '3') // s.say() console.log(S.prototype) console.log(S.__proto__) console.log(S.__proto__.__proto__) console.log(S.__proto__.__proto__.__proto__) console.log(S.__proto__.__proto__.__proto__.__proto__) 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
- 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
- 121
- 122
- 123
- 124
- 125
- 126
定时器
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> BOM:浏览器对象模型 window对象 顶级对象 1、window对象的方法：setInterval(调用函数，毫秒数) 定时器 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 注意：调用函数有3中写法： 函数 函数名 字符串（'函数名（）'） <br> <script> //1 函数 js函数可以作为参数 //window可以省略 // setInterval(function(){ // console.log("hello") // }, 3000) //2 函数名 function sayHello(){ alert('hello'); } // setInterval(sayHello, 3000) //3 字符串（'函数名（）') var tid = setInterval("alert('hello')", 3000) script> 2、取消定时器： clearInterval() 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。<br> <button id='btn1'>开启button> <button id='btn2'>关闭button> <script> var btn2=document.getElementById("btn2"); var btn1=document.querySelector() btn2.onclick=function(){ clearInterval(tid) } 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
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
函数中this指针
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> 1、this是什么？ 函数中的this指函数的实际调用对象。<hr> <script> // console.log(this) // var obj={name:"123"} // obj.fn = function(){ // console.log(this) // console.log(this.name) // } // // obj.fn() // // setTimeout(obj.fn, 1000) // console.log(typeof(obj)) script> 2、箭头函数的this 箭头函数没有自己的this,它的this是外层作用域的this<hr> <script> function fn1(){ console.log("fn1-",this); } var fn2=()=>{ console.log("fn2",this); } // fn1() // fn2() var obj1={ name:"124", fn1, fn2, fn3:()=>{ console.log(this) } } // obj1.fn1()//类的this // obj1.fn2()//外部的window // obj1.fn3()//同样也是外部的window var obj2={ obj1 } console.log(obj2.obj1.fn1()) console.log(obj2.obj1.fn2()) console.log(obj2.obj1.fn3()) script> 3、 函数是Function类的实例 可以通过new Function动态创建函数对象。 <script> var add= new Function("x", "y", "return x+y") console.log(add(1, 2)) 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
- 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
高阶函数
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> 1、js中函数可以作为参数传递<br> <script> function say (str) { alert(str); } //01方法函数作为参数 // 高阶函数 function fn(fun, str){ fun(str) } // fn(say, "123") // setInterval(say, 3000, "1") //02直接将匿名函数作为参数传递给fn1方法 // fn(function(str){ // alert(str) // }, "1111111") script> <br> 2、函数作为返回值 <script> /*希望test1函数执行时，可以记录一条日志 开闭原则：对扩展开放，对修改关闭 在不修改原函数的基础上，增加此功能。 可以通过函数作为返回值 来动态生成一个新函数*/ function test1(){ var str="heollo" console.log(str) } function outer(fun){ return ()=>{ console.log("添加日志------------") fun() }//返回值是函数 } outer(test1)//返回值是函数 var f1=outer(test1)//接受返回值 f1() script> 3、什么高阶函数<br> 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
闭包
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> 闭包 01 什么是闭包：函数A中 有一个函数B，函数B中可以访问函数A中定义的变量 或者数据，此时就形成了闭包。 02 闭包的功能： 使函数内部的变量在函数执行完后，仍然存活在内存中 （延长了局部变量的生命周期） 让函数外部可以操作函数内部的数据 <script> //1定义一个闭包 function A(){ var num=123 function B(){ console.log(num) } B() } // A()//打断点之后会出现，Closure (A)，闭包 // console.log(num) //2 在f1 外部来访问n; function f1(){ var n=10 return function(){ console.log(n) return n; } } // console.log(n); //console.log("函数外 输出局部变量n的值："+ ); /*闭包的功能： 使函数内部的变量在函数执行完后， 仍然存活在内存中（延长了局部变量的生命周期） 让函数外部可以操作函数内部的数据*/ //3 函数执行完后 局部变量就自动释放了 ？为什么还能访问？ var f2=f1() f2()//延长了n的作用周期 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
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
闭包案例
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> head> <body> 1、案例一<br> <script> /* function f1(){ var num=10; num++; console.log(num); } //运行结果是？ f1() //11 f1() //11 12 f1()*/ script> 如何实现累加？-闭包 <script> function f2() { var n = 10 return function () { n++ return n } } var ff = f2() // console.log(ff()) // console.log(ff()) // console.log(ff()) script> <hr> 2、案例二：下来3个按钮，点击其中一个，提示"点击的是第n个按钮"：<br> <button>桔子1button> <button>苹果2button> <button>梨子3button> <script> //html5 通过css选择器获得页面元素 var btns = document.querySelectorAll("button") // console.log(btns) // for(var i=0; i- 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
闭包：实现可以持续分别点赞。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <style> h1{ color: aquamarine; } style> head> <body> 3、案例三<hr> <h1>请给下列新闻投票h1> <ul> <li>北京冬奥会火种抵达北京<button>投票button>li> <li>31省区市新增本土确诊17例。<button>投票button>li> <li>互联网公司校招名额大幅增加 核心岗位首次开放<button>投票button>li> <li>多地取暖用煤价格涨超2倍<button>投票button>li> ul> <script> var count = new Array() count[0]=0 count[1]=0 count[2]=0 count[3]=0 var buttons = document.querySelectorAll("button") // 闭包方法1 // function clickCount(i){ // var n=count[i]; // return function add(){ // count[i]++; // n++; // return n // } // } // for(var i=0; i- 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
正则表达式
<script> var rex = new RegExp(/abc/); var f1=rex.test('abc') var f2=rex.test("abcdd") console.log(f1, f2) var reg=/abb/ var s=reg.exec('abbbbb')//搜索字符串并且返回已找到的文本 console.log(s) var rg=/[a-z]/ var reg=/[a-zA-Z]{2}/ var s=reg.exec('a1a1v1b') console.log(s) var reg=/[zo*]/ //贪婪模式 ?结束贪婪模式 var reg=/a{3}$/ var reg=/s/ var s=reg.exec("vaaa") console.log(s) </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
事件监听
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <style> #div1 { width: 200px; height: 200px; background: beige; } style> head> <body> 1、event事件对象：是浏览器在事件触发时所创建的对象。 这个对象封装了事件相关的各种信息。 -通过事件对象 可以获取事件的各种信息。 <hr> 2、Dom中存在着多种不同类型的时间对象-他们的父对象都是Event <hr> <div id='div1'>div><br> <button id='btn1'>按钮1button> <script> var div1 = document.getElementById('div1'); var div1 = document.getElementById("div1") var btn1 = document.getElementById("btn1") // console.log(div1, btn1) div1.onclick=function(event){ // console.log(event) //target 触发事件的对象 console.log(event.target) //this // console.log(this) div1.textContext=event.clientX+" "+event.clientY } //事件的另外一种方式:监听事件 绑定多个方法 btn1.addEventListener('click', function(){ alert("1234") }) btn1.addEventListener('click', function(){ alert("12345") }) 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
- 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> <head> <meta charset="utf-8"> <title>title> <style> #div1 { width: 300px; height: 300px; background: red; } #div2{ width: 200px; height:100px; background-color: aqua; } style> head> <body> 3、 事件冒泡:(bubble)是指事件向上传导 当元素的事件被触发后，其父元素上的相同事件也同时触发。 事件冒泡的存在简化了代码的编写，但是有时我们并不希望冒泡存在。 取消事件冒泡：event.stopPropagation() <div id='div1'> <div id="div2">div> div><br> <script> var div1 = document.getElementById('div1'); div1.onclick = function (ev) { alert("div1") } var div2 = document.getElementById('div2'); div2.onclick = function (ev) { // 取消默认行为 ev.stopPropagation() alert("div123") } script> 4 取消默认行为。 <a id='a1' href="https://www.ahut.edu.cn">安工大a> <script> var a1 = document.getElementById('a1'); a1.onclick=function(ev){ alert("安工大") //取消跳转的默认行为 // 1.return false // 2.ev.preventDefault() } 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
- 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
实现光标跟随效果
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实验四title> <style> div { width: 20px; height: 20px; background-color: bisque; position: absolute; } style> head> <body> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <div class="div">div> <script> var divs=document.querySelectorAll(".div") // console.log(divs.length) document.onmousemove = function (ev) { divs[0].style.left=ev.clientX+"px" divs[0].style.top=ev.clientY+"px" for(var i=15; i>0; i--){ divs[i].style.left=divs[i-1].style.left divs[i].style.top=divs[i-1].style.top } // for(var i=1; i<16; i++){ // divs[i].style.left=divs[i-1].style.left // divs[i].style.top=divs[i-1].style.top // } } script> 解题思路： 1. 多个div跟随光标，第一个div的位置 始终是 光标移动到的位置。 2. 第二个div，当移动的过程中，会到第一个div之前的位置，第三个div 会到第二个div 之前的位置。 3.前一个div的位置赋给当前的div : obj.offsetTop 指 obj 相对于父元素上侧位置，整型 obj.offsetLeft 指 obj 相对于父元素左侧位置，整型 4.最后开始，在第一个div 还没移动的时候，第10个去到第9个，第9个去到第8个的位置......最后再把第一个移动到光标的位置。 标签: JS 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
-
相关阅读:
Nginx 文件解析漏洞复现
40道Java基础常见面试题及详细答案
matlab simulink和python混合编程
使用gpio_direction_output()无法设置GPIO原因分析
【光学】Matlab模拟几何光学中的球差、彗差、像散、场曲四种像差
力扣之斐波那契数列
如何降低海康、大华等网络摄像头调用的高延迟问题（二）
JAVASE（复习）——多态
一个方法中两个参数列表和整数，列表相邻相差绝对值与比较输入false和true
04 动力云客之登录后获取用户信息+JWT存进Redis+Filter验证Token + token续期
- 原文地址：https://blog.csdn.net/m0_67623521/article/details/128153419
