15、js 原生基础总结
Day1
一、什么是JS？
基于对象和事件驱动的客户端脚本语言
二、哪一年?哪个公司?谁?第一个名字是什么?
1995，NetScape(网景公司)，布兰登(Brendan Eich)，liveScript
三、W3C第一个标准？
ECMA-262
四、JS包含哪几个部分？
ECMA 、BOM 、DOM
五.如何引入JS？
三种，与引入CSS相似，
内联样式，外部样式，内部样式。
六.JS中有哪些输出方式?区别是什么?
alert(); 以警告框的方式输出,中断后面代码的执行
document.write();输出在页面中,它是影响页面布局
console.log();在控制台输出,不影响用户体验,是程序常用的排序工具,它是输出对象的详细信息
七、JS中如何换行？
如果是纯JS代码中换行 \n （alert(); ）
如果是在页面中换行 <br> （document.write()）
八.JS中有哪些数据类型?
基本数据类型: Number/String/Boolean/Null/Undefined/Symbol
复合数据类型：Object
九.标识符的命名规则:
1.包含字母/数字/下划线/$/中文
2.不能以数字开头
3.不能是关键字/保留字
4.语义化
5.驼峰命名
1>大驼峰: ZhongHuaRenMingGongHeGuo 常用于类(构造函数名)
2>小驼峰: zhongHuaRenMingGongHeGuo
6.匈牙利命名法:
整数(int) iNum
小数(float) fNum
布尔(boolean) boo
数组(array) arr
函数(function) fn
正则 re
十. 什么是变量?
是在内存中开辟一块空间,这块空间用于存储数据,且数据随程序会发生改变.
1. 如何声明变量?
显式声明: var iNum = 3;
隐式声明: iNum = 3;
2. 如何给变量赋值?
初始化
先声明后赋值
十一.运算符
1.递增递减运算符 ++ --
i++ == i; ++i == i + 1；
2. 算术运算符 * / % + -
3 * "3"(9) "3" * "3"(9) 3 * null(0) 3 * "3a"(NaN) 3 * undefined(NaN) 3 * true(3) 3 * false(0)
3 / 2(1.5) 3 / '2'(1.5) 3 / '3a'(NaN) 0 / 3(0) 3 / 0(Infinity) 0 / 0(NaN)
8 % 3(2) 3 % 8(3) 2 % 8(2)
3 + 3(6) 3 + '3' = '33'("33") 3 + null(3)
3.关系运算符 > < >= <= == != === !==
3 >= 3(true) 3 > "2"(true) "100" > "2"(false)逐位比较 '我' > '你'(true)(Unicode编码比较)
//切记
null == 0 (false)
null == "" (false)
null == false (false)
null == undefined (true)
null === undefined (false)
4.逻辑运算符
!
&& (如果左边表达式的值为true,则返回右边表达式的值;如果左边表达式的值为false,则返回左边表达式的值,此时,发生短路)
|| (如果左边表达式的值为true,发生短路,返回左边表达式的值,如果左边表达式的值为false,返回右边表达式的值)
!1(false) !-1(false) !0(true) !""(true) !NaN(true) !undefined(true)
3 > 2 && 4 (4)
3 - 3 && 4 (0)
3 > 2 || 4 (true)
3 - 3 || 4 (4)
5. 三元(三目)运算符 表达式 ? 表达式1 : 表达式2
如果表达式成立，执行表达式1，不成立执行表达式二
6. 特殊运算符： new(创建对象) typeof instanceof
typeof 1 "number"
typeof typeof 1 "string"
var a = new Object;
console.log(a instanceof Object); //true;
typeof一般只能返回如下几个结果：number,boolean,string,function,object,undefined。
instanceof判断是不是某种数据类型
var a = Symbol();console.log(typeof a); //symbol
7. 赋值运算符
简单赋值 : =
复合算术赋值: += -= *= /= %=(取运算符左边变量中的值与运算符右边表达式的值进行相应的算术运算,再将结果赋值给左边的变量)
var a = 3;
a *= 3 + 1; //12
十二.JS内置函数(数据类型的转换)
1. parseInt()
2. parseFloat()
3. Number()
4. isNaN() 判断是否是NaN，是就返回true,否则返回false;
5. eval() :解析字符串,将字符串解析为表达式并返回表达式的值
Day2
一.程序控制的三大结构?
顺序结构/选择结构/循环结构
二.实现选择结构语句有哪些?
1. 三元 ?:
2. if
1> if(){}
2> if(){}else{}
3> if(){}else if(){}……
3. switch
Day3
一.什么是循环?
满足一定条件，（重复）执行一段相同代码块。
二.循环思想(循环三要素)?
1、从哪里开始 2、到哪里结束 3、步长
三.实现循环语句?
1. while
格式 :
表达式1;
while(表达式2){
语句组;
表达式3;
}
2. do while
格式 :
表达式1;
do{
语句组;
表达式3;
}while(表达式2);
3.for循环
for(表达式1;表达式2;表达式3){
语句组;
}
表达式1;
for(;表达式2;表达式3){
语句组;
}
表达式1;
for(;表达式2;){
语句组;
表达式3;
}
四.实现无限循环(死循环) : 让条件永远为真
while(2){}
do while(1)
for(;1;){}
五.break
break :
1.用于switch,终止switch语句
2.用于循环,终止一层循环
continue :
用于循环,终止一次循环
六.循环嵌套
Day4
一.什么是函数
对于需要反复使用的功能代码，将其封装成一个独立的模块，这种功能代码块叫函数。
功能：将代码组织为可利用的单位，可以完成特定的任务并返回数据
二.函数的好处?
可以在同一个程序或其他程序中多次重复使用（通过函数名调用）。
三.如何定义函数?
1.语句定义法
function 函数名([参数]){
语句组;
}
2.表达式定义法
var 函数名 = function([参数]){
语句组;
}
四.如何调用函数?
1.一般调用 : 函数名([参数])
2.递归调用 : 自身内部调用自己
3.事件调用
4.计时器调用
五.函数的参数
1.什么是形参?
定义函数时,所传递的参数
2.什么是实参?
调用函数时,所传递的参数
六.函数的返回值 return
return 后可不跟参数，遇到return函数就停止了。
七.作用域
/*
* 进入作用域，启动解析器
* 一、预解析：寻找一些东西?var function 参数
* a = undefined
* fn = function fn(){ alert(4);}
* 二、逐行解读代码:
* 1.表达式
* a = 3;
*/
alert(a); //undefined
var a = 3;
function fn(){
alert(4);
}
alert(a); //3
/*
* 进入作用域，启动解析器
* 一、预解析：寻找一些东西?var function 参数
* a = 3
* 二、逐行解读代码:
* 1.表达式
* 2.函数调用
*/
alert(a);//function a(){ alert(4);}
var a = 1;
alert(a); //1
function a(){
alert(2);
}
//a();
alert(a); //1
var a = 3;
alert(a); //3
function a(){
alert(4);
}
alert(a); //3
<script type="text/javascript">
/*
* 进入作用域，启动解析器
* 一、预解析：寻找一些东西?var function 参数
* fn = function fn(){...}
* a = 3
* 二、逐行解读代码:
* 1.表达式
* 2.函数调用
*
*
*/
function fn(){
alert('hehe');
}
// alert(a); // a is not defined
</script>
<script type="text/javascript">
var a = 3;
fn();//hehe
</script>
/*
* 进入作用域，启动解析器
* 一、预解析：寻找一些东西?var function 参数
* a = 3
* fn = function (){...}
* 二、逐行解读代码:
* 1.表达式
* 2.函数调用(进入函数作用域)
* 一、预解析 ：找var function 参数
* a = 4
* 二、逐行解读代码
* 1.表达式
* 2.函数调用
*/
alert(a); //undefined
var a = 3;
alert(a); //3
function fn(){
alert(a); //undefined
var a = 4;
alert(a); //4
}
fn();
alert(a); //3
/*
* 进入作用域，启动解析器
* 一、预解析：寻找一些东西?var function 参数
* a = 3
* fn = function (){...}
* 二、逐行解读代码:
* 1.表达式
* 2.函数调用(进入函数作用域)
* 一、预解析 ：找var function 参数
* a = 4
* 二、逐行解读代码
* 1.表达式
* 2.函数调用
*/
alert(a); //undefined
var a = 3;
alert(a); //3
function fn(a){ //a = 3
alert(a); //3
var a = 4;
alert(a); //4
}
fn(a);
alert(a); //3
/* 作用域链
* 进入作用域，启动解析器
* 一、预解析：寻找一些东西?var function 参数
* a = 4
* fn = function (){...}
* 二、逐行解读代码:
* 1.表达式
* 2.函数调用(进入函数作用域)
* 一、预解析 ：找var function 参数
*
* 二、逐行解读代码
* 1.表达式
* 2.函数调用
*/
alert(a); //undefined
var a = 3;
alert(a); //3
function fn(){
alert(a); //3
a = 4;
alert(a); //4
}
fn();
alert(a); //4
/* 作用域链
* 进入作用域，启动解析器
* 一、预解析：寻找一些东西?var function 参数
* fn = function (){...}
* a = 4
* 二、逐行解读代码:
* 1.表达式
* 2.函数调用(进入函数作用域)
* 一、预解析 ：找var function 参数
*
* 二、逐行解读代码
* 1.表达式
* 2.函数调用
*/
function fn(){
a = 4;
alert(a); //4
}
fn();
alert(a); //4
Day5
一.递归函数
1.本质:实现了循环
function fic(n){
if(n == 1){
return 1;
}else{
return n * fic(n - 1);
}
}
alert(fic(5));
二.面向对象
物质(对象)：一切具有本质特征和行为的事物。
1.如何创建对象? 字面量(json)
var obj = {
name : '张志林',
age : 18
}
2.new Object()
3.构造函数
4.如何访问对象中的属性和方法?
对象.属性 对象.方法()
对象['属性'] 对象['方法']()
Day六
一.什么是数组?
存储一组或一系列数据容器.
二.数组好处?
为了解决大量相关数据的存储和使用的问题。
三.下标
从0开始。
四.如何定义数组?
1.字面量(json)
var arr = [];
2.构造函数的方式
var arr1 = new Array();
五.属性: length : 长度
六.方法: 增,删,改,截,拼,复,排,转
1.增
前增: unshift()
返回值:增加后数组的长度
影响: 是
后增: push()
返回值:增加后数组的长度
影响: 是
2.删
前删: shift()
返回值:被删除的元素
影响: 是
后删: pop()
返回值:被删除的元素
影响: 是
3.改
splice(start,length,增加的元素,……);
返回值: 被删除的元素数组
影响: 是
4.截
slice(start,end)
返回值: 截取到的新数组
影响: 否
var arr = [1,2,3,4,5,6];
console.log(arr.slice(-5,-2)); //2,3,4 //数组循环了
5.拼
concat()
返回值:拼接后的新数组
影响:否
6.复
复制克隆，好几种方法。
其中三种如下，ECMA5还有三种
var arr = [1,2,3,4];
var list = arr;
list[0] = 9;
console.log(arr,list);
var list = [];
for(var i = 0,len = arr.length;i < len;i ++){
一、 list[i] = arr[i];
// list.push(arr[i]);
}
二、 list = arr.slice(0);
三、 list = arr.concat();
ECMA5的复制数组
var arr = [1,2,3,4,5];
var list = [];
1、 arr.forEach(function(value){
list.push(value);
})
2、 var list1 = arr.map(function(value){
return value;
})
3、 var list2 = arr.filter(function(value){
return value;
})
console.log(arr,list,list1,list2);
7.排
1.reverse()倒序
2.sort()按照字符编码的顺序进行排序
sort(function(a,b){return a - b;})从小到大按数字排
sort(function(a,b){return b - a;})从大到小按数字排
返回值: 返回排序后的数组
影响: 是
8.转
1.toString() :将数组转为字符串,用逗号隔开
将十进制整数转为其它进制
2.join()
返回值:返回字符串
影响: 否
数组方法例题：
var arr = [3];
//有且仅有一个正整数作为参数时，表示数组长度，负数或小数报错，其它情况表示数组中的元素。
// var list = new Array(3,3);
// console.log(arr[0]);
// console.log(list[0]);
// var arr = [1,2,3,4,5,6];
// console.log(arr.slice(-5,-2)); //2,3,4
// console.log(arr.slice(5,1)); //[] //空数组
// var arr = [1,2,3,4,5,6];
// arr.push(['a','b','c']); //[1,2,3,4,5,6,['a','b','c']];
//// console.log(arr.length);
// var list = arr.concat(['a','b','c']); //[1,2,3,4,5,6,'a','b','c'];
// console.log(list);
var arr = [1,2,3,4];
// var list = arr;
// list[0] = 9;
// console.log(arr,list); //[9,2,3,4] //[9,2,3,4] //地址相同，共用一个数组，改变一个都改变了
// 数组复制
// var list = [];
// for(var i = 0,len = arr.length;i < len;i ++){
// list[i] = arr[i];
//// list.push(arr[i]);
// }
// list = arr.slice(0);
// list = arr.concat();
// 数组排序
// var arr = [5,2,100,3,6];
// console.log(arr.sort(function(a,b){return a - b}));
// console.log(arr.sort(function(a,b){return b - a}));
// console.log(typeof arr.toString());
// var num = 300;
// console.log(num.toString(2)); //二进制
// console.log(num.toString(8)); //八进制
// console.log(num.toString(16));//十六进制
// 获取（min，max）的随机数
// function fnRand(min,max){
// return Math.floor(Math.random() * (max - min + 1) + min);
// }
// alert(fnRand(0,0xffffff).toString(7));
七.冒泡排序/选择排序
冒泡排序
从大到小：
function mao(arr){
for(var i = 1;i < arr.length;i ++){
for(var j = 0;j < arr.length - i;j ++){
if(arr[j] < arr[j + 1]){
var t = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = t;
}
}
}
return arr;
}
从小到大：
function mao1(arr){
for(var i = 1;i < arr.length;i ++){
for(var j = arr.length - 1;j >= i;j --){
if(arr[j] < arr[j - 1]){
var t = arr[j];
arr[j] = arr[j - 1];
arr[j - 1] = t;
}
}
}
return arr;
}
选择排序
从小到大：
function xuan1(arr){
for(var i = 0;i < arr.length - 1;i ++){
for(var j = i + 1;j < arr.length;j ++){
if(arr[j] < arr[i]){
var t = arr[j];
arr[j] = arr[i];
arr[i] = t;
}
}
}
return arr;
}
数组去重
方法一、 function norepeat(arr){
var list = [];
for(var i = 0,len = arr.length;i < len;i ++){
if(list.indexOf(arr[i]) == -1){
list.push(arr[i]);
}
}
return list;
}
// alert(norepeat([2,3,3,2,4,3,2]));
//方法二、 alert([...new Set([2,3,3,2,4,3,2])]);
八.堆/栈(值传递与引用传递)
Day7
一.ES5扩展方法
1.严格模式
想在哪个作用域下，使用严格模式，在哪个作用域下，写下面这句话。
"use strict"
2.数组扩展方法
1> indexOf()
2> lastIndexOf()
3> forEach(function(value,index,array){})
4> map(function(value,index,array){return ...})
5> reduce(function(pre,next,index,array){return ....})
6> filter(function(value,index,array){return ...})
例题
var arr = [1,2,3,4,5];
var list = [];
1、 arr.forEach(function(value){
list.push(value);
})
2、 var list1 = arr.map(function(value){
return value;
})
3、 var list2 = arr.filter(function(value){
return value;
})
console.log(arr,list,list1,list2);
//数组复制的三种方法
二.String
1.如何定义字符串?
var str = "";
var str1 = new String();
2.属性: length
3.方法: 查/替/截/转
查: indexOf()
lastIndexOf()
charAt()
charCodeAt()
String.fromCharCode()
替: replace()
将字符串中的一些字符替换为另外一些字符串。
返回一个替换后的新字符串，不会改变原字符串。
截: substring(start,end)
slice(start,end)
substr(start,length)
扩展：substr(start,length):从指定的位置开始截取指定长度的字符串。
转:
toUppercase()
toLowercase()
split()
var str = "how do you do";
var subStr = str.substr(4,2);
alert(subStr); //do
var sub = str.substring(5,1);
alert(sub); //ow d
三.中文范围
GB2312
GB18030
4e00-9fa5
输出所有汉字：
var str = '';
for(var i = 19968;i <= 40869;i ++){
str += String.fromCharCode(i) + ' ';
}
document.write(str);
Day8
一.Math
Math.PI
Math.abs()
Math.round()
Math.floor()
Math.ceil()
Math.max()
Math.max.apply(null,[])
Math.min.apply(null,数组名)
Math.random() 0 <= n < 1
Math.random() * (最大值 - 最小值 + 1) + 最小值
Math.pow()
Math.sqrt()
console.log(Math.round(-3.5));//-3
console.log(Math.round(-3.5000001));//-4
console.log(Math.max.apply(null,[1,2,3,4,5]));//5
console.log(Math.min.apply(null,[1,2,3,4,5]));//1
Math.random() * (5 + 1) + 5 //5-10的随机数
二.Date
1.如何创建日期对象
new Date()
new Date(year,month,date)
new Date(year,month,date,hour,minute,second)
2.获取
getFullYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
getTime() 获取时间戳
toLocaleString()
toLocaleDateString()
toLocaleTimeString()
2.设置set
<script type="text/javascript">
var date = new Date();
console.log(date.toLocaleString());
console.log(date.toLocaleDateString());
console.log(date.toLocaleTimeString());
</script>
Day9
一.BOM
1.顶级对象(宿主对象) window
2.哪些子对象?
window
graph TB
window-->document
window-->history
window-->location
window-->frames
window-->screen
window-->navigator
document history location frames screen navigator
3.如何跳转页面?
window.location
location.href
4.如何获取操作系统和浏览器的信息
navigator.userAgent
5.方法
alert()
confirm()
prompt()
6.计时器
setTimeout()
setInterval()
二.DOM
1.如何获取页面元素?
1> document.getElementById('id名');
2> document.getElementsByTagName('标签名');
3> document.getElementsByClassName('类名');
4> document.getElementsByName('name名');
5> document.querySelector('选择器');
6> document.querySelectorAll('选择器');
7> document.documentElement 获得html节点
8> document.body 获得 body节点
2.如何创建元素节点?
document.createElement()
3.如何创建文本节点?
document.createTextNode()
4.如何追加节点到页面?
appendChild()
5.如何修改节点 ?
replaceChild(new,old)
6.如何克隆节点?
cloneNode()
7.如何删除节点?
removeChild()
8.常见节点对象有哪些?
元素节点 属性节点 文本节点
nodeName: 标签名 属性名 #text
nodeType: 1 2 3
nodeValue: null 属性值 文本内容
Day10
DOM
一.设置或访问元素节点中的属性(自定义属性)
1.获取自定义属性 getAttribute()
2.设置自定义属性 setAttribute()
3.删除属性 removeAttribute()
二.outerHTML/innerHTML/textHTML
三.childNodes/children
1.去除空白文本节点
function removeSpace(node){
var childs = node.childNodes;
for(var i = 0;i < childs.length;i ++){
if(childs[i].nodeType === 3 && /^\s+$/.test(childs[i].nodeValue)){
node.removeChild(childs[i]);
}
}
return node;
}
四.高级选项
parentNode : 父节点
previousSibling : 前一个兄弟节点
nextSibling : 后一个兄弟节点
firstChild: 第一个子节点
lastChild : 最后一个子节点
parentElementNode
previousElementSibling
nextElementSibling
firstElementChild
lastElementChild
五.插入
insertBefore(新节点,指定的旧节点)
Day11
一.什么是事件对象?
当一个对象触发了所绑定的事件，所发生的一切详细信息都将保存在一个临时的地方，这个地方就叫做事件对象(相当于飞机上的黑匣子)。
二.如何获取事件对象?
1.ie : window.event
2.标准浏览器 : 给事件处理函数传递的第一个参数
3.兼容: 形参 || window.event
三.如何获取鼠标的编码值? event.button
1.标准浏览器 : 0 1 2
2.IE : 1 4 2
鼠标按钮兼容:
function getButton(evt){
var e = evt || window.event;
if(evt){
return e.button;
}else if(window.event){
switch(e.button){
case 1 : return 0;
case 4 : return 1;
case 2 : return 2;
}
}
}
四.如何获取鼠标的各种坐标值?
1.相对坐标值 : event.offsetX/event.offsetY
2.可视区坐标值: event.clientX/event.clientY
3.绝对坐标值 : event.pageX/event.pageY
滑动轮高度 scrollTop = document.documentElement.scrollTop || document.body.scrollTop
页面高度 event.pageY = event.clentY + scrollTop
document.onscroll = function(evt){
var e = evt || window.event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop)
}
4.屏幕坐标值: event.screenX/event.screenY
var oDiv = document.querySelector('#box');
oDiv.onclick = function(evt){
var e = evt || window.event;
console.log("offsetX:" + e.offsetX + '\noffsetY:' + e.offsetY);
console.log("clientX:" + e.clientX + '\nclientY:' + e.clientY);
console.log("pageX:" + e.pageX + '\npageY:' + e.pageY);
console.log("screenX:" + e.screenX + '\nscreenY:' + e.screenY);
}
一.clientX/clientY属性介绍
鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,
即是以浏览器滑动条此刻的滑动到的位置为参考点,不随滑动条移动 而变化.
二.offsetX/offsetY属性介绍
鼠标点击位置相对于点击(鼠标所在对象区域)的坐标位置
三.pageX/pageY属性介绍
鼠标在页面上的位置,从页面左上角开始,
即是以页面为参考点,随滑动条移动而变化
四.扩展：screenX和screenY属性
鼠标点击位置到windows屏幕窗口的坐标位置
五.事件流(事件捕获——事件目标——事件冒泡)
兼容阻止冒泡
document.getElementById("btn").onclick = function(evt){
evt = evt || window.event;
alert(this.nodeName);
// evt.stopPropagation();//IE不兼容
// evt.cancelBubble = true;//IE
evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
}
六.键盘事件
onkeydown/onkeyup keyCode
onkeypress
event.keyCode || event.charCode || event.which
Day12
一.如何阻止事件的默认行为?
1.右键菜单 : oncontextmenu return false
2.超链接:
event.preventDefault? event.preventDefault() : event.returnValue = false
var oA = document.getElementById("aa");
oA.onclick = function(evt){
evt = evt || window.event;
evt.preventDefault();
evt.returnValue = false;
}
3.拖拽 : ondragstart return false
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
img{
width: 100px;
height: 100px;
position: absolute;
left :150px;
}
</style>
</head>
<body style="height: 5000px;">
<div id="box">
</div>
<img src="img/1.jpg" id="img1"/>
<script type="text/javascript">
drag('box');
drag('img1')
function drag(id){
var ele = document.getElementById(id);
ele.onmousedown = function(evt){
var e = evt || window.event;
var disX = e.offsetX;
var disY = e.offsetY;
document.onmousemove = function(evt){
var e = evt || window.event;
ele.style.left = e.pageX - disX + 'px';
ele.style.top = e.pageY - disY + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
}
//去掉拖拽的默认行为
document.ondragstart = function(){
return false;
}
}
}
</script>
</body>
二.添加事件监听器
function addEventListener(obj,event,fn,boo){
if(obj.addEventListener){
obj.addEventListener(event,fn,boo);
}else{
obj.attachEvent('on' + event,fn);
}
}
三.移除事件监听 器
function removeEventListener(obj,event,fn,boo){
if(obj.removeEventListener){
obj.removeEventListener(event,fn,boo);
}else{
obj.detachEvent('on' + event,fn);
}
}
四.事件委托/事件代理
1.事件委托的优点:提高性能
2.原理 : 事件冒泡
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<h2>hhhh222</h2>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul')[0];
oUl.onmouseover = function(evt){
var e = evt || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toUpperCase() === 'LI'){
target.style.background = 'red';
}
}
</script>
</body>
五.事件
onclick
ondblclick
onmousedown
onmouseup
onmouseover : 移入事件
onmouseout :移出事件
onmouseenter : 移入事件(默认阻止事件冒泡)
onmouseleave : 移出事件(默认阻止事件冒泡)
onmousemove
onkeydown
onkeyup
onkeypress
onload
onblur
onfocus
onchange
onscroll
onresize
oncontextmenu
ondragstart
onsubmit
六.拖拽
七. offset
offsetWidth : width + padding + border
offsetHeight : height + padding + border
offsetLeft : 相对于父节点的left值
offsetTop : 相对于父节点的top值
Day13
一.什么是cookie?
存储在浏览器的文档
在本地的客户端的磁盘上以很小的文件 形式保存数据。
二.如何创建cookie?
document.cookie = "key=value;[expires=日期对象;path='/']"
三.cookie的特点:
1.一个cookie的大小不超过4KB
2.一个域中的cookie数量在50条左右
3.cookie存在一定的风险
Day14
一.什么是正则表达式?
匹配字符的一组规则
二.如何定义正则表达式?
1. /正则表达式/标志位
2. new RegExp("正则表达式",'标志位')
3.元字符 : 三三二三个一
三: {} [] ()
X{} : 表示括号前的一个或一组字符连续出现的次数.
X{m} : 表示括号前的一个或一组字符连续出现m次.
X{m,} : 表示括号前的一个或一组字符连续出现m至无限次.
X{m,n} : 表示括号前的一个或一组字符连续出现m至n次.
[] : 表示范围 (可以把正则的符号放进[]中解析为字符);
[\u4e00-\u9fa5]
() : 表示组
三: * + ?
X* : {0,}
表示*前的一个或一组字符连续出现0至无限次.
X+ : {1,}
表示+前的一个或一组字符连续出现1至无限次.
X? : {0,1}
表示?前的一个或一组字符连续出现0至1次.
二 : ^ $
^ : 用于正则的开头 : 表示定头
用于[]的开头: 表示取反 [^0-9]
$ : 表示定尾
三个一: . | \
. : 表示模糊匹配任意一个字符
| : 表示或者
\ : 转义符 (将正则的符号放在\后,解析为字符串);
\d : 数字
\D : 非数字
\s : 空白符
\S : 非空白符
\w : 字母数字下划线
\W : 非字母数字下划线
\b : 表示边界
三.标志位
g : 表示全局
i : 不区别大小写
四.正则的方法
1.test() 返回boolean
2.exec() :返回数组 null
五.字符串的方法
1.match() :返回数组 null
2.search() : 返回下标值, -1
3.replace()
六.exec与match的区别
exec是正则调用,参数是字符串
match是字符串调用,参数是正则表达式
<script type="text/javascript">
var str = 'how do you do';
var re = /o/;
console.log(re.exec(str));
console.log(str.match(re));
/*
[o]
[o]
*/
var str = 'how do you do';
var re = /o/g;
console.log(re.exec(str));
console.log(str.match(re));
/*
[o]
[o,o,o,o]
*/
//全局匹配时,exec无效
var str = 'how do you do';
var re = /(o).*(o)/;
console.log(re.exec(str));
console.log(str.match(re));
/*
[ "ow do you do", "o", "o" ]
[ "ow do you do", "o", "o" ]
*/
//()有几个就代表有几个相应的匹配个数，整体也是一个
var str = 'how do you do';
var re = /(o).*(o)/g;
console.log(re.exec(str));
console.log(str.match(re));
/*
Array(3) [ "ow do you do", "o", "o" ]
Array [ "ow do you do" ]
*/
Day15
一.ES6
1. bind()/call()/apply()
bind() : 返回一个函数
call()/apply() :返回一个对象
2. JSON : 网络数据传输格式
JSON是一种基于文本的数据交换方式，或者叫做数据描述格式。
JSON的优点：
- 基于纯文本，跨平台传递极其简单
- JS原生支持，后台语言几乎全部支持
- 轻量级数据格式，占用字符数量极少，特别适合互联网传递
- 可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的
- 容易编写和解析，当然前提是你要知道数据结构
1.[]
2. {"key" : "value","key" : "value"}
//原生对象 : {key : 'value',"key" : "value",key : "value"}
【注】
JSON 的健和值必须加双引号，数字可不加，不可加单引号。
一个JSON中只能有一个JSON数据。[ ]
可以在[ ] 中写多个 { }。
3. JSON.parse()/JSON.stringify() IE8以下不兼容
JSON.parse() : 将json字符串转为json对象
JSON.stringify() :将json对象转为json字符串
var str = '{"name" : "张志林","age" : 18}';
//转为json对象
//eval() : 存在风险
// var json = eval('(' + str + ')');
// console.log(json.name);
var json = JSON.parse(str);
json.address = "青岛";
//转为json字符串
str = JSON.stringify(json);
console.log(str);
4.let/const
1> let声明的变量不能做变量提升
2> 同一个作用域中不能重复声明一个变量
3> let声明,会产生块级作用域
注: for循环有两个作用域,for循环本身是一个块级作用域,for循环的{}又是for循环的子级作用域
4> let声明的全局变量不再是window的属性
const 好处: 一改全改
【注】const
使用const命名是为了当有大量重复常量时，方便修改
常量要求全大写，
当常量是数组时，可以修改数组的元素，地址不可修改。
5.变量的解构赋值
[] // 返回一个数组
可以直接对应赋值;
++交换变量的值[x, y] = [y, x];++
上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
{} // 返回一个对象
++从函数返回多个值,传参可不按顺序++
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
alert(a);
// var a = 3;
//// alert(b);
// let b = 4;
// var a = 5;
// var a = 6;
// b = 8;
// {
// let a = 3;
//
// }
// alert(a);
// for(let i = 1;i < 5;i ++,console.log(i)){
// let i = 8;
// console.log(i);
// }
// const G = 10;
// const ARR = [1,2,3,4];
// ARR[0] = 10;
// console.log(ARR[0]);
// let a = 3;
// alert(window.a);
// let b = 3 * G;
// let [a,b,c] = [1,2,3];
// let [q,[w,[e],r],t] = [1,[2,[3],4],5];////不写的话显示,undefined
// [a,b] = [b,a];
// console.log(a,b,c);
// let {a,b=9,c} = {c : 8,a : 2};
// console.log(a,b,c);
function fn({a = 1,b = 2,c = 3}){
return [a,b,c];
}
let [x,y,z] = fn({a : 3,c : 5,b : 4});
console.log(x,y,z);
6.字符串的扩展方法
1> includes() :
判断子串是否在父串中包含,如果有,返回true,没有,返回false
2> startsWith():
判断子串是否在父串的开头部分,如果在,返回true,不在,返回false
3> endsWith() : 判断子串是否在父串的结尾部分,如果在,返回true,不在,返回false
4> repeat() :
重复字符串
注: 如果<= -1 报错
如果是小数 : 自动取整
如果是字符串:自动转为数字,如果转不了数字的,转为NaN,NaN按0算
var str = "how do you do";
console.log(str.includes('do',str.length));
console.log(str.startsWith('do',4));
console.log(str.endsWith('do',5));
7.生成器函数:解决异步产生的问题
异步:同时进行
同步:执行完一个,再执行一个
//生成器函数
*指针函数,按照指针一步一步执行,每次要点一次 fn().next()
function * fn(){
yield setTimeout(()=>{
alert('1');
},3000);
yield setTimeout(()=>{
alert('2');
},2000);
yield setTimeout(()=>{
alert('3');
},1000);
}
var me = fn();
console.log(me.next())
8.箭头函数 =>
++唯一好处: this自动指向所在函数外部的对象++
var fn = ()=>{
// var a = 3;
// var b = 3;
// return a + b;
// }
// alert(fn());
// var fn1 = (a,b)=>a + b;
// alert(fn1(3,4));
document.onclick = function(){
//alert(this);
// var that = this;
setTimeout(()=>{
alert(this);
},5000)
}
9.set
1>自动去重
let set = new Set([1,2,1,2,3,2,1,1,4]);//构造一个新的set
console.log(set.size);//获取集合长度
console.log([...set]);//转成数组
2>添加元素
set.add('a');
3>删除元素
set.delete(1);
4>判断是否包含某个元素
console.log(set.has(2));
5>清空整个set
// console.log(set.clear());
// console.log(set);
6>遍历
//keys
//values
//entries
//forEach()
for(let key of set.keys()){
console.log(key);
}
for(let key of set.values()){
console.log(key);
}
for(let [key,value] of set.entries()){
console.log(key,value);
}
set.forEach(function(value,key,set){
console.log(key +'=>' + value);
})
10.
数组
set
原生 对象
map
// var a = {x : 2},b = {x : 3},c = {};
// alert(a);
// c[a] = 7;// '[object Object]'
// c[b] = 8; //'[object Object]'
// console.log(c);
// var obj = {};
// obj[[]] = 3;
// obj[[]] = 4;
// console.log(obj);
//原生对象：所有key默认都会自动 转为字符串
//map {name : '张三',[] : '1',[] : '2'}
let map = new Map([
[1,2],
[[],3],
[[],4],
[{},5],
[{},6],
['a',7]
]);
// console.log(map);
// alert([] == []);
// console.log(map.size);
//1.添加元素
map.set('b',8).set('c',9);
//2.访问元素
// console.log(map.get('b'));
//3.删除元素
// console.log(map.delete('b'));
// console.log(map.delete([]));
//4.清除map中所有的元素
// map.clear();
//5.判断是否包含某个key的value
// console.log(map.has('c'));
// console.log(map);
//6.遍历map
//keys
//values
//entries
//forEach()
for(let key of map.keys()){
console.log(key);
}
for(let value of map.values()){
console.log(value);
}
for(let [key,value] of map.entries()){
console.log(key,value);
}
map.forEach(function(value,key,map){
console.log(key,value);
})
11.Symbol : 保证变量中的值是唯一的.
var str1 = Symbol('hello');
var str2 = Symbol('hello');
// console.log(str1 == str2);
// console.log(typeof str1);
var obj = {};
obj[str1] = 1;
obj[str2] = 2;
console.log(obj);
12.class extends
// Father
/* function Father(name,age){
this.name = name;
this.age = age;
this.showName = function(){
return this.name;
}
} */
/*
* 对象（物质）：一切具有本质特征和行为的事物。
* 类 ： 具有相同属性和方法的一类对象
* 属性 ： 本质特征
* 方法 ： 行为
* 属性与变量
* 方法与函数
*/
class Father{
//默认的方法
//构造器
constructor(name,age){
//属性
this.name = name;
this.age = age;
}
showName(){
return this.name;
}
showAge(){
return this.age;
}
}
class Son extends Father{
constructor(name,age){
//调用父类的构造器方法
super(name,age); //超类，基类，父类
}
}
var son = new Son('张三',18);
console.log(son.name);
console.log(son.showName());
class例子,拖拽
html页面
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 5000px;
}
#fa{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#so{
width: 100px;
height: 100px;
background: green;
position: absolute;
left: 130px;
}
</style>
</head>
<body>
<div id="fa">
父类：无边界拖拽
</div>
<div id="so">
子类：有边界拖拽
</div>
<script type="text/javascript" src="js/drag.js" ></script>
<script type="text/javascript" src="js/Subdrag.js" ></script>
<script type="text/javascript">
new Drag('fa');
new Subdrag('so');
</script>
</body>
</html>
父类
class Drag{
constructor(id){
this.ele = document.getElementById(id);
this.ele.onmousedown = function(evt){
this.fnDown(evt);
}.bind(this);
}
fnDown(evt){
var e = evt || window.event;
this.disX = e.offsetX;
this.disY = e.offsetY;
document.onmousemove = (evt)=>{
this.fnMove(evt);
}
document.onmouseup = this.fnUp;
}
fnMove(evt){
let e = evt || window.event;
this.ele.style.left = e.pageX - this.disX + 'px';
this.ele.style.top = e.pageY - this.disY + 'px';
}
fnUp(){
document.onmousemove = null;
}
}
子类
class Subdrag extends Drag{
constructor(id){
super(id);
}
fnMove(evt){
let e = evt || window.event;
let left = e.pageX - this.disX;
let top = e.pageY - this.disY;
//设置边界
if(left <= 0){
left = 0;
}else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
left = document.documentElement.clientWidth - this.ele.offsetWidth;
}
if(top <= 0){
top= 0;
}else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
top = document.documentElement.clientHeight - this.ele.offsetHeight;
}
this.ele.style.left = left + 'px';
this.ele.style.top = top + 'px';
}
}
