作用域
-
局部作用域和全局作用域
-
局部作用域，函数内
-
块状作用域，结构语句的
{}内 ES6 使用 let 声明 -
作用域链
-
变量提升
-
函数提升
对象
-
构造函数和对象
-
实例化对象
new 构造函数() -
this 表示本对象
-
调用属性和方法
对象.属性名
对象['属性名']
原型
-
所有的对象都有原型 （原型仍然是一个对象）
-
原型还有原型 构成原型链
-
对象可以继承原型上的属性和方法
内置函数 Object
-
new Object -
{prop:vlaue, prop:value: prop:function(){}, prop:value}
使用技巧
获取元素
document.querySelector() 一个元素
document.querySelectorAll() 由多个元素组成的 像数组（LikeArray） 对象
设置样式
eleObj.style.属性名 = 值
设置类名
eleObj.className = ''; <div class="item current">
eleObj.classList.add()
eleObj.classList.remove()
eleObj.classList.toggle()
事件
绑定事件 <button onclick=""> 不推荐
eleObj.onclick = function(e){
console.log(e)
}
事件对象 event
event.button 鼠标按键的值
event.clientX 鼠标坐标 （相对于整个页面）
event.clientY 鼠标坐标
定时
setInterval()
clearInterval()
setTimeout()
clearTimeout()
内置对象
系统内置的构造函数（类）
1 Number
属性
内置构造函数的属性
-
Number.MAX_VALUE 查看属性的最大取值
-
Number.MIN_VALUE 查看属性的最小取值
方法
-
toFixed([number]) 取整或者保留指定位数的小数 （四舍五入）number是保留小数位数
-
toString([number]) 转为字符串形式，可以指定进制 number是指定的进制
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Number对象</title> 6 </head> 7 <body> 8 <script> 9 var n1 = 100; 10 11 var n2 = new Number(100); 12 13 14 console.log(n1); 15 console.log(n2); 16 17 console.log(n1 == n2); 18 console.log(n1 === n2); 19 20 console.log(n2 + 100); 21 22 23 console.log(n1.constructor); 24 25 26 //类的属性 27 console.log(Number.MAX_VALUE); //可以表示最大的值 28 console.log(Number.MIN_VALUE); //可以表示最小值 29 30 console.log(n1.toString()); //变成字符串100 31 console.log(typeof n1.toString()); //变成字符串100 32 33 console.log(n1.toString(2)); //二进制输出 34 console.log(n1.toString(8)); //8进制输出 35 console.log(n1.toString(16)); //16进制输出 36 console.log(n1.toString(3)); //3进制输出 37 38 39 //取整数 40 console.log(n1.toFixed()) 41 console.log(10.354.toFixed()) //四舍五入取整 42 console.log(10.67.toFixed()) 43 console.log(10.354.toFixed(1)) //四舍五入取整 44 console.log(10.354.toFixed(8)) //四舍五入取整 45 46 47 </script> 48 </body> 49 </html>
2 String
属性
-
length 字符串长度 和python的len（）方法一样，只是length是个属性。
方法
这里要注意的是都是小驼峰体，不能写错
indexOf() 返回第一次出现的位置 不存在 返回-1
lastIndexOf() 返回最后一次出现的位置 不存在 返回-1
substr(start, lenth) 截取 开始和截取长度
substring(start, end) 截取 开始和结束位置
slice(start,end) 同上
split() 把字符串分割成 数组
trim() 去掉两边的空格
toUpperCase() 转大写
toLowerCase() 转小写
replace(旧, 新) 替换 只能替换一次
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>字符串</title> 6 </head> 7 <body> 8 <h1>字符串</h1> 9 <hr> 10 <script> 11 var message = 'i love you hello 你'; 12 13 14 console.log(message.length); //字符的个数 15 console.log(message[3]); 16 17 18 //方法 19 console.log(message.charAt(3)); //返回指定位置的字符 20 console.log(message.indexOf('o')); //返回指定的字符串(字符串) 第一次出现的位置 21 console.log(message.indexOf('love')); //返回指定的字符串(字符串) 第一次出现的位置 22 console.log(message.lastIndexOf('o')); //返回指定的字符串(字符串) 最后一次出现的位置 23 24 console.log(message.substr(4)); //截取 25 console.log(message.substr(4, 5)); //截取 从第4开始截取5个 26 console.log(message.substring(4)) 27 console.log(message.substring(4,6)); //从第4个到第6个（不包含第6个） 28 console.log(message.slice(4,6));//同上 29 30 //把字符串分隔成 数组 31 console.log(message.split(' ')); 32 33 34 console.log(message.toUpperCase()) 35 console.log(message.toLowerCase()) 36 37 console.log(message.replace('o', '偶')); 38 console.log(message.replace(/o/g, '偶')); 39 40 console.log(message.trim()); 41 42 43 console.log(message.indexOf('哈哈哈')); //返回指定的字符串(字符串) 第一次出现的位置 44 45 46 47 48 </script> 49 50 </body> 51 </html>
3 Boolean
4 Array
4.1 创建数组
var list = [item1, item2, item3 ...] 一般用上面的
var list = new Array()
3.2 数组操作
#添加元素
list.push() 最后面
list.unshift() 最前面
list.splice(位置,0,新值) 指定位置 第一个位置是指定添加元素的位置，第二个0是说明需要从指定位置替换掉的元素个数，0表示替换掉0个（删掉0个），新值就是新增加的值。
#删除元素
list.pop() 删除最后 返回删除的元素
list.shift() 删除第一个 返回删除的元素
list.splice(位置,删除的个数) 指定位置删除指定个数
#设置修改
list[index] = value
list.splice(位置，删除个数,值1,值2...)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数组</title> 6 </head> 7 <body> 8 <h1>数组</h1> 9 <hr> 10 11 <script> 12 var list = [100,23,'hello', 9, [1,2,3], {name:'lili',age:10}]; 13 14 console.log(list); 15 16 //list[18] = 1000; 17 18 //console.log(list); //稀疏数组 ， 尽量避免。 数组的索引必须连续 19 20 21 console.log(list.length); 22 23 24 //如何给数组添加元素 25 //最最后面追加 26 list.push(1000); 27 //在最前面追加 28 list.unshift(10000) 29 //指定位置追加 30 list.splice(3,0,'小丽丽','大丽丽') 31 32 console.log(list); 33 34 console.log(''); 35 36 37 //删除数组的元素 38 //删除最后一个 39 list.pop(); 40 //删除第一个 41 list.shift(); 42 //删除指定位置 43 list.splice(4,1) 44 45 console.log(list); 46 47 48 //修改数组中的元素 49 list[2] = '老丽丽'; 50 list.splice(2, 2, '小芳','小芳她妹','小芳她姐') 51 52 53 console.log(list); 54 55 56 57 58 59 60 </script> 61 </body> 62 </html>
3.3 属性和方法
属性
length
方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
------------------------
join()
concat() 数组连接
slice()
indexOf()
lastIndexOf()
map()
filter()
some()
every()
reduce()
forEach()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数组的方法</title> 6 </head> 7 <body> 8 <script> 9 var list = [1,2,31,4,5,6,10]; 10 console.log(list) 11 12 13 // list.reverse(); 14 // list.sort(function(v1, v2) { 15 // //返回正数 替换。 返回负数，不变 16 // return v1 - v2; 17 // }); 18 19 20 21 console.log(list) 22 str = list.join(','); //拼成字符串 23 24 console.log(list.concat([1,2,3], ['a','b','c'])) 25 console.log(list.slice(1,4)); //截取 26 console.log(list.indexOf(31)); 27 console.log(list.lastIndexOf(301)); //判断数组中是否存在某个值 28 29 30 31 32 console.log(''); 33 34 var arr = list.map(function(value, index) { 35 //console.log(value, index) 36 return value + 100; 37 }) 38 console.log(arr); 39 40 var arr = list.filter(function(value, index){ 41 //console.log(value, index) 42 //return false; 43 if (value > 6) { 44 return true 45 } else { 46 return false 47 } 48 }); 49 console.log(arr); 50 51 52 //返回布尔值 53 var res = list.every(function(value, index){ 54 return value >= 1; 55 }); 56 57 console.log(res); //布尔值 58 59 60 //some 返回布尔值 数组成员有一个满足条件 就返回true 61 var res = list.some(function(value, index) { 62 return value > 30; 63 }); 64 console.log(res); 65 66 67 //reduce 返回值 68 //阶乘 69 var res = list.reduce(function(prev,value,index){ 70 return prev * value; 71 }); 72 73 console.log(res) 74 75 76 77 78 79 80 </script> 81 </body> 82 </html>
3.4 数组的遍历（迭代）
#for 循环和
for (var i = 0; i < arr.length; i ++) {
arr[i]
}
#for .. in
for (var i in arr) {
arr[i]
}
#推荐 数组方法 forEach function藜麦你第一个参数是循环的值，第二个是索引
arr.forEach(function(val, index){
console.log(val)
})
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>遍历数组</title> 6 </head> 7 <body> 8 <script> 9 var arr = [10,20,30,40,50,60]; 10 11 console.log(arr); 12 13 14 //for循环遍历 15 for (var i = 0; i < arr.length; i ++) { 16 console.log(arr[i]) 17 } 18 console.log(''); 19 20 21 //不牛逼的for in 22 for (var i in arr) { 23 console.log(arr[i]) 24 } 25 console.log(''); 26 27 //forEach 28 // a是值，b是索引，固定格式 29 arr.forEach(function(a, b){ 30 console.log(a+' => '+b) 31 }) 32 </script> 33 </body> 34 </html>
5 类数组对象
-
类型不是Array，特性非常像Array
-
具有length属性
-
常见类数组对象： arguments， 元素的列表(NodeList)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>类数组对象</title> 6 </head> 7 <body> 8 <div class="item">1</div> 9 <div class="item">2</div> 10 <div class="item">3</div> 11 <div class="item">4</div> 12 <div class="item">5</div> 13 14 15 <script> 16 //for ... of 17 var list = [1,2,3,4,5]; //纯的 18 var itemList = document.querySelectorAll('.item'); 19 20 console.log(list); 21 console.log(itemList); 22 23 console.log(list.constructor);//Array 24 console.log(itemList.constructor);// NodeList 25 26 27 function demo(){ 28 console.log(arguments.constructor)//Object 29 } 30 31 demo(); 32 33 34 console.log(itemList[0]) 35 console.log(itemList.length); 36 37 38 for (var i = 0; i < itemList.length; i ++) { 39 console.log(itemList[i]) 40 } 41 42 console.log(''); 43 44 for (var i in itemList) { 45 console.log(i, itemList[i]) 46 }//用for..in..循环得到的不仅是itemlist里的值，还有对应的方法也会被循环出来。 47 48 //推荐用forEach 49 itemList.forEach(function(value, index) { 50 console.log(value) 51 }) 52 </script> 53 </body> 54 </html>
6 Function
# 属性
length 形参的长度
# 方法
call(对象，参数,参数2...) 在调用函数（方法）的同时，改变函数内this的指向
apply(对象, 数组) 在调用函数（方法）的同时，改变函数内this的指向
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>函数对象</title> 6 </head> 7 <body> 8 <script> 9 window.name = 'sb'; 10 //demo全局变量， 全局变量输入全局对象（global）->window 11 //this表示 方法所属的对象 12 function demo(a,b,c,d) { 13 console.log('啊，我被调用了'); 14 console.log(this);//window 15 console.log(this.name); 16 console.log(a,b,c,d); 17 console.log('') 18 } 19 20 21 22 console.log(demo.constructor); 23 24 console.log(demo.length);//形参的个数 25 26 27 demo(1,2,3,4); //调用的 28 window.demo(1,2,3,4); 29 //demo.apply() 30 31 32 //apply/call 调用函数，改变函数内的this的志向 33 demo.apply({name:'lili'}, [10,'hello',30]); 34 demo.call({name:'xiaofang'}, 10, 20, 40); 35 36 37 38 console.log(''); 39 var obj = {}; //对象 40 [].push.call(obj, 300) 41 console.log(obj); 42 43 44 console.log('') 45 46 47 function fn() { 48 //遍历所有的实参 49 [].forEach.call(arguments, function(val, index){ 50 console.log(val) 51 }) 52 } 53 54 fn(10,203,34,2342,243,34,'hello'); 55 56 57 58 59 60 61 62 63 </script> 64 </body> 65 </html>
7 Math 数学
属性
Math.PI
方法
Math.abs() 绝对值
Math.pow() 求几次方
Math.max() 最大值
Math.min() 最小值
Math.ceil() 进位取整
Math.floor() 舍位取整
Math.round() 四舍五入
Math.random() 随机数 0~1 0有可能，1不可能
取随机数
0~9
Math.floor(Math.random() * 10)
6~13
Math.floor(Math.random() * 8) + 6
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Math</title> 6 </head> 7 <body> 8 <script> 9 //Math 对象 10 console.log(Math); 11 console.log(typeof Math); 12 console.log(Math.constructor); 13 14 15 console.log(Math.PI); //圆周率 16 17 18 console.log(Math.abs(-78)) 19 console.log(Math.abs(89.9)) 20 21 22 console.log(Math.pow(3,4)) 23 24 25 console.log(Math.ceil(12.0001)); //取整数，进位取整 往大了取 26 console.log(Math.floor(12.9998)); //取整数，舍位取整 往下了取 27 console.log(Math.round(3.47)); //取整 四舍五入 28 29 console.log(Math.max(10,20,1,45,3)); //可变参数数量 取最大值 30 console.log(Math.min(10,20,1,45,3)); //可变参数数量 取最小值 31 32 33 //取随机数 34 console.log(Math.random()); //0到1之间 0可能会被取到 1不可能 35 36 //取 0到10之间的随机数 37 console.log( Math.floor(Math.random() * 11)); 38 39 //0到11 40 console.log( Math.round(Math.random() * 11)); 41 42 //0到28 43 console.log(Math.floor(Math.random() * 29)); 44 45 46 //7-17随机数 47 //取0~10 + 7 48 console.log(Math.floor(Math.random() * 11) + 7); 49 50 51 52 </script> 53 </body> 54 </html>
8 Date
getFullYear() 公元纪年
getMonth() 月份 0~11 需要+1
getDate() 日期
getDay() 星期几
getHours() 时
getMinutes() 分
getSeconds() 秒
getMilliseconds() 毫秒
getUTC... 标准时区的时间
set...
setUTC...
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Date日期</title> 6 </head> 7 <body> 8 <script> 9 //获取日期对象 10 var date = new Date(); 11 12 date.setFullYear(1978); 13 date.setUTCHours(1); 14 15 console.log(date); 16 17 // 2018-08-13 12:34:23 18 console.log(date.getFullYear()); 19 console.log(date.getMonth() + 1); 20 console.log(date.getDate()); 21 console.log('星期', date.getDay()); 22 23 24 console.log(date.getHours()) 25 console.log(date.getMinutes()) 26 console.log(date.getSeconds()) 27 console.log(date.getMilliseconds()) 28 29 30 //时间戳 31 console.log(date.getTime()); //单位是毫秒 32 33 34 //0时区的时间 35 console.log(date.getUTCFullYear()) 36 console.log(date.getUTCDate()) 37 console.log(date.getUTCHours()) 38 39 40 41 42 43 </script> 44 </body> 45 </html>
9 RegExp
正则
RegExp对象
test() 返回布尔值
exec() 返回数组，第一个匹配到的内容，位置。 全局匹配,所有匹配到的内容
String对象的方法
search() 第一次匹配到的位置，匹配不到 -1
match() 同r.exec()
replace() 替换，默认只替换一个，正则全局匹配
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正则</title> 6 </head> 7 <body> 8 <script> 9 //创建正则对象 10 //var r = new RegExp(); //创建正则对象 11 12 var r = /^w{4,6}$/; 13 14 15 console.log(r.test('abc')); //返回布尔值 16 console.log(r.test('abc12')) 17 18 19 console.log(r.exec('abc_nb')); // 返回数组 第一个元素 匹配到的内容，index指定匹配的位置 20 21 22 //字符串 方法匹配正则 23 var msg = 'hello world'; 24 console.log(msg.search(/w/)); //返回第一次匹配的位置 25 console.log(msg.search(/o/)); //返回第一次匹配的位置 26 console.log(msg.search(/哈/)); //返回第一次匹配的位置 匹配不到返回-1 27 28 console.log(msg.match(/w/)); //返回数组，数组中有 被匹配到的内容 29 console.log(msg.match(/w/g)); //匹配出 所有满足正则的字符串 30 31 32 console.log(msg.replace(/o/g, '偶')) 33 34 </script> 35 </body> 36 </html>
最后，附上今天讲的作业：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>倒计时</title> 6 <style> 7 #box { 8 font-size:60px; 9 margin-top:200px; 10 text-align:center; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="box"></div> 16 17 <script> 18 //定义一个固定的时间 19 //倒计时的秒数 20 var seconds = 3000; 21 22 runTime(); //调用一下 23 24 //定时 25 var timer = setInterval(runTime, 1000); 26 27 28 function runTime(){ 29 //计算包含的小时数 30 var h = Math.floor(seconds / 3600); 31 var s = seconds - h * 3600; //剩下的秒数 32 //计算包含的分钟数 33 var m = Math.floor(s / 60); 34 //计算剩下的秒 35 s -= m * 60; 36 37 //给个位数 补0 38 h = h < 10 ? '0'+h : h; 39 m = m < 10 ? '0'+m : m; 40 s = s < 10 ? '0'+s : s; 41 42 //拼接字符串 43 var timeHtml = `距离预产期还有${h}小时${m}分${s}秒`; 44 45 //判断倒计时结束 46 if (seconds <= 0) { 47 clearInterval(timer); 48 timeHtml = '生了'; 49 } 50 51 document.querySelector('#box').innerHTML = timeHtml; 52 53 54 seconds --; 55 } 56 </script> 57 </body> 58 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>倒计时</title> 6 <style> 7 #box { 8 font-size:60px; 9 margin-top:200px; 10 text-align:center; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="box"></div> 16 17 <script> 18 //定义结束时间 19 var endDate = new Date('02/05/2019 00:00:00'); 20 //当前的时间 21 var currDate = new Date(); 22 23 //倒计时的秒数 24 var seconds = Math.round(endDate.getTime()/1000) - Math.round(currDate.getTime()/1000); 25 26 runTime(); //调用一下 27 28 //定时 29 var timer = setInterval(runTime, 1000); 30 31 32 function runTime(){ 33 //包含的天数 34 var d = Math.floor(seconds / (3600 * 24)); 35 var s = seconds - d * 3600 * 24; 36 //计算包含的小时数 37 var h = Math.floor(s / 3600); 38 s -= h * 3600; //剩下的秒数 39 //计算包含的分钟数 40 var m = Math.floor(s / 60); 41 //计算剩下的秒 42 s -= m * 60; 43 44 //给个位数 补0 45 d = d < 10 ? '0'+d : d; 46 h = h < 10 ? '0'+h : h; 47 m = m < 10 ? '0'+m : m; 48 s = s < 10 ? '0'+s : s; 49 50 //拼接字符串 51 var timeHtml = `距离过年还有${d}天${h}小时${m}分${s}秒`; 52 53 //判断倒计时结束 54 if (seconds <= 0) { 55 clearInterval(timer); 56 timeHtml = '生了'; 57 } 58 59 document.querySelector('#box').innerHTML = timeHtml; 60 61 62 seconds --; 63 } 64 </script> 65 </body> 66 </html>
进度条：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>进度条</title> 6 <style> 7 .outer { 8 margin:200px auto 0px; 9 600px; 10 height: 40px; 11 border: 1px solid #111; 12 } 13 .inner { 14 height: 40px; 15 40%; 16 background: #369; 17 } 18 .progress { 19 margin-top:2px; 20 text-align: center; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="outer"> 26 <div class="inner"></div> 27 </div> 28 <div class="progress"></div> 29 30 31 <script> 32 33 var innerEle = document.querySelector('.inner'); 34 var proEle = document.querySelector('.progress'); 35 var m = 0; 36 var timer = setInterval(function(){ 37 innerEle.style.width = m+'%'; 38 proEle.innerHTML = m+'%'; 39 40 if (m >= 100){ 41 clearInterval(timer); 42 return; 43 } 44 45 m += 1; 46 }, 17) 47 </script> 48 </body> 49 </html>