javaScript
1、背景介绍
为了提高网速而由网景公司的布兰登·艾奇来解决,他用10个工作日设计了js
1、js
标准
ECMAScript
是一个标准,而JavaScript是语言
2、js
的基础概念
1、什么是js
一个支持面向对象的、跨平台的、脚本语言,依赖与html
才能实现。
2、应用场景:
- 表单验证:规范用户输入数据,和后台数据进行交互 2. 网页特效:给页面内容加行为,让页面动起来 3. 游戏开发:飞机大战、打砖块
js的组成示意图 - 物联网:https://zhuanlan.zhihu.com/p/45509947
- h5,是html的下一个版本,很强大,就目前而言,我们知道的h5只是一些标签,并不能完美的展示出他的强大 之处,加入js后,才能激活这些标签深层次的功能。
3、js
的组成
ECMAScript
:核心
BOM
:文档对象模型,提供了访问和操作网页类容的方法和接口
DOM
:浏览器对象模型,提供了与浏览器交互的方法和接口
3、js
的基础使用
1、js
的写入位置
1、标签:script
<body>
<script>
//js代码的书写位置(建议)
</script><-这是表示结束的标签,不能乱写,除了用转译 符->
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript。</p>
</noscript>
</body>
- 传统的标准是写在head里面
- 实际上style和script写在哪里都是可以的
- 现代的web是放在
body
里面 - 但是出现了
require.js
后都大部分写在head里面,实现异步加载以及依赖关系处理 - 6个属性:⭐
async:
(可选)表示不影响其他操作立即下载脚本(异步操作)(填写布尔)charset
(可选) 表示通过src
属性指定的代码的字符集。大多浏览器忽略了defer
:(可选) 表示延迟到文档全部解析完显示后执行(属性==属性值)src
(可选) 表引入的js
文件地址type
:(可选) 可以看出是language属性,即脚本语言属性。
异步脚本一定会在页面的load事件之前执行,但可能在事件触发前后执行
实现XHTML
的识别
<script>
//<![CDATA[
//]]>
</script>
2、引入js
文件
软件使用外部文件,方便维护,缓存加载快,未来趋势
<script src="main.js"></script>
3、注释
//js的一行注释
/*
js的多行注释
*/
2、严格模式
在js
代码顶部添加“user strict”
或者在函数内部的顶部添加
function (){
"user strict";
//函数体
}
在严格模式下,ECMAScript3
中的一些不确定就会得到处理,对某些不安全的操作抛出错误
不能匿名生产变量,函数没有this指向,不允许删除变量或对象,不允许删除函数,形参不能从重名
3、js
的输出
-
文档对象熟成
document.write("hollo world"); //输出标签元素类容 document.write("<b>文字加粗</b>"); document.write("<i>"); document.write("文字倾斜"); document.write("</i>");
-
弹窗的形式显示
alert("hollo world");
-
弹出判断框显示
confirm("are you sure");
-
弹出输入框显示
prompt("hollo world");
-
调试窗口输出
console.log("hollo world");
4、变量的定义
ECMAScript
的变量是松散类型的
1、var定义变量
var x;//var关键字后面是表示符或变量名。
/*表示符的规则:字母、数字、下划线组成,
不能用数字开头---驼峰命名法
不能与关键字和保留字冲突
*/
var a=12;//赋值
console.log(a);
var a,b;//一次定义多个变量 声明
var c=1,b=2;
e= 13;//隐式声明
console.log(e);
2、let定义
let a=12;//只能在所在的范围域内使用
3、常量定义
const a=1;
5、变量的类型
-
数字类型:
var num=1;
-
字符串类型:
var str="hollo world";
-
布尔类型:
var t="true",f="false";
-
未定义类型:
var under="undefined";
-
空对象类型:
null
; -
对象类型:
-
特殊形式:
function
,这个特殊的类型var arr=[1,2,3]; var age=12; var obj={ name:"obj", sex:"男", age }
得注意的是:数组和对象都是对象类型的
前5个为简单类型或者是基础类型,后一个为复杂类型又叫引用类型。
误区:
null==undefined
返回的是true,但这两个完全不一样。 -
查看数据类型:
console.log(typeof 表示符)
typeof
是一个操作符不是函数
1、Boolean类型
操作符:Boolean
数据类型 | 转换为true值 | 转换为false值 |
---|---|---|
Boolean | true | false |
Sreing | 任何字符串 | ”“(空字符串) |
Number | 任何非零数值 | 0和NaN |
Object | 任何对象 | null |
Undefined | n/a | undefined |
2、Number类型
1、进制
var a = 0b10;//二进制
var a = 010;//八进制
var b = 0xA;//16进制
var c = 0xb;//小写字母或大写字母都可以,也为16进制
console.log(a); //8
console.log(b); //10
console.log(c); //b
2、科学计数法
var num = 5e+5; //5乘以10的5次方 (变大)
var num = 3e-3;//3乘以10的-3次方(小数)
3、浮点精度丢失
这是基于IEEE754数值的浮点计算的通病
var a=0.1+0.2;console.log(a);//结果为0.30000000000000004
var b=(0.1*10+0.2*10)/10;console.log(b);//解决精度丢失
4、范围
[5e-324,1.797e+0]
超过就是-Infinity(负无穷)
和Infinity(正无穷)
无穷是无法进行计算的
5、NaN
例:
var a = 1;
var b = '二';
var c = a - b;
console.log(c); // NaN 不是一个数字
console.log(typeof c); // NaN: not a number 不是一个数字
在js
中,NaN
用来表示一个非数字的特殊值,当发现无法进行运算时,js
不会报错,而是会返回一个NaN
NaN
的注意事项:
NaN
的类型是number类型的,表示一个非数字NaN
不等于任何值,包括NaN
本身- 通过
isNaN()
可以判断是否是一个数字,返回false的时候,表示是一个数字
6、NaN
的运用
var a = 123;
var b = "abc";
console.log(isNaN(a)); // false
console.log(isNaN(b)); // true
console.log(isNaN(c)); // true
isNaN()
函数用与检测数据是否为非数字类型
7、转换
操作符:Number
3、字符类型
1、转义字符
console.log("\"");
/*
单引号不能包单引号,只能包双引号,就是自己不能包自己。
实在不行用反斜杠\转义字符(\)
*/
符号 | 意义 |
---|---|
\n | 换行 |
\t | 制表符 |
\b | 空格 |
\ | 斜杠 |
‘’ | 单引号 |
‘ | 双引号 |
2、字符拼接
var lang="Java";lang+="Script";console.log(lang);
var lang="num";lang+=1;console.log(lang);
3、toString()
除了null和undefined其他类型都可以使用toString
转换成字符串
但对象转字符串输出为[object Object]
var str=true.toString();
特殊运用
十进制转其他进制,输出结果为字符串
let num=10;
console.log(num.toString());//"10"
console.log(num.toString(2));//"1010"
console.log(num.toString(8));//"12"
console.log(num.toString(10));//"10"
console.log(num.toString(16));//"a"
4、String()
和toString()
概念相同,用法不同
var str=String(true);
5、模板字符串
let a=97;
let str=`a=${a}`;
console.log(str);//a=97;
//不仅如此,还能将空格输出
console.log(`a b`);//a b
4、object类型⭐⭐
1、概念⭐⭐⭐
ECMAScript
中的对象其实就是数据和功能的集合,凡是new出来的变量类型都是对象。
2、对象的创建
let obj=new Object();//不建议省略括号
let arr=new Array();//创建一个数组对象
3、属性和方法⭐
每一个object类型的数据都具有一下的属性和方法(宿主对象DOM&BOM
除外)
-
constructor
:保留着用于创建当前对象的函数,即构造函数(constructor)就是Object(); -
hasOwnProperty(propertyName)
:用于检测给的的属性在当前的实例中是否存在,作为参数的属性名(propertyName)
必须以字符串形式指定,如obj.hasOwnProperty("name")
-
isPrototypeOf(object)
:用于检测传入的对象是否是当前的原型 -
propertyIsEnumerable(propertyName)
:用于检测给定的属性是否能够使用for-in
语句来枚举 -
toLocaleString()
:返回对象的字符串表示; -
toString()
:返回对象的字符串表示; -
valueOf()
:返回对象的字符串、数值或布尔值显示❓❓❓5、6都是输出
[object Object]
6、取整保留
1、parseInt
取整关键词
1.1、小数取整
var a=89/5;
c=parseInt(a);//c=a的取整
1.2、取字符串最前面的数
正常情况
var a="123abc"
var c=parseInt(a);//c=a前面的数
特殊情况
var a="a12a12"
var c=parseInt(a);//c=NaN
2、parseFloat
取浮点
var a="3.14";
var b=parseFloat(a);
效果不明显。
3、取小数后几位toFixed
(位数):
var a=3.141592453589;
var c=a;
console.log(c.toFixed(2))
//既保留两位小数
//输出的结果为字符串
//输出的是字符串
7、运算操作符
1、赋值“=”
var a=1;
a=10;console.log(a);
2、四则运算:
+ - * / ++ -- += -= *= /=
特殊使用
var str="10.1";
str=+str;console.log(str);//此时将str转换成Number类型,减号也能这样使用;
除+
外,其他的均可将包含有效数字字符串转换成数字类型
3、字符运算(字符串的拼接)
var a="hollo",b="world",c=a+b;console.log(c);//holloworld
var a="a的值=",b=1,c=a+b;console.log(c);//a的值=1
4、比较运算(关系运算)
> < >= <= == ===
三元运算:a>b?a:b
-
== (判断值是否相对,不判断也不管是不是同类型)
-
=== (先判断是否同类型,再判断值是否相等)
var a=12,b="12"; console.log(a==b,a===b)//true false
5、逻辑运算
& | ! ~ && ||
按位非
var num1=25;
var num2=~num1;
console.log(num2);//-26
按位与
var result=25&3;console.log(result);//1
按位或
var res=25|3;console.log(res);//27
按位异
var res=25^3;console.log(res);//26
左移
var oldValue=2;//二进制的10
var newValue=oldValue << 5;//二进制的1000000,十进制的64;
有符号的右移动
var oldValue=64;//二进制的1000000
var newValue=oldValue >> 5;//二进制的10,十进制的2;
无符号的右移动
var oldValue=64;//二进制的1000000
var newValue=oldValue >>> 5;//二进制的10,十进制的2;
var oldValue=-64;
var newValue=oldValue >> 5;
短路操作⭐⭐
var res=true&&false;console.log(res);
var res=true||false;console.log(res);
可以用来解决兼容问题
8、语句
1、if-else
语句:略
2、do-while
语句
var i = 0;
do{
i += 2;
}while(i<10);
console.log(i);
3、while
语句
var i=0;
while(i<10){
i+=2;
}
4、for
语句
for(var i=0;i<5;i++){console.log(i);}
for(let i=0;i<5;i++){
for(let j=0;j<4;j++){
console.log(i+j);
}
}
for(;;){console.log("hollo world")}//无限循环
//注意,for里的参数可以提出去,但要在里面加判断条件使循环停止
5、for-in
语句
用来枚举遍历对象类型的数据的迭代语句
for(let i in arr){console.log(i,arr[i])};
for(let key in obj){console.log(key,obj[key])};
注:不能对null和undefined使用
6、label
语句
使用label语句可以在代码中添加标签,以便将来使用
start:for(var i=0;i<count;i++){console.log(i);};
7、break
和continue
语句
break
是结束当前的语句,后面的语句将不再执行;continue
是跳过某个执行步骤,然后执行下一步代码;outermost
在双for
循环中,里面的跳过外面的循环;(没用过)
8、with
语句⭐
var qs=location.search,substring(1);
var hostName=localtion.hostname;
var url=localion.href;
//使用with语句,将localtion提出来公用
with(location){
var qs=search,substring(1);
var hostName=hostname;
var url=href;
}
9、switch
语句
let num=2;
switch(num){//这个参数可以是字符串,或者是true。
case num=1:
console.log(num);
break;
case num=2:
console.log(num);
break;
case num=3:
console.log(num);
break;
}
注:switch
具有穿透的性质,没有break的话会从上往下,只要符合case
条件便执行
可以合理使用这个性质
10、函数
function fn(){
console.log("hollo world");
}
fn();
//解构赋值+默认值的函数调用
function add(num,{a,b},[c,d],e=15){
console.log(num+a+b+c+d+e);
//返回结果是return
return num+a+b+c+d+e;
//return 后面的所有代码都不再执行。函数结束
}
console.log(add(1,{a:2,b:3},[4,5])+15);//30 45
//匿名函数即调用
(function(){})();
function(){}();
var fn=function(){};
div.onclick=function(){};
~function(){}();//看不懂的神奇的调用,真的能用哦
/*****箭头函数*****/
let fn=()=>{};fn();
let fn=res=>console.log(res);fn(20);//单个参数或单条函数体不需要括号
let fn=(a,b)=>a+b;console.log(fn(1,2));//直接返回a+b
/*****函数默认值****/
let fn=(a,b=10)=>a+b;console.log(fn(1));
注:可以通过arguments
对象来访问一个函数的参数数组,
一个函数可以多次赋值,多次调用,没有重载
11、for-of
语句
和for-in的使用和效果是一样的,但是不能遍历对象,能对数组使用
12、try-catch语句
先执行try中的内容,如果try中内容发生了错误,再执行catch中的内容。
try {
adddlert("欢迎光临!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
4、量,域,内存
1、量的引用
-
只能给引用类型添加属性,给基础类型添加不上
-
当复制或保存一个变量时,操作的是对象的引用,但添加属性或方法时,操作的是实际的对象。
-
函数不能按引用访问,只能按值访问(对象特例)
-
函数的参数是函数的局部变量
-
函数传参对象
let obj=new Object({a:1,b:2}); //情况一 function fn({a,b}){ a+=2,b+=3; return {a,b}; //填不添加return,研究的效果一样 } fn(obj); console.log(obj); //此时的obj没有改变,这是解构赋值,函数按值访问 //情况二 function fn1(obj){ obj.a=5; } fn1(obj); console.log(obj); //此时的obj发生改变,这里是按引用访问 //情况三 function fn2(obj){ obj.a=3; obj=new Object(); //当函数里的参数重新创建一个对象的时候,就变成了局部变量,不再是与外面的对象公用一个对象引用地址。且这个对象在函数执行完毕后自动销毁⭐⭐⭐⭐⭐ obj.name='jack'; } fn(obj); console.log(obj); //此时的obj的a属性发生变化,但没有添加name属性
2、数据类型检测:
-
typeof
:略 -
instanceof
:检测数据是否是指定的类型console.log("231" instanceof Array);//false
注:所有的引用类型数据都是Object的实例
-
console.dir(元素)
:返回元素的全部详细信息
3、环境及作用域
执行环境(环境—execution context):
-
window对象被认为是全局执行环境,(top对象始终指向window对象,两者完全相等)
-
一个函数体内也是一个执行环境
-
一个环境内的代码执行完毕后,环境被销毁,变量也被销毁,window对象的全局执行环境是在浏览器关闭时销毁
-
作用域链及活动对象
let color="blue";//创建全局变量 function fn(){ if(color==="blue"){color="red";} else{color="blue";} } fn(); console.log(color);
这里的函数被无参调用,但里面要用到color变量,可是函数内部的执行环境里没有color这个变量,便会向上一级寻找,直到全局执行环境中,如果全局环境中也没有,就会报错。
function fn(){ var color="red"; if(color==="blue"){color="red";} else{color="blue";} } fn(); console.log(color);
这时的函数执行环境里创建了一个color变量,但能在全局环境中进行使用(除了将变量return出去),所有在全局中无法输出这个color变量,且这个color变量在函数执行完后就被销毁掉了。
-
延迟作用域链🌙
原理是因为有些语句在作用域链的前端临时增加一个变量对象,该变量对象会在代码执行后被移除。
try-catch
语体的catch
块with
语句
???
-
没有块级作用域
就是if和for语体里var出来的变量可以在全局使用,函数就不行
4、垃圾收集
1、简介
javaScript
具有自动垃圾收集机制。
原理:找出那些不再继续使用的变量,然后释放其占用的内存,是有时间间隔的,具有周期性。
- 方式一:标记清除
- 方式二:应用计数
性能问题:IE浏览器的垃圾收集周期短,导致垃圾收集频繁,这是IE6
因此名声狼藉的性能原型。IE7
重写了垃圾收集机制。
2、使用
调用window.CollectGarbage()
方法会立即执行垃圾收集
3、管理
解除引用:一旦数据不再用于,最好通过将其值设置为null来释放其引用。
作用:便于垃圾回收机制下次将它清除
5、引用类型(方法合集)
常被称为类或对象定义,但和类不是同一个概念
由于官方中的介绍比较啰嗦,直接上干货
类型检测在第四章哦
1、Object
类型
1、实例
var person = new Object();
var person = {
name:'jack',
age:20,
eat:function(){
console.log('吃不起');
},
};
2、属性和方法
var age=20;
person.age;//比较特殊
person.name='jack';
person.eat=function(){
console.log('能吃');
}
//属性和方法是覆盖式写入,即修改重新设置
//新添加式属性名或方法名不能重复
delete person.age//删除一个属性
//没有length属性读取长度哦⭐⭐⭐
3、属性的读取
console.log(person);
person.eat();//调用一个属性的方法
var str='name';
var nume=person.name;
var userName=person['name'];
var theName=person[str];
//这三个变量存储的式同样的数据
4、对象转换数组
1、属性名生成数组:
Object.keys(person)
2、属性值生成数组:
Object.valuse(person)
5、遍历
遍历可以使用for in
遍历法遍历
for in
遍历法
for(let i in obj){
console.log(obj[i])
}
//此时的每个i存储的obj的每个属性的字符串
6、JSON
转换
只要是Object实例出来的都可以使用
let str=JSON.stringify(obj)
对象转字符串let obj=JSON.pares(str)
字符串转对象
7、解构赋值⭐
var {a,b,c=3}={a:2,b:3};
console.log(a,b,c);
//或者
const a=1;
const obj={a,b:2,c:5};
cobsole.log(obj);
8、展开合并
let obj={a:1,b:2};
let oaj={...obj,c:4,d:5};//展开obj
console.log(oaj);
2、Array
类型
1、实例
let arr=new Array();
let arr=[];
//注意,如果Array()里只有一个值,则是定义这个数组的长度为这个值
let arr=[1,2,3];
let arr=new Array(1,'hollo world',{name:'jack'});
let arr=[1,'hollo world',{name:'jack'}];
2、数组的读取
console.log(arr);
console.log(arr[0]);//数组第一个元素的下标是0
console.log
3、数组的长度
let len=arr.length;//使用length属性获取长度
//数组长度设置小于原长度,将会删除差个数的元素数据,大于原长度,会添加undefined补充
4、数组的方法
-
array.splice(第几位开始,删除个数[,替换内容1,替换内容2,...]); array.splice(1,2)
-
array.push(新元素);//从最后添加
-
array.pop();//从最后删除一个
-
array.unshift(新元素)//从头添加
-
array.shift();//从头删除一个
-
array.sort();//元素按ascill码从小到大排序
-
array.sort(function(a,b){return a-b}); //元素按值从小到大排序
-
array.sort(function(a,b){return b-a}); //元素按值从大到小排序
-
array.reverse();//将array反序
-
array.concat(另个数组);//将另个数组拼接到array后面
-
array.join('字符');//将元素间添加'字符',返回字符串
-
array.toString();//将数组转字符串
-
array.slice(第几位开始,第几位结束); //指定位置读取,含开始位置,不含结束位置
-
array.indexOf(元素); //从头查找元素第一次出现位置下标,元素不存在反回-1;
-
array.lastIndexOf(元素); //从尾查找元素第一次出现位置下标,元素不存在反回-1;
-
array.forEach(function(v,i,array){ //函数体, }); //参数1:元素;参数2:下标;参数3:当前数组; //用于遍历数组
-
array.every(function(v,i,array){ //判断函数体 }); //判断每个元素是否都满足判断条件,全满足反true,否则反false
-
array.some(function(v,i,array){ //判断函数体 }); //判断每个元素是否都满足判断条件,有一个满足反true,全都否则反false
-
array.map(function(v,i,array){ //函数体 }); //对数组的每个元素都进行改变,并生成一个新的数组,原数组不变
-
array.filter(function(v,i,array){ //判断函数体 }); //筛选符合判断条件的元素,返回都一个新的数组,原数组不变
-
array.find(function(v,i,array){ //判断函数体 }); //筛选符合判断条件的元素,找到返回第一个元素,找不到返回false
-
array.findindex(function(v,i,array){ //判断函数体 }); //筛选符合判断条件的元素,找到返回第一个元素下标,找不到返回-1
-
array.include(v);//判断array是否含v,反布尔值
5、数组的遍历
可以使用for in
遍历,使用forEach
等方法遍历更简便
6、解构赋值
const [a,b,c,d=8,[e,f]]=[1,2,3,5,[6,8]];
console.log(a,b,c,d,e,f);
7、展开合并
arr=[1,2,3];
console.log(...arr);//1,2,3
//即将arr展开
fn(1,2,3);
let fn=(...arr)=>console.log(arr);//将数字合并成数组
3、Data时间类型
UTC
国际协调时间
1、获取时间
即创建一个时间对象
let data= new Data();//获取当前时间
let data=new Data("2015-2-18");//获取指定日期
let data=new Data("2015-2-18 06:05:52");//获取指定时间日期
let data=new Data(1543499394644);//获取指定时间戳时间
let data=+new Data();//获取当前的时间戳
也可以通过创造的data
对象获取指定的时间,这个方法不常用
data.parse("2015-2-18 06:05:52");//获取指定时间日期
data.UTC(1543499394644)//获取指定时间戳时间
2、处理时间
通过获取不同前后当前时间的时间差获取时间段
3、时间格式化
toDateString()
—以特定于实现的格式显示星期几、月、日和年toTimeString()
—以特定于实现的格式显示时、分、秒和时区toLocaleDateString()
—以特定于地区的格式显示星期几、月、日和年toLocaleTimeString()
—以特定于实现的格式显示时、分、秒toLocaleString()
-–-以特定于实现的格式显示UTC日期
4、时间对象方法
1、获取时间是get
开头
//都是返回值,时间戳就是毫秒数
data.getTime();//时间转毫秒数
data.setTime();//毫秒数转时间
data.getFullyear();//取4为年份
data.getUTCFullYeat();//年份转毫秒数,后面只要加UTC的都是获取UTC日期
data.getMonth()//;获取月,注意,返回值比当前月份小1
data.getDate();//获取日期🌙
data.getDay();//获取星期🌙
data.getHours();//获取小时
data.getMunutes();//获取分钟
data.getSecinds();//获取秒
data.getSeconds();//获取毫秒
//难以用到的
data.getMilliseconds();//日期中的毫秒数
data.getTimezoneOffset();//返回本地时间与UTC时间的分钟差
2、设置/修改时间是set
开头
即将get
换成set
,方法从返回值变成设置值
5、时间本地化
let allTime=data.toLocalString();//全部本地化
let dateTime=data.toLocalDateString();//只本地化日期
let Time=data.toLocalTimeString();//只本地化时间
4、RegExp
正则类型
1、正则表达式书写
let reg=/正则体/[标志];
let reg=/at/g;
let reg=new RegExp(/at/i);
2、标志
g
:全局模式,模式应用于被查字符串的所有字符,且发现就返回第一个i
:不分大小写m
:多行模式
可以一起写
let reg=/at/gi
3、正则元字符
- 匹配数字:\d
- 匹配任意非数字的字符:\D
- 匹配字母或数字或下划线:\w
- 匹配任意不是字母,数字,下划线:\W
- 匹配任意的空白符:\s
- 匹配任意不是空白符的字符[^备注1]:\S
- 匹配除换行符以外的任意单个字符:.
- 表示匹配行首的文本(以谁开始)[备注2]:
- 表示匹配行尾的文本(以谁结束)[^备注3]:$
4、正则限定符
- 重复零次或更多次:*
- 重复一次或更多次:+
- 重复零次或一次:?
- 重复n-1次:{n}
- 重复n次或更多次:{n,}
- 重复n到m-1次:{n,m}
5、正则其它
- 字符串用中括号括起来,表示匹配其中的任一字符,相当于或的意思:[]
- 匹配除中括号以内的内容:[^]
- 转义符:\
- 或者,选择两者中的一个。注意|将左右两边分为两部分,而不管左右两边有多长多乱:| 例:
let reg=/(男|女)/
; - 从两个直接量中选择一个,分组[^备注4]:()
- 匹配汉字:
[\u4e00-\u9fa5]
- 小括号():匹配小括号内的字符串,可以是一个,也可以是多个,常跟“|”(或)符号搭配使用,是多选结构的
6、#正则使用⭐
-
匹配—正则表达式.test(字符串);反布尔值
-
查找—字符串.search(正则);筛选满足条件的部分,反下标,无结果反-1;
-
提取—字符串.match(正则);提取满足条件的部分,反数组;
-
提取—正则.exec(字符串);提取满足条件的第一个,反结果;
-
替换—字符串.replace(正则,新内容);将符合正则的内容换成新内容
-
模糊查找—字符串.search(正则);
var text='cat bat sat fat'; var pos=text.search(/at/);//返回at第一次出现的位置,无返回-1 console.log();//1 result=text.search(/.at/g,'word($1)'); console.log(result);//查找.at位置,替换从word(.at) //word(cat),word(bat),word(sat),word(fat)
-
引用替换
var str = '8/1/2019'; var reg = /(\d)\/(\d)\/(\d+)/; var res = str.replace(reg,"$3/$1/$2"); console.log(res);//2019/8/1
7、官方中补充
var text='this ha a short summer';
var pattern=/(.)hort/g;
if(patter.text(text)){
console,log(RegExp.input);//this has been a short summer
console,log(RegExp.leftContext);//this has been a
console,log(RegExp.rightContext);//summer
console,log(RegExp.lastMatch);//short
console,log(RegExp.lastParen);//s
console,log(RegExp.multiline);//false
}
/*
input返回原始字符串
leftContext返回结果左边的
rightContext返回结果右边的
lastMatch返回结果
lastParen返回小括号匹配捕获的
最后一个没得了😅
*/
5、函数类型
1、没有重载
就是函数重名覆盖。
2、一个坑
sum();
var sum=function (){
console.log(1);
}
//报错,sum is not function
fn()
function fn(){
console.log(2);
};
//此时不会报错
3、作为值的函数
ECMAScript
中函数本身就是变量,说一函数也可以作为值来使用
4、函数内部属性
1、arguments属性,
没见过没用过、严格模式下还报错。递归的函数
function fn(n){
if(n<1){
return 1;
}else{
return n*fn(n-1);
}
}
//进行改写
function fn(n){
if(n<1){
return 1;
}else{
return n*arguments*callee(n-1);
}
}
解释是说这样改写能解除函数执行与函数名fn紧密的耦合关系
2、this属性
函数内指针的指向,默认指向window。
绑定事件时,一般情况下时指向此事件。但由事件函数触发的函数指向就不是此事件了。可以通过es6
的call、apply、bind进行修改(跳转)
3、改变this指向
作用:都是改变this的指向,只是传参的形式不同
1、call方法
作用: 调用该函数,并修改函数中this的指向
参数详解:
第一个参数: 要让函数中this指向谁,就写谁
后面的参数: 被调用函数要传入的实参,以逗号分隔
2、apply 方法
作用: 调用该函数,并修改函数中this的指向
**语法: ** 函数名. apply(对象,数组);
参数详解:
第一个参数: 要让函数中this指向谁,就写谁
第二个参数: 要去传入一个数组,里面存放被调用函数需要的实参
3、bind方法
作用: 不调用函数,克隆一个新的函数,并修改新函数中this的指向,将新的函数返回
**语法: ** 函数名. bind(对象[,实参]);
参数详解:
第一个参数: 要让函数中this指向谁,就写谁
后面的参数: 被调用函数要传入的实参,以逗号分隔
3、prototype构造原型
函数名.prototype()访问函数原型
4、函数包装
代码外面套个未调用的有名函数,将需要的参数设置给这个有名参数,这段代码就封装完成。
5、解构赋值
function fn({a,b}){
console.log(a,b,123);
}
fn({a:1,b:3});
6、boolean类型
6+、number类型
- 格式化数值的方法:
toExponential()
,转成e表示法 toFixed()
、toPrecision()
待查
7、string类型
直接方法,都是返回值,字符串正则方法在正则介绍已经全部罗列。
str.charAt(下标);//查找下标位置字符
str.charCodeAt(下标);//查找下标位置字符的ASCII码
str.concat(另个字符串);//追加字符串,不用这个属性,用+
//下面的三个方法的第二个参数可以为负。
str.slice(开始位置,结束位置);//从开始位置截取到结束位置,不含结束位置
str.substring(开始位置,结束位置);//从开始位置截取到结束位置,不含结束位置
str.substr(开始位置,截取个数);//从开始位置截取指定个数
/***********************/
str.indexOf("s");//从头查询s在字符中第一个的下标位置,找不到反-1;
str.lastIndexOf("s");//从尾查询s在字符中第一个的下标位置,找不到反-1;
str.trim();//清除" o o "两边多余的空格,中间的清除不掉
str.toUpperCase();//字符转大小
str.toLowerCase();//字符转小写
/*含有两个不常用的
toLocaleUpperCase();和toLocaleLowerCase();
是针对于特点的地区使用,如(土耳其语)
*/
//split返回的是一个数值
str.split(","[,个数]);
//以逗号","将字符串裂开,【获取指定的个数,】并拼接为一个数值,顺序不变
str.split(正则[,个数]);//以正则裂开。
str.localeCompare(列个字符串);//比较第一个字符的asicll码的大小,不常用
String.formCharCode(asicll码[,可填多值]);//返回asicll码转字符串
str.startsWith("字符");//判断是否以“字符”开头,返回布尔值
str.endsWith("字符");//判断是否以“字符”结尾,返回布尔值
str.include("字符");//判断是否含“字符”,反布尔值
//对字符串进行加密
function compileStr(code){
var c=String.fromCharCode(code.charCodeAt(0)+code.length);
for(var i=1;i<code.length;i++){
c+=String.fromCharCode(code.charCodeAt(i)+code.charCodeAt(i-1));
}
return escape(c);
}
//字符串进行解密
function uncompileStr(code){
code = unescape(code);
var c=String.fromCharCode(code.charCodeAt(0)-code.length);
for(var i=1;i<code.length;i++){
c+=String.fromCharCode(code.charCodeAt(i)-c.charCodeAt(i-1));
}
return c;
}
8、Golbal
对象
Golbal
(全局)对象是最特殊的对象,一个咋看都不存在的对象
1、url
的编码和解码
通过encodeURL()
和encodeURLComponent()
对URL进行编码
var uri="http://www.wrox.com/illegal calue.htm#start";
console.log(encodeURL(uri));
//结果为:"http://www.wrox.com/illegal calue.htm#start"
console.log(encodeURLComponent(uri))
//结果为:
//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm$23start"
第一个不会对URL的特殊字符进行编码,第二个会,但第二个保密啊
对应的解码是decodeURL()
和encodeURLComponent()
2、eval
方法在线编译
建立一个JavaScript的运行区,直接运行js
代码,在线编译就是这样完成的。
eval("alert('hi')");
//这段代码相当于
alert('hi');
尽量不要使用此方法接收数据,否则会发生恶意代码输入,即代码注入
3、是所有的原型
是所有的构造函数的原型,即它是null,而且undefined,none,Object,Array等等都是它的属性。window和它的关系写的很模糊看不懂,需要另外查询资料
9、Math对象
前面都要加Math.
Math.random();//这是一个随机数,赋值给变量
都是返回值
1、取值
E | 返回算术常量 e,即自然对数的底数(约等于2.718)。 |
---|---|
LN2 | 返回 2 的自然对数(约等于0.693)。 |
LN10 | 返回 10 的自然对数(约等于2.302)。 |
LOG2E | 返回以 2 为底的 e 的对数(约等于 1.4426950408889634)。 |
LOG10E | 返回以 10 为底的 e 的对数(约等于0.434)。 |
PI | 返回圆周率(约等于3.14159)。 |
SQRT1_2 | 返回 2 的平方根的倒数(约等于 0.707)。 |
SQRT2 | 返回 2 的平方根(约等于 1.414)。 |
2、方法
abs(x) | 返回 x 的绝对值。 |
---|---|
acos(x) | 返回 x 的反余弦值。 |
asin(x) | 返回 x 的反正弦值。 |
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。 |
ceil(x) | 对数进行上舍入。 |
cos(x) | 返回数的余弦。 |
exp(x) | 返回 Ex 的指数。 |
floor(x) | 对 x 进行下舍入。 |
log(x) | 返回数的自然对数(底为e)。 |
max(x,y,z,…,n) | 返回 x,y,z,…,n 中的最高值。 |
min(x,y,z,…,n) | 返回 x,y,z,…,n中的最低值。 |
pow(x,y) | 返回 x 的 y 次幂。 |
random() | 返回 0 ~ 1 之间的随机数。 |
round(x) | 四舍五入。 |
sin(x) | 返回数的正弦。 |
sqrt(x) | 返回数的平方根。 |
tan(x) | 返回角的正切。 |
10、枚举技术
枚举是通过对象进行枚举的
const jieHunEnum={
"1":"已婚",
"2":"未婚",
};
if(obj.isJieHun){//从外面传来的obj对象
obj.isJieHun=jieHunEnum[obj.isJieHun];
}
//通过obj.isJieHun返回的1/2值进行解构赋值
const arr=["1","2"];
const hobbyEnum={
"1":"学习",
"2":"抽烟",
"3":"泡妹子"
};
const brr=arr.map(v=>hobbyEnum[v]).join("、");
//通过map方法遍历枚举处理arr数组的值,并返回新数组再用join处理。
console.log(brr);
6、面向对象的程序设计
面向对象的语言有一个标志,那就是它们都有类的概念
一下的和官方中内容有出入,这里是总结操作方法,避开复杂原理,需要查阅资料。
药引子:经典的大象进冰箱问题
面向过程:
就是我把冰箱门打开,我再把大象装进去,最后我把冰箱门关上,整个过程都是我在工作。
面向对象:
我命令冰箱门‘门打开’,让冰箱门自己打开。我命令大象‘装进去’,让大象把自己装冰箱里。我命令冰箱门‘门关上’,让冰箱门自己关上。整个过程我只命令,不工作。我面对向我的冰箱门,大象在工作
误区:大象和冰箱必须是纯在的对象,没有对象怎么命令?且大象和冰箱工作是它门内在的方法。
1、对象操作方法设置
Configurable
:表示能否通过delete
删除属性从而重新定义,默认trueEnumerable
:表示能否使用for-in
循环,默认trueWritable
:表示能否修改属性的值。默认trueValue
:表示一个属性的默认值,默认undefinedGet
:在读取属性时调用的函数,默认underfundedSet
:在写入属性时调用的函数,默认underfunded
let person={
Object.defineProperty(person,"name",{//这个defineProperty是啥?
writable:false,//将writable修改为false
value:'jack',
});
person.name='rose';//非严格模式下会忽略,严格模式下报错
2、新增方法
defineProperties()
:定义多个属性configurable
enumerable
get
和set
var book={};
Object.defineProperties(book,{
name:{
writable:true,
name:'jack',
},
age:{
value:1,
},
year:{
get:function{
return this.name;
},
},
});
3、工厂模式
就是用function写一个构造函数constructor
,又叫工厂函数,能大批量new出相同的对象
构造函数注意事项:
- 构造函数天生就是用来创建对象的,所以必须和new配合使用,否则就不具备创建对象的能力
- 构造函数内部不能有return关键字,因为构造函数会自动返回对象。如果返回基本数据类型,和不加效果一样,如果返回复杂数据类型,构造函数就没意义了。
- 如果new的时候,不需要参数,那么小括号可以省略
- 人们通常将构造函数的首字母大写
此时的构造函数有个缺点:
方法占用内存造成浪费
这也就是原生对象的最大的问题
function Fn(name,age){
this.name=name;
this.age=age;
this.eat=function(){
console.log("能吃");//占内存
}
}
let fn=new Fn("jack",20);
注意:⭐⭐⭐⭐⭐
正儿八经的工厂函数
function Person(){
Person.prototype.name='jack';
Person.prototype.age=20;
}
4、原型模式
将构造函数的原型prototype添加公共函数,让实例化的对象能够使用公共函数,不造成内存浪费。
/将能吃函数设置到原型上
fn.protorype.eat=function(){console.log('能吃');};
1、关系图
2、in
操作符⭐
检测一个属性是否在对象里面,返回布尔值
let obj={'name':'jack'};
console.log('name' in obj);//结果返回true
设置在protorype上的属性也是返回true
function Fn(){
this.name='jack';
}
Fn.prototype.age=20;
let fn=new Fn();
console.log('age' in fn);
延申:obj.getOwnPropertyNames()
,obj.keys()
的升级版,无论是否能枚举都能用。
3、更简单的原型语句
function Person(){
}
Person.prototype={
name:'jack',
age:20,
}
4、原型的动态性
就是在运行上价格方法函数
Person.prototype.fn=function(){console.log('我是动态性');};
Person.prototype={
fn:function(){console.log('穷啊');},
}
5、寄生模式
就在在构造函数里面创造一个对象,然后设置对象,在返回出来
function Person(name,age){
var obj=new Object();
obj.name=name;
obj.age=age;
return obj;
}
var jack=new Person('jack',20);
不推荐使用
6、稳妥构造函数模式
结构和寄生几乎没区别,不推荐使用
7、继承
1、原型链
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5rVfLzhR-1622042557060)(F:\笔记文件\media\1566485254743.png)]
就是实例对象通过__proto__
一直向上访问的一条链;obj.__proto__
的值就是obj
原型
2、原型继承
//这就是原型继承
/继承1,使用原型继承,将父类的实例对象赋值给子类的原型对象
function Animal(){
this.status=()=>{console.log('富翁');};
this.pa=()=>{console.log('有钱');};
}
var animal=new Animal();
function Dog(name){//妈妈(构造函数)
this.name=name;
}
Dog.prototype=animal;//爸爸是富翁,爸爸摊牌了。爸爸是原型
//但是爸爸把妈妈忘了,即原型没有了构造函数的指向
var ha=new Dog('哈士奇');//这是个孙子辈的
console.log(ha);
ha.eat();
3、借用函数继承
//借用函数继承
function Animal(){
this.pa='富豪';
}
Animal.prototype.eat=function(){console.log('真有钱');}//无法继承有钱
function Dog(name){
Animal.call(this);/⭐复制函数,爸爸谎称自己是富豪,但没钱
this.name=name;
}
var ha=new Dog('哈士奇');
console.log(ha);
// ha.eat(); //出现报错
用借用函数实现类的继承,只能访问父类的属性,不能访问父类原型上的方法⭐
4、混合继承
function Animal(){
this.pa='富翁';
}
Animal.prototype.eat=function(){console.log('能吃');}
//=》
function Dog(name){
Animal.call(this);
this.name=name;
}
//《=这一快就是构造函数,妈妈
Dog.prototype=new Animal();//爸爸摊牌了
Dog.prototype.constructor=Dog;//爸爸不记得妈妈了,让他记住妈妈,即再次将原型的构造函数指向指向到原来的构造函数
var ha=new Dog('哈士奇');
console.log(ha);
ha.eat();
/混合继承,借用函数继承一次,使用原型再继承一次
5、寄生式继承(放弃)
8、ES6
的class
1、语法
就是简写去掉了function和prototype
//es6
class Animal{
/无论属性还是方法都写在这个括号中
/即没有了prototype
/一个入口:方法/函数-constructor
constructor(name,age){
/和构造函数一样的使用方法
this.name=name;
this.age=age;
this.eat();/直接调用eat函数,无需创建对象后在调用对象。
}
eat(){/这就把方法绑定在原型上,实现了prototype的功能
console.log('饥渴');
}
}
var animal=new Animal('zs',20);
console.log(animal);
animal.eat();
2、继承
/有明确的继承语法:
class 子类 extends 父类{
constructor(){
super();
}
}
class Car{
constructor(TheType){
this.Type=TheType;
}
run(){
console.log('跑的快');
}
}
class Wow extends Car{
constructor(car){
super();//这个是刚需,不加报错,功能生成一个this,指向父类
/super的位置必须在第一个
/也可以完全避开父类,即在constructor里面手动返回一个对象(return obj)
this.car=car;
}
}
var car=new Wow('911')
console.log(car);
car.run();
/语法规定,一个类只能继承一个类,不能继承多个
3、super
示例
class Gad{
constructor(angle){
this.angle=angle;
this.god='旭大王'
}
fly(){
console.log("飞");
}
}
class people extends Gad{
// class people {
constructor(name){
super(name)/这就是添加了一个指向父类的this,给父类传参
this.name=name;
}
}
var peo=new people('旭')
console.log(peo);
7、函数表达式
1、递归
函数通过名字调用自身
2、闭包
1、俗括:
函数套函数就形成了闭包!
2、简介:
闭包:
大函数内部返回一个小函数,这个小函数被大函数外部的变量接收,小函数使用大函数中的变量。
3、特点:
- 函数中返回了一个函数,这样在全局中调用大函数可以得到小函数
- 小函数中可以改变大函数中的数据,并且这个数据可以持久而不是每次调用就销毁
这种形式的代码叫做闭包。
一般函数,每次调用的时候,里面的变量都是重新开始,但闭包不会,因为闭包这个空间不会被销毁。
4、优点:
-
作用域空间不销毁,所以变量也不会被销毁,增加了变量的声明周期
-
在函数外部可以访问函数内部的变量
-
保护私有变量,将变量定义在函数内,不会污染全局
-
可以使函数只执行一次,在事件多次触发时使用
function fn(s){ return function fs(){ if(s){ console.log(s); s=null; }else{ console.log("ok"); } }; } let f=fn("javascript"); f();//javascript f();//ok f();//ok
5、缺点:
- 因为不销毁,所以会一直占用内存,如果多了会导致内存溢出
- 因为函数外部可以访问函数内部的变量,导致变量和内部的函数引用关系一直存在,内存不能销毁
- 要利用闭包才能访问,不是特别方便
6、待验证:闭包形成的原理
- 函数中返回基本数据类型,等用完以后,这个数据就被销毁了。
- 函数中返回复杂数据类型,等用完以后,这个数据就不会被销毁。
7、改成闭包
外面再套个函数壳也算、头部加个return,或者时let创建变量。
8、注意this指向
闭包里的this指向比较奇葩,小心一点,多打断点输出,检测一下
3、模仿块作用级
就是利用函数的作用域原理,模拟一个私有的作用域
function fn(n){
~function(){
for(var i=0;i<n;i++){
console.log(i)
}
}();
console.log(i);/报错,i is undefined,即无法访问模拟的私有作用域里的变量
}
4、私有变量
还是函数内部的变量不返回出去,不调用出去,外面的谁也用不成。
5、特权方法
有权访问使用变量和使用函数的公有方法称为特权方法
1、在构造函数中定义特权方法
function MyObject(){/构造函数
/使用变量和私用函数
var able=10;
function active(){
return false;
}
//特权方法
this.action=function(){
able++;
return active();
}
}
这时只能通过构造函数实例化对象的action
属性进行访问私用变量
利用使用和特权成员,可以隐藏那些不应该被直接修改的数据,例如;(这样就能做方法了,创建真正意义上的封装,像jQuery一样)
function Person(name){
this.getName=function(){
return name;
}
this.setName=function(value){
name=name
}
}
var person=new Person('jack');
console.log(person.getName());//jack
person.setName('rose');
console.log(person.getName());//rose
2、静态私有变量
(function(){
var num=10;//私有变量
function able(){//私有函数
return false;
}
Person=function(){};//构造函数
/在构造函数原型上定义公有方法
Person.prototype.public=function(){
num++;
return able();
}
})
这种方法就是上一个方法的改善升级版,即将构造函数的内存浪费问题解决了。
3、模块模式(单例)
就是一个构造函数只能在堆空间建立一个对象。构造函数实例出来的对象都相等。
正常的构造函数
function Person(){}
let n1=new Person{};
let n2=new Person{};
console.log(n1==n2);//false
//即此时在堆空间创建了两个对象
实现单例(闭包)
let fn=function(name){
function Per(name){//构造函数
this.name=name;
}
let obj;//初始化
return function(name){//返回闭包函数
if(obj){//判断初始化
return obj;
}else{
obj=new Per(name);
}
return obj;
};
}();
let a=fn('rose');//利用函数创建对象a
let b=fn('jack');//利用函数创建对象b
console.log(a==b);//true**
8、BOM
BOM
的核心是window
对象
1、窗口关系以及框架(较难)
框架是使用<frames>
单标签在framest
双标签里创建一个新框子,将浏览器窗口分割。如:
<html lang="en">
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
每个框架都有自己的window
对象,并保存在farmes
集合中,在集合中可以通过索引访问到对应的window
对象,
获取frames来引用这个框架,使用top对象。top对象始终指向最够(最外)层的框架
例如top.frames[0]**
**注:top对象全等于window对象
与top相对的另一个window对象是parent。parent对象始终指向当前框架的直接上层框架。在某些情况下,parent可能等于top,在没有框架的情况下,parent一定等于top,即都等于window
2、窗口位置
1、screenLeft/screenTop
(了解)
是用来确定和修改window对象位置的属性
使用下列代码可以跨浏览器取得窗口左边和上边的位置,从而解决兼容问题
var leftPos=(typepf window.screenLeft==='number')?window.screenLeft:window.screenX;
var topPos=(typepf window.screenTop==='number')?window.screenTop:window.screenY;
这个属性在一些浏览器是用问题的,不推荐使用
2、moveTo()/moveBy
moveTo()
接收的是新位置的x和y坐标值,moveBy()
接收的是水平和垂直方向上移动的像素数
window.moveTo(0,0);//将窗口移动到屏幕的左上角
window.moveBy(-50,100);//将窗口左移50px,下移100px
3、窗口大小
是一个复杂的问题、相当复杂的问题,各种兼容,不同版本的兼容,不同厂商的兼容、不同模式的兼容
IE9+、Safari、Firebox,通过outerWidth和outerHeight返回浏览器的大小
Opear却要通过innerWidth和innerHeight返回浏览器的大小
Chrome则是两个都能用
ie6是document.documentElement.clientHeight和document.documentElement.clientWidth且在标准模式下,
混杂模式下是document.body.clientHeight和document.body.clientWidth
做移动端开发的话,建议读读:移动Web开发
另外使用resizeTo()
和resizeBy()
能调整浏览器窗口的大小。
window.resizeTo(100,100);/调整到100x100
windiw.resizeBy(100,50);/再调整到200x150
**注解:**直接使用这个也行(含滚动条)
- 浏览器窗口的高度:
let h=window.innerHeight;
- 浏览器窗口的宽度:
let w=window.innerWidth;
4、浏览器导航信息
1、window.open()
方法
/等同于<a href='http://www.baidu.com' target='topFrame'></a>
window.open("http://www.baidu.com","topFrame");
/window.open(URL,name,specs,replace)
2、URL:
可选。打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口
- _blank - URL加载到一个新的窗口。这是默认
- _parent - URL加载到父框架
- _self - URL替换当前页面
- _top - URL替换任何可加载的框架集
- name - 窗口名称
3、specs
可选。一个逗号分隔的项目列表。支持表二值
channelmode=yes|no|1|0 | 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器 |
---|---|
directories=yes|no|1|0 | 是否添加目录按钮。默认是肯定的。仅限IE浏览器 |
fullscreen=yes|no|1|0 | 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window,还必须在影院模式。仅限IE浏览器 |
height=pixels | 窗口的高度。最小.值为100 |
left=pixels | 该窗口的左侧位置 |
location=yes|no|1|0 | 是否显示地址字段.默认值是yes |
menubar=yes|no|1|0 | 是否显示菜单栏.默认值是yes |
resizable=yes|no|1|0 | 是否可调整窗口大小.默认值是yes |
scrollbars=yes|no|1|0 | 是否显示滚动条.默认值是yes |
status=yes|no|1|0 | 是否要添加一个状态栏.默认值是yes |
titlebar=yes|no|1|0 | 是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes |
toolbar=yes|no|1|0 | 是否显示浏览器工具栏.默认值是yes |
top=pixels | 窗口顶部的位置.仅限IE浏览器 |
width=pixels | 窗口的宽度.最小.值为100 |
4、replace
Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:
- true - URL 替换浏览历史中的当前条目。
- false - URL 在浏览历史中创建新的条目。
5、window.close()
关闭浏览器窗口:window.close()
仅适用用window.open()
打开的弹出窗口,可以使用top.close()
在不经用户允许关闭窗口
6、弹出窗口屏蔽
通过检测window.open()
是否为null来判断弹窗窗口是否被隐藏
5、间歇调用和超时调用
这就是计时器,注意,计时器是异步
-
定时器:setInterval(执行的函数,间隔的时间)
-
计时器:setTimeout(执行的函数,延迟的时间)
-
结束定时器:(可以混着用,都可以停止)
- clearInterval(timerId)
- clearTimeout(timerId)
7、浏览器对话框信息
浏览器的对话框是alert()、confirm(),prompt()、print()
三个对话框
对话框弹出时,代码会停止执行,关闭对话框代码继续执行
利用confirm()返回值判断confirm()判断对话框的用户选择
利用查看prompt()返回值获取用户在对话框输入的信息
8、location对象⭐
属性 | 描述 |
---|---|
hash | 返回一个URL的锚部分 |
host | 返回一个URL的主机名和端口 |
hostname | 返回URL的主机名 |
href | 返回完整的URL |
pathname | 返回的URL路径名。 |
port | 返回一个URL服务器使用的端口号 |
protocol | 返回一个URL协议 |
search | 返回一个URL的查询部分(?和后面的内容即git的请求信息)⭐ |
可赋值输出,可设置
这里可以用来获取git传递来的信息⭐
location.href="https://www.baidu.com";
跳转到百度
console.log(location.href);
输出当前URL全部字符串
assign() | 载入一个新的文档 |
---|---|
reload() | 重新载入当前文档就是刷新 |
replace() | 用新的文档替换当前文档 |
9、Navigator 对象
属性 | 说明 |
---|---|
appCodeName | 返回浏览器的代码名 |
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
platform | 返回运行浏览器的操作系统平台 |
userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
1、检测浏览器插件
使用navigator.plugins
数值来达到这个目的
- name:插件名
- description:插件的描述
- filename:插件的文件名
- length:插件所处理的MIME类型数量
navigator.plugins
函数接收一个参数:要检测的插件名
10、Screen 对象属性
属性 | 说明 |
---|---|
availHeight | 返回屏幕的高度(不包括Windows任务栏) |
availWidth | 返回屏幕的宽度(不包括Windows任务栏) |
colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
height | 返回屏幕的总高度 |
pixelDepth | 返回屏幕的颜色分辨率(每象素的位数) |
width | 返回屏幕的总宽度 |
onLine | 判断是否联网,是true,否false |
11、History 对象
属性 | 说明 |
---|---|
length | 返回历史列表中的网址数 |
方法
方法 | 说明 |
---|---|
back() | 加载 history 列表中的前一个 URL |
forward() | 加载 history 列表中的下一个 URL |
go() | 加载 history 列表中的某个具体页面,正为前进,负后退 |
9、客户端检测🌙
就是一堆的兼容问题,麻烦的一批,看不懂,理不清,很难受。先不更新
10、DOM
及扩展
1、node对象属性
属性 | 描述 |
---|---|
baseURI | 返回节点的绝对基准 URI。 |
childNodes | 返回节点的子节点的节点列表。 |
firstChild | 返回节点的第一个子节点。 |
lastChild | 返回节点的最后一个子节点。 |
localName | 返回节点名称的本地部分。 |
namespaceURI | 返回节点的命名空间 URI。 |
nextSibling | 返回元素之后紧接的节点。 |
nodeName | 返回节点的名称,根据其类型。 |
nodeType | 返回节点的类型。 |
nodeValue | 设置或返回节点的值,根据其类型。 |
ownerDocument | 返回节点的根元素(document 对象)。 |
parentNode | 返回节点的父节点。 |
prefix | 设置或返回节点的命名空间前缀。 |
previousSibling | 返回元素之前紧接的节点。 |
textContent | 设置或返回节点及其后代的文本内容。 |
几个较为重要的
nodeType | 节点类型,对应值网上查 |
---|---|
nodeName | 节点名称 |
nodeValue | 节点值,多用于input标签 |
2、Node 对象方法
方法 | 描述 |
---|---|
appendChild() | 把新的子节点添加到节点的子节点列表末尾。 |
cloneNode() | 克隆节点。 |
compareDocumentPosition() | 比较两个节点的文档位置。 |
getFeature(feature,version) | 返回 DOM 对象,此对象可执行带有指定特性和版本的专门的 API。 |
getUserData(key) | 返回与节点上键关联的对象。此对象必须首先通过使用相同的键调用 setUserData 来设置到此节点。 |
hasAttributes() | 如果节点拥有属性,则返回 ture,否则返回 false。 |
hasChildNodes() | 如果节点拥有子节点,则返回 true,否则返回 false。 |
insertBefore() | 在已有的子节点之前插入一个新的子节点。 |
isDefaultNamespace(URI) | 返回指定的 namespaceURI 是否默认。 |
isEqualNode() | 检查两个节点是否相等。 |
isSameNode() | 检查两个节点是否为同一节点。 |
isSupported(feature,version) | 返回指定的特性是否在此节点上得到支持。 |
lookupNamespaceURI() | 返回匹配指定前缀的命名空间 URI。 |
lookupPrefix() | 返回匹配指定命名空间 URI 的前缀。 |
normalize() | 把节点(包括属性)下的所有文本节点放置到一个"标准"的格式中,其中只有结构(比如元素、注释、处理指令、CDATA 区段以及实体引用)来分隔 Text 节点,例如,既没有相邻的 Text 节点,也没有空的 Text 节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
setUserData(key,data,handler) | 把对象关联到节点上的键。 |
3、节点关系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Coyvys7R-1622042557063)(F:\笔记文件\media\timg.jpg)]
4、获取关系节点
- 获取所有子节点:childNodes
- 获取所有子元素节点:children
- 获取第一个子节点:firstChild
- 获取最后一个子节点:lastChild
- 获取第一个子元素节点:firstElementChild
- 获取最后一个子元素节点:lastElementChild
- 获取下一个兄弟节点:nextSibling
- 获取上一个兄弟节点:previousSibling
- 获取下一个元素兄弟节点:nextElementSibling
- 获取上一个元素兄弟节点:previousElementSibling
- 获取父节点:parentNode
- 获取父元素节点:
parentElement
- 返回子元素的个数:
childElementCount
;不含文本和注释 - 判读是否含有子节点:
父节点.contains(子节点)
;有返回true,没有返回false
5、节点操作
- ⭐创建元素节点:
document.createElement(元素标签)
IE7以下的会有表单的兼容问题 - 创建文本节点:
document.createTextNode("<i>hollo world</i>")
- 创建属性节点:
document.createAttribute
(元素属性)[^备注1] - 创建文本节点:document.createTextNode(文本内容)
- 末尾插入节点:父节点.appendChild(所添加的新节点)
- 头部插入节点:父节点.insertBefore(新节点,已有点)
- 替换节点:父节点.replaceChild(新节点,老元素);
- 复制节点:被复制点.cloneNode(true(深复制)/false(浅复制));[^备注2]
- 删除节点:父元素.removeChild(要删除的节点);
- 清除父元素内全部节点:
父元素.innerHTMML('')
; - 节点合并:
父元素.normalize()
:将里面的子元素合并在一起(规范一下格式) - 分割节点:
父元素.splitText()
:和分割字符串的效果差不多 - 类(class)名操作:
节点.className='类名'
;可获取赋值,可修改 - 添加类名:
节点.classList.add("类名")
;追加一个类名 - 删除类名:
节点.classList.remove("类名")
;移除指定类名 - 切换类名:
节点.classList.toggle("类名")
;增加删除切换 - 判断是否含有此类名:
节点.classList.contains("类名")
;有返回true,无反false
6、doucment
类型
1、Document 对象属性
属性 | 描述 |
---|---|
async | 规定 XML 文件的下载是否应当被异步处理。 |
childNodes | 返回文档的子节点的节点列表。 |
doctype | 返回与文档相关的文档类型声明(DTD,全称 Document Type Declaration)。 |
documentElement | 返回文档的根节点。 |
documentURI | 设置或返回文档的位置。 |
domConfig | 返回 normalizeDocument() 被调用时所使用的配置。 |
firstChild | 返回文档的第一个子节点。 |
implementation | 返回处理该文档的 DOMImplementation 对象。 |
inputEncoding | 返回用于文档的编码方式(在解析时)。 |
lastChild | 返回文档的最后一个子节点。 |
nodeName | 返回节点的名称(根据节点的类型)。 |
nodeType | 返回节点的节点类型。 |
nodeValue | 设置或返回节点的值(根据节点的类型)。 |
strictErrorChecking | 设置或返回是否强制进行错误检查。 |
xmlEncoding | 返回文档的 XML 编码。 |
xmlStandalone | 设置或返回文档是否为 standalone。 |
xmlVersion | 设置或返回文档的 XML 版本。 |
2、Document 对象方法
方法 | 描述 |
---|---|
adoptNode(sourcenode) | 从另一个文档向本文档选定一个节点,然后返回被选节点。 |
createAttribute(name) | 创建带有指定名称的属性节点,并返回新的 Attr 对象。 |
createAttributeNS(uri,name) | 创建带有指定名称和命名空间的属性节点,并返回新的 Attr 对象。 |
createCDATASection() | 创建 CDATA 区段节点。 |
createComment() | 创建注释节点。 |
createDocumentFragment() | 创建空的 DocumentFragment 对象,并返回此对象。 |
createElement() | 创建元素节点。 |
createElementNS() | 创建带有指定命名空间的元素节点。 |
createEntityReference(name) | 创建 EntityReference 对象,并返回此对象。 |
createProcessingInstruction(target,data) | 创建一个 ProcessingInstruction 对象,并返回此对象。 |
createTextNode() | 创建文本节点。 |
getElementById(id) | 返回带有指定值的 ID 属性的元素。如果不存在这样的元素,则返回 null。 |
getElementsByTagName() | 返回带有指定名称的所有元素的 NodeList。 |
getElementsByTagNameNS() | 返回带有指定名称和命名空间的所有元素的 NodeList。 |
importNode(nodetoimport,deep) | 从另一个文档向本文档选定一个节点。该方法创建源节点的一个新的副本。如果 deep 参数设置为 true,它将导入指定节点的所有子节点。 如果设置为 false,它将只导入节点本身。该方法返回被导入的节点。 |
normalizeDocument() | |
renameNode() | 重命名元素或属性节点。 |
3、常用document
document.write('页面输出');
document.bgColor=‘#000’;
//默认给html加document.documentElement
;//html及其内部所有内容document.head
//指向head的内容document.body
//指向body的内容document.body.style.color="#000"
//给body里的字体添加颜色document.title
//指向title内容document.URL
//获取当前页面完整的URLdocument.referrer
//获取来源页面的URLdocument.domin
//指向域名,可以用在域名的判断
7、document获取节点
-
document.getElementById('元素Id')
-
document.getElementByTagName('元素节点名')
访问时可直接取下标或使用item()取下标访问,还可以使用
namedItem()
的方法去name的属性值访问 -
document.getElementByClassName('元素class')
-
document.getElementByName('name名')
-
document.querySekector("css选择符")
:查找一个元素,返回这个元素 -
document.querySekectorAll("css选择符")
:查找多个元素,返回这些元素组成的集合(forEach可用于遍历集合) -
检测是否被上面两个方法获取:
元素.matchesSelector("css选择符")
,引用过反true,否反false
8、document特殊集合(伪数组)
document.anchors
包含文档中所有带name特效的document.applets
的集合document.forms
的集合document.images
的集合document.links
说有带有href
的
9、document的写入
4个方法:write()、writeln()、open()、close()
-
writeln()
也是写入字符串,但会在末尾添加换行符(\n)当script标签里面嵌套script标签时,可以使用这个属性将里面的包起来使标签能正常匹配头尾
-
后两个方法使用来打开和关闭浏览器的输出流
10、节点属性样式操作
attributes已经不常用了
-
增:
元素.setAttribute("属性名","属性值")
[^备注7]⭐ -
删:
元素.removeAttribute("属性名"[,"属性值"])
-
改:节点的属性是覆盖式添加修改
-
查:
元素.getAttribute("属性名")
-
或者直接将属性以查看对象的形式进行增删改查
div.id='div'; div["id"]='div'; div.style.color='red'; div.style['background-color']='red';
注意:带"-"等特殊符号的只能使用这个形式
-
以上的都是获取和设置内联样式,无法获取内联外以的
css
样式window.getComputeStyle(元素).css属性名
能获取全部的css
样式。 -
获取节点自定义属性:
节点.dataset.自定义属性
;可获取,可设置
11、DOM操作技术
就是动态生成script标签设置src属性,或者生成link标签设置href属性,再添加都html对应的位置
12、table的方法
-
caption
:保存着对元素(如果有)的指针 -
tBodies
:报存着对元素的指针 -
tFoot
:保存着对元素(如果有)的指针 -
thead
:保存着对元素(如果有)的指针 -
rows
:指向所有行 -
createTHead()
:创建元素,放入表格,返回引用 -
createTFoot()
:创建元素,放入表格,返回引用 -
createCaption()
:创建元素,放入表格,返回引用 -
deleteTHead()
:删除元素 -
deleteTFoot()
:删除元素 -
deleteCaption()
:删除元素 -
deleteRow(pos)
:删除指定位置行 -
insertRow(pos)
:想rows集合中的指定位置插入一行为添加的属性和方法
-
rows:指向行
-
deleteRow(pos)
:删除指定位置行 -
insertRow(pos)
:想rows集合中的指定位置插入一行,返回对新插入行的引用为添加的属性和方法
-
cells
:指向td
或th
-
deleteCell(pos)
:删除指定位置的单元格 -
insertCell(pos)
:想cells指定位置添加一个单元格,返回对新插入的引用
13、文档相关
document.hasFocus()
;判断文档是否获取焦点document.readyState()
;返回文档加载状态:loading正在加载,complete加载完成document.charset
;指定文档读取时数据类型
14、插入标记(innerHTML
)⭐⭐
节点.innerHTML='<p>hollo world</p>'
;可获取,可设置,加载后显示标签。脚本标签有兼容问题节点.outerHTML
; 没啥用,功能和就是获取特换,但上面也有节点.insertAdjacentHTML()
- 元素前插入:
老节点.insertAdjaceHtml("beforebegin","<p>hollo world</p>")
- 元素后插入:
老节点.insertAdjaceHtml("afterend","<p>hollo world</p>")
- 第一个子元素插入:
父节点.insertAdjacentHtml("afterbegin","<p>hollo world</p>")
- 最后一个元素插入:
父节点.insertAdjacentHtml("beforeend","<p>hollo world</p>")
- 元素前插入:
使用innerHTML
操作节点会减少内存占用
15、插入文本
节点.innerText
;只添加内容,不能添加节点节点.outerText
;
16、滚动
所有元素都可以使用(Safari和Chrome实现了这个方法)
scrollIntoViewIfNeeded([true])
当前容器窗口不见,滚动后可见scrollByLines(pos)
设置元素内容滚动的指定行高scrollByPages()
设置元素内容滚动的指定页面高度
11、DOM2
和DOM3
大部分比较啰嗦,且教学中直接放弃,只罗列常用部分
1、元素大小
只读属性
- height:
元素.offsetHeight
- width:
元素.offsetWidth
- 定位的父元素:
offsetParent
(没有啥用) - left:
元素.offsetLeft
- top:
元素.offsetTop
2、可视区窗口大小
不含滚动条
- height:
元素.clientHeight
- width:
元素.clientWidth
- left:
元素.clientLeft
- top:
元素.clientTop
3、滚动大小
- 没滚动条时,元素内容总高度:
元素.scrollHeight
- 没滚动条时,元素内容总宽度:
元素.scrollWidth
- 滚动时距左侧距离:
元素.scrollLeft
- 滚动时距顶部距离:
元素.scrollTop
4、确定元素大小
元素.getBoundingClientRect()
,该方法返回一个矩形对象,包含4个属性:left、right、top、bottom。没啥用
5、范围
用来确定DOM的范围,进行折叠,特殊复杂选取等。
12、事件
JavaScript和HTML之间的交互是通过事件实现的。
1、事件流
1、事件冒泡
子元素的事件会向上冒泡触发父元素的相同事件
2、事件捕获
获得子元素会从父元素一层一层向下捕获,同时触发父元素会触发子元素的相同事件
3、DOM事件流
事件流是指事件从捕获阶段开始一直都冒泡阶段,每个事件都要经过事件流
当然可以人为进行阻止,后面会详细介绍
2、事件的处理
1、事件的绑定
以鼠标单击事件为例。
1、HTML内联绑定
<input type="button" value="按钮" onclick="fn">
<!--点击触发fn处理函数-->
<!--只能绑定一次,再次绑定会覆盖前面的-->
2、on绑定
这是绑定一个未被调用的处理函数fn,input点击时触发,且fn的this指向input,不再指向window全局,当然还是可以通过call,apply,bind改变。
let input=document.querySelector("input");
input.onclick=function fn(){
console.log(this.value);
}
只能绑定一次,再次绑定会覆盖前面的
3、添加一个监听事件
处理函数和上面的一样未调用,第三个参数为是否在捕获阶段执行,默认为否false
可以多次绑定不同的处理函数。可以是函数名,或整个函数,但不能是以调用过的
input.addEventListener("click",处理函数,false);
2、解除事件绑定
1、内联绑定
直接使用移除属性解绑
input.removeAttribute("onclick");
2、on解绑
设置处理函数为空。覆盖之前的设置
input.onclick=null;
3、删除监听事件
参数和绑定时的一样
input.removeEventListener("click",处理函数,false);
3、兼容IE8
以下
绑定为:attachEvent()
解绑为:detechEvent()
IE8
一下只支持冒泡,用法和监听事件一样。
4、跨浏览器事件处理
这个东西几乎没人提到过,了解一下
addHandler()
绑定方法接收三个参数,要操作的元素,事件名和事件处理函数
对应的是removeHandler()
,要用到EventUtil
这个对象,具体请网上查询
3、事件对象E
在DOM上触发每一个事件都会产生一个event对象,此对象包含着所有与事件有关信息
1、e的说明
属性/方法 | 类型 | 读/写 | 说明 |
---|---|---|---|
bubbles | Boolean | 只读 | 表明事件是否冒泡 |
cancelable | Boolean | 只读 | 表明是否可以取消事件的默认行为 |
currentTarget | Element | 只读 | 其事件处理程序正当处理事件的那个元素 |
defaultPrevented | Boolean | 只读 | 为true表示已经调用了preventDefault() |
detail | Integer | 只读 | 与事件相关的细节信息 |
eventPhase | Integer | 只读 | 调用事件处理程序的阶段,1捕获,2处与目标,3冒泡 |
prevent Default() | Function | 只读 | 取消事件的默认行为,如果cancelable是true,则可以使用 |
stopImmediatePropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡,同时阻止任何事件被调用 |
stopPropagation() | Functon | 只读 | 取消事件的进一步捕获或冒泡,如果bubbles为true时,则可以使用 |
target | Element | 只读 | 事件的目标 |
trusted | Boolean | 只读 | 为true表浏览器生成,为false为开发员JavaScript生成 |
type | String | 只读 | 被触发的事件类型 |
view | AbstractView | 只读 | 与事件关联的抽象图,等同于发生事件的window |
2、获取事件对象
- window.event
- var er=e || window.event[^备注8](这里使用短路运算的写法)
box.onclick=function(e){console.log(e)}
3、e的常用
- 获取鼠标按键信息使用:
e.button
:(鼠标事件详细介绍) e.type
:用于获取事件类型如单击事件为click,失去焦点为blur。e.keyCode
,获取按下键盘键的按键ascll码e.target
获取事件目标(事件发生的精准目标元素)⭐e.stopPropagation()
阻止事件冒泡⭐e.preventDefault()
阻止事件默认行为⭐或者在事件处理函数最后追加return false
或者给链接地址设置javaScript:;&javaScript:voidlo)
4、e的兼容
e.srcElement
获取事件目标(事件发生的精准目标元素) (火狐浏览器也是通过srcElement
获取)e.cancelBubble
阻止事件冒泡e.returnValue
阻止事件默认行为
5、e获取光标位置
- x轴:
e.offsetX
;y轴:e.offsetY
;[^备注9] - x轴:
e.clientX
;y轴:e.clientY
;[^备注10] - x轴:
e.pageX
;y轴:e.pageY
;[^备注11]
6、事件托管技术
事件委托也叫事件代理(看站谁的角度),使用事件委托技术能避免对每个子节点添加事件监听,相反把事件监听委托给父元素即可,这样可提高绑定事件的性能
oUl.onclick = function(e){
var ev = e || window.event;
// 获取到单击的目标元素dom对象
var target = ev.target || ev.srcElement;
// 判断是否是li标签
if(target.nodeName == "LI"){
//⭐⭐⭐注意,浏览器已经全部改成大写的了
//验证的不一定非是nodeName
// 完成业务逻辑
alert(target.innerText);
}
}
4、事件类型
1、Ul
事件(window)
-
window.onload=fn;
最后加载事件 -
window.onunload=fn;
关闭浏览器触发事件 -
window.onbeforUnload=fn;
关闭浏览器前一刻触发事件 -
abort
:用户停止下载过程时,如果嵌入的内容没有加载完成,则在元素上面触发 -
error
:在发生JavaScript错误时在window上面触发,当无法加载图像时在元素上触发,当无法加载内容时在元素上触发 -
window.onselect=fn;
:用户选择文本框时触发 -
window.onresize=fn;
:当窗口或框架的大小变化时在window或框架上触发 -
scroll;
:滚动条滚动事件,发生滚动的元素触发 -
浏览器窗口切换检测实现⭐:https://www.cnblogs.com/xulinjun/p/11452001.html
visibilitychange
属性<script> document.addEventListener('visibilitychange',function(){ //浏览器切换事件 if(document.visibilityState=='hidden') { //状态判断 //normal_title=document.title; document.title = '标题二'; }else { document.title = '标题一'; } }); </script>
2、scroll事件的信息获取
- 上下滚动:
document.documentElement.scrollTop
- 上下滚动:
document.body.scrollTop
- 上面两个是需要短路写,防止兼容问题
- 左右是将top换left
3、焦点事件
blur
:元素失去焦点时触发,没有冒泡,没有兼容问题focus
:元素获取焦点时触发,没有冒泡,没有兼容问题focusin
:元素获取焦点时触发,冒泡,ie5.5+
,Safari5.1+
,Opera11.5+
,Chrome
支持focusout
:元素失去焦点时触发,冒泡,兼容同上
4、鼠标事件
- 左键单击:
click
- 右键单击:
contextmenu
- 双击:
dblclick
- 左键按下:
mousedown
- 左键弹起:
mouseup
- 鼠标放上去[^备注12]:
mouseover
- 鼠标离开[^备注12]:
mouseout
- ⭐(不含子)鼠标放上去[^备注13]:
mouseenter
- ⭐(不含子)鼠标离开[^备注13]:
mouseleave
- 鼠标移动事件:
mousemove
5、光标的位置
通过事件对象获得
6、修改键
通过shift
,ctrl
,alt
和window
或者cmd
修改鼠标事件,由于用户几乎不会使用快捷键和组合键,所以不做介绍
7、e.button
鼠标按钮判断
- 返回0:表示没有按下鼠标按钮
- 返回1:表示按下左键
- 返回2:表示按下右键
- 返回3:同时按下左右键
- 返回4:表示按下滑轮键
- 返回5:表示按下左+滑轮键
- 返回6:表示按下右+滑轮键
- 返回8:表示按下三个键
8、鼠标滚轮事件
ie6
首先实现:mousewhell
事件,对应的event对象里包含一个特殊的属性,whellDelta
,当向上滑动时,它是120
的倍数,向下时是-120
的倍数
Opera9.5版本之前是相反的
9、键盘事件
-
按下:
keydown
-
弹起:
keyup
-
无论按下弹起:
keypress
-
判断按键码:通过
e.keyCode
获取判断 -
判断组合键:
- alt 键按下得到 true,否则得到 false:
altKey
- shift 键按下得到 true,否则得到 false:
shiftKey
- ctrl 键按下得到 true,否则得到 false:
ctrlKey
- alt 键按下得到 true,否则得到 false:
-
在可编辑区域输入:
textInput
:为DOM3新增通过其event对象的特殊属性
inputMethod
可以判断输入方式- 0:表示浏览器不确定是咋输入的
- 1:键盘输入
- 2:粘贴
- 3:托放进入
- 4:使用IME输入
- 5:表单输入
- 6:手写输入
- 7:语言输入
- 8:以上方法组合输入
- 9:脚本输入
10、表单事件
- 提交表单:
submit
- 获取焦点:
focus
- 失去焦点:
blur
- 内容改变并失去焦点:
change
- input的value值实时改变:
input
- 低版本IE中的input事件:
onpropertychange
- 阻止提交事件使用阻止默认事件:
e.preventDefault()
checkbox
判断:input.ckecked
||input.checked=true
。
11、事件的封装
function bind(ele,type,callback){
tyr{
ele.addEventstener(type,callback,false)
}catch(e){
ele.attachEvent("on"+type,callback)
}
}
- 绑定是bind
- 其他是unbind
- 将要绑定事件的对象:ele
- 事件类型:type
- callback处理事件的函数:callback
11、符:
还有一些比较冷门的事件:复合事件,变动事件,HTML5事件,这些是为开发者设计检测的事件,不作介绍。
12、设备事件🌙
这个真的是臣妾做不到了,由于全面屏的不断发行和使用,按键和方法也在发生着巨大的变化,jQuery Mobile
上有具体的模块,没法进行移动设备实验
13、表单的补充
大部分已经在html里介绍过,只介绍部分js的属性和方法
1、操作粘贴板
Opera不支持通过JavaScript访问粘贴板
berorecopy
:在发生复杂操作前触发copy
:在发生复杂操作时触发beforecut
:在发生剪切操作前触发cut
:在发生剪切操作时触发beforepaste
:在发生粘贴操作前触发paste
:在发生粘贴操作时触发
2、自动切换焦点
主动获取焦点:.focus()
input的字数判断,满足条件时添加input.focus()
使应该获取的input元素获取焦点
3、富文本编辑🌙
即iframe
标签内容编译
1、使用contenteditable
属性
可以把contenteditable
属性给页面中的任何一个元素,然后就可以编辑该元素了
<div class="editable" id="richedit" contenteditable></div>
还可以打开关闭编译模式
div.contenteditable=true;//true:打开;false:关闭;inherit:继承父元素
2、操作富文本
document.execCommand()
,极其冷门,可能一辈子都用不到,后续继续编辑
3、富文本选区
使用框架(iframe
)的getSelection()
方法;后续继续编辑
14、Canvas绘图🌙
最期待的功能
15、离线应用存储问题
1、离线检测
navigator.onLine
;判断是否联网,是true,否false。之前介绍navigator
时已经提到
可获取。可修改赋值
2、应用缓存
HTML5
的应用缓存,或者简称appcache
,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
检测应用缓存的状态是applicationCache.status
,属性值是常量
- 0:无缓存
- 1:闲置
- 2:检查中:下载描述文件并检查更新
- 3:下载中
- 4:更新完成:已经下载完毕,可以通过
swapCache()
使用
应用缓存还有很多相关的事件,表示其状态的改变
checking
:在浏览器为应用缓存查找更新时触发error
:在查找更新或下载期间出现错误触发noupdate
:在检查描述文件发现文件没有变化时触发downloading
:在开始下载应用资源时触发progress
:在文件下载应用缓存的过程中持续不断触发updateready
:在页面新的应用下载完毕可以通过swapCache()
触发cached
:在应用缓存完整可用时触发
3、cookie
1、请求头信息
HTTP Cookie
,通常直接叫cookie
发生set-cookie时请求头如:
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie:name=value;expires=Mon, 22-Jan-20 07:10:24 GMT;domain=.wrox.com
//在传送时都必须时URL编码
Other-header:other-header-value
每添加Cookie HTTP头将信息发回服务器
GET /index.html HTTP/1.1
Cookie: name=value
Other-header:other-header-value
2、个数限制
低版本IE
最低20个cookie,其他的最好不要超过50个
字数最后是在4095B以内
3、增删改查
1、增/改:document.cookie="键=值[,失效时间]"
不设置失效时间的话,默认在浏览器关闭时失效,且失效时间是国际协调时间,中国的要减去8小时,单位为毫秒数
2、删除:document.cookie="键=null,当前时间前一秒"
cookie无法直接手动删除,只能将失效时间提前达到删除的目的。
3、查:document.cookie()
;获取所有的cookie,返回的是字符串
4、封装的简单cookie函数(这是简单粗暴的,但不是最好的)
/*jshint esversion: 6 */
//设置或添加或修改cookie的函数
(function (){
return function setCookie(key,value,indite){
let date=new Date();
if(indite!=null){
date.setTime(date.getTime()-8*60*60*1000+indite*1000);
document.cookie=key+"="+value+";expires="+date;
}else{
document.cookie=key+"="+value;
}
};
})();
//读取指定cookie封装
(function (){
return function getCookie(key){
const cookieArr=document.cookie.split(";");
let value="";
cookieArr.forEach(item=>{
if(item.split("=")[0].trim()==key){
value=item.split("=")[1].trim();
}
});
return value;
};
})();
//删除cookie封装
(function (){
return function delCookie(name){
setCookie(name,null,-1);
};
})();
子cookie的概念,就是在cookie里面存放更小段的cookie
4、localstorage
由于其他的方法各种兼容和bug等问题,所有没有介绍,带其发展强大,再追加补充
1、本地存储
-
解除了cookie的4k限制,存储量可以达到5m
-
第一次访问服务器之后,可以发数据存储到客户的浏览器中
-
低版本的浏览器不支持,ie8一下
-
受同源策略保护。
-
版本支持检测
if(!window.localStorage){ alert("请升级浏览器"); } //业务逻辑代码
2、增删改查
-
增加/修改
localStorage.setItem('name','秋香'); //在localSrotage里查看,覆盖式创建,即修改也是它
-
获取
let str=localStorage.getItem('name'); let str=localStorage.key(下标);//获取指定下标key的值,不建议使用,因为你也知道具体的下标
-
删除
localStorage.removeItem('name'); localStorage.clear();//清空所有的本地存储。
3、和json
的结合使用
let obj={
name:'石榴姐',
age:12,
hobby:'演习'
};
let str=JSON.stringify(obj);
localStorage.setItem('info',str);//将转换成的自负床存到本地存储
let read=localStorage.getItem('info');
console.log(JSON.pares(read));//读取为接送对象
4、storage
事件
用来监听本地存储的事件
domain
:发生变化的存储空间的域名key
:设置或删除的键名newValue
:如果是设置值,则是新值;如果是删除键,则是nulloldValue
:键被更改之前的值
document.onstorage();
5、indexedDB
数据库🌙
后续继续处理
16、AJAX和Comet🌙
-----------------相关内容,可跳转主页获取
https://blog.csdn.net/weixin_44070254
17、部分功能vscode的插件更好
https://blog.csdn.net/weixin_44070254/article/details/116091809?spm=1001.2014.3001.5501
前端技术交流群:925570980 欢迎各位萌新大佬加入技术交流~
总结不易,觉得这篇博文对你帮助,推荐收藏。 感谢关注点赞,您对我的支持是继续写作的最大鼓励~