文章目录
对象、属性、函数、方法的区别?
console:这是一个对象,无前后缀
.length:这是对象的一个属性,点做前缀
alert():这是一个函数,括号做后缀,函数是在对象外定义的
.log():这是对象的一个方法,对象和函数的结合体,点做前缀,括号做后缀,方法就是对象内定义的函数
js对象
- 对象的规范:**console:**这是一个对象,无前后缀
1.console
console:控制台,js的内置对象,控制输出到控制台的中的数据
-
.log(输出的内容):控制台输出方法
- console.log(‘输出的内容’);:括号表示调用函数,引号是定义字符串类型,引号中的内容是给函数的参数
- 控制台输出的内容会全部显示在浏览器的console中,console.log的执行不会打断程序的运行
- console是js中的内置对象,通过.可以调用它内置的log“方法”,console是对象,log是对象中的函数。
-
.dir(标签对象):获取标签变量的详细对象信息
2.document
Document:文档对象模型
属性:
- .documentElement:获取html元素
-
.clientWidth/Height:获取不带滚动条的浏览器宽度,其实就是html元素,根标签的宽高
-
.scrollTop:获取滚动条已经动高度,不是只读的,可以修改值来规定滚动条滚动了多少
-
document.documentElement.scrollTop= 500;//使打开页面时滚动栏距离顶部的值为500
-
- .body:获取body元素
方法:
-
.write():文档写入,将结果写入到文档中,我们可以在网页上看到写入的数据,会替换掉页面原来的内容
-
.getElementById(“id名”):根据id获取元素节点,由于id是唯一的,所以直接返回单元素
-
.getElementsByClassName(“类名”):根据类名获取元素节点,类名可以重复,所以返回的是元素数组
-
.getElementsByTagName(“标签名”):根据标签名获取元素节点,标签名可以重复,所以返回的是标签数组
- .getElementsByTagName("*"):获取html文件中所有的标签,封装为一个类数组对象
-
.querySelector(“选择器”):根据选择器获取元素,只会获取一个元素,单选,所以返回的是单元素,注意加选择器的前缀
-
.querySeletorAll(“选择器”):根据选择器获取元素,能够获取所有符合选择器条件的元素,多选,所以返回元素数组
-
.createElement(“标签名”):用于创建一个指定tagname的html元素,创建出来的节点是孤儿标签,它没有被挂载到dom树上面
-
.createTextNode(“文本内容”):创建一个孤儿文本节点。
3.window
window:BOM,浏览器对象模型
-
.onload:页面加载完毕事件,延迟运行事件,当页面资源、结构全部加载完成之后,才会执行这个函数表达式
-
.hasOwnProperty(属性名):方法,检查对象中是否有该属性,返回布尔值
-
.innerWidth/Height:窗口的内宽高,包含竖直/水平滚动条宽度
-
.outerWidth/Height:窗口的外宽,包含竖直/水平滚动条宽度
- 窗口全屏时没有边框,如果窗口不占全屏,会有边框,这时outerWidth/Height会稍大于innerWidth/Height
-
scorllY:表示在垂直方向已滚动的像素值,但在获取窗口卷动高度时常与document.documentElement.scrollTop属性一起获取滚动值,是只读的,不能赋值
-
var scrollPX=window.scrollY||document.documentElement.scrollTop;//短路运算,如果第一个有值,则赋值第一个,否则赋第二个值
-
.navigator:获取本浏览器的信息对象
-
.history:获取浏览器的操作会话历史对象
-
location:获取当前网址
-
.href:获取当前页面网址
-
.href=“网址”:跳转到某个页面
-
.reload(true):强制刷新
-
search:获取当前浏览器的GET请求参数
-
比如访问http://www.baidu.com?a=1&b=2
-
window.location.search;//"?a=1&b=2"
-
-
4.math
10个常用方法
Math:数学对象,存放一些数学运算的方法,比如幂计算方法.pow()和开根号计算方法.sqrt()
-
Math.abs(-1):求绝对值,abs就是absolute的缩写,绝对的意思
-
Math.ceil(1.2):2,向上取整
-
Math.floor(1.9):1,向下取整
-
Math.round(1.5):2,四舍五入
- Math.round(-1.5),-1,负数比较特殊,只要比-1.5小就是舍,只要比-1.5大一点点,比如-1.51得到的结果就是-2
-
Math.PI:得到圆周率
-
Math.sqrt(4):2,求开平方
-
Math.pow(3,2):求幂次方,3的2次方
-
Matn.random():随机数,获取包含0,但不包含1的随机小数
- 求n-m之间的随机小数:Math.random()*(m-n)+n;
- 求n-m之间的随机整数,包含m:Math.round(Math.random()*(m-n)+n);
-
Math.min(1,2,3):求最大值
-
Math.max(1,2,3):求最小值
-
不能够求数组中的最大值,需要用展开运算符…转换一下
-
Math.min(...[1,2,3]);//结果为3 ...能够将数组展开为1,2,3 //两个数组拼接成一个数组,再加数据项,也可以用...展开运算符 var ary1=[1,2,3]; var ary2=[5,6,7]; var newary=[...ary1,...ary2,10];//结果就是拼接够的数组
-
5.array
Array:数组对象,内置了一些关于数组处理的方法
- .isArray():判断对象是不是一个数组
6.number
- Number.Max_safe_integer:获取数字整型的最大安全范围
- Number.Min_safe_integer:获取数字整形的最小安全范围
7.object
- .getOwnPropertySymbols(“对象变量名”):获取对象中所有唯一数据类型的键值对
- .getPrototypeOf(“对象名”):获取对象名对象的原型
8.navigator
Navigator:导航栏的意思,能够通过这个对象获取浏览器的相关属性和标识
- .appName:获取浏览器的官方名称
- .appVersion:获取浏览器版本
- .userAgent:浏览器的用户代理,(含有内核信息和封装壳信息)
- .platform:用户的操作系统
9.history
window.history对象就封装了操作浏览器会话历史
-
常用的操作就是模拟浏览器回退键
-
history.back()方法,等于点击浏览器的回退键
-
history.go(-1),等同于history.back
//实现超链接回退到上一页面
<a href="javascript:history.back();"></a>
js函数
- 函数的规范:alert():这是一个的函数,括号做后缀
1.输入输出函数
1.1alert()
alert():警告函数,弹出警告框
- alert(‘弹出的内容’);:括号表示调用函数,引号是定义字符串类型,引号中的内容是给函数的参数
- alert的特点:浏览器在遇到一个alert语句时,就会暂停程序的执行,直到用户点击了alert语句中的确定按钮,程序才会继续执行。
1.2confirm()
confirm():弹出确认框
- 存在返回值,如果用户点击确定,返回true,用户点击取消,返回false
1.3prompt()
prompt(‘请输入’):弹出输入框,括号中的文本是提示文本
- 存在返回值,点击确定返回值是输入的字符串型内容,如果内容为空,返回空字符串
- 点击取消,返回null
2.类型判断函数
2.1.typeof
typeof:类型判断,typeof是一个操作符,不是函数,在使用时不用将判断的值用括号括起来。它是特殊的函数,因为它后缀没有括号,而是直接输入值。
-
使用规范:typeof+要测试的数据;
typeof 5;//number typeof '慕课网';//String //输出变量类型 var a= 11; console.log(a)//11 console.log(typeof a);//number
-
使用方式:
- 在浏览器repl环境下,直接输入typeof 5;
- 在html编辑器中需要用输出语句比如console.log(typeof 5);
2.2isNaN()
isNaN():判断数据是否为NaN,返回布尔值,有缺陷,只要使用Number()函数转换结果为NaN,则它的返回结果就为true
3.类型转换函数
3.1Number()
- Number():函数,是系统的内置函数,可以将其他类型转换为数字类型
- 如果转换的数据不是纯数字,则转换之后的值是NaN
- 空字符串会转为0
- e会转为科学计数法中的e
- 布尔值:true:会转为1 ,false:会转为0
- undefined会转为NaN
- Null会被转为0
- Number('1+1‘)结果是NaN
3.2parseInt()
- parseInt()函数,功能是将字符串转为整数
- 注意:parseInt()会自动截取字符串第一个非数字之前的数值作为整数,点也算是非数值
- 如果字符串中第一个字符不是数字,则直接转为NaN数值
- parseInt不会四舍五入
- parseInt也常用来净化,比如将100px转为100
3.3parseFloat()
-
parseFloat()函数,功能是将字符串转为浮点型
-
parseFloat与parseInt的区别就是parseFloat会认为字符串中第一个小数点儿也是合法的
-
parseInt和parseFloat转换true和float时转的值也是NaN
3.4String()
- String()函数将数字、布尔值、undefined和null转为长度相同的字符串。
- 科学计数法和非10进制数字会转为10进制值
3.5Boolean()
- Boolean()函数,将其他值转为布尔值
- 数字转布尔值:0和NaN是false,其他是true
- 字符串转布尔值:空字符串""是false,其他都是true
- undefined和null转布尔值:转为fasle
4.Date()
- new Date():获取当前本机时间
- Date
- .prase():将日期对象转为时间戳,精确到秒
5.定时器函数
setInterval():设置定时器,该函数可以重复调用一个函数,设置一个具体的固定的时间间隔。
-
var a=0; setIntervat(function(){ //这个函数将自动以固定时间间隔被调用。 console.log(++a);//每两秒会输出一个++a的结果 },2000)
-
():括号内有两个参数,
- 第一个参数:匿名函数,要执行的函数
- 第二个参数:间隔时间,以毫秒为单位,2000就是2秒
clearInterval():清除定时器函数,可以清除一个定时器
-
根据定时器的变量名来清除定时器,如果传入的定时器变量名是undefined是不会报错的
-
var timer=setInterval(function(){ },2000) clearInterval(timer);//清除timer定时器。
-
6.延时器函数
- setTimeout()函数可以设置一个延时器,当指定时间到了以后,会执行函数一次,不再重复执行
setTimeout(function(){
//函数体会在两秒之后执行一次,只会执行一次
},2000)
- clerTimeout()函数可以清除延时器
7.eval()
eval():执行函数
- var str=arr.join("+");//将数组中各项用+连字符连接,组成新的字符串
- eval(str);//eval会将字符串作为数学运算执行
8.dir()
dir():获取标签的详细信息
js方法
- 方法规范:**.log():**这是对象的一个方法,对象和函数的结合体,点做前缀,括号做后缀
1.String常用方法
String常用方法都不会改变原字符串,都需要新变量去接收新字符串
- .charAt():得到指定位置字符
- 字符串中字符从左到右从零开始编号,通过输入编号获取指定位置的字符。
- 如果输入的位置在字符串中没有,则返回空字符串。
- .substring():提取子串
- 使用方式:substring(5,10);截取字符串中从第5位开始到第10位结束的字符串,不包括第10位,即符合左闭右开原则。
- substring如果省略第二个参数,那么就会从第一个参数开始截取到字符串的结尾
- substring中的两个参数,第一个参数可以大于第二个,系统会自动调整小的数值到前面
- .substr():提取子串
- substr(5,10):截取字符串中从位置5开始,长度为10的子串
- substr中的第二个值可以省略,表示到字符串结尾。
- substr中第一个值可以是负数,表示从倒数第几个字符开始
- .slice():提取子串
- slice(5,10):与subString相同,同样是截取位置5到10但不包括10的子串
- slice的参数可以是负值
- slice中的第一个参数必须小于第二个参数
- .toUpperCase():将字符串全部转为大写
- .toLowerCase():将字符串全部转为小写
- .indexOf():检索字符串
- 返回某个指定的字符串值在字符串中首次出现的位置
- 如果要检索的字符串值没有出现,就返回-1
- 检索的不管是字符还是字符串,都需要用引号包裹
- .lastIndexOf(“子串”):获取子串最后一次出现的位置,没有出现返回-1
- .replace(“好的”,“坏的”):找到字符串中第一次出现的”好的“字符串,并替换为"坏的"
- 如果想替换所有的,需要使用正则
- str.split():字符串以括号中的分割符进行分割,分割成数组
- split():字符串不分割,存成一个数组中的一个数据项
- split(""):将字符串每一个字符都分为一个数据项,得到一个数组
- split("😊:将字符串按:进行分割,得到一个数组
- str.includes():与数组的用法相同,都是返回布尔值类型
2.toString()
.toString()方法,将值转为String类型
- 几乎所有的值,都有toString()方法,功能是将值转为字符串
- 纯数字在调用.方法时,数字需要用括号括起来。
3.toFixed()
.toFixed():保留指定位数的小数
4.Math.random()
- Math.random():随机数,会随机获取一个0-1之间的小数,小数位数不固定
- .random()*10:获得0到10之间随机的小数
- parseInt(Math.random()*10):获取0-9之间的随机整数
- parseInt(Math.random()*(b-a+1)+a):随机获取[a,b]区间的整数
5.数组常用方法
5.1.数组判断方法
- Array.isArray():判断对象是不是array数组类型,返回boolean值
5.2.数组头尾操作方法
数组的头尾操作方法不需要再用=来接收,会自动修改原来的数组
-
.push():在尾部插入元素
- 参数是要推入的项,多个项用,隔开
-
.pop():在尾部删除元素
- pop里面不需要带参数
- 删除数组的最后一项,并返回删除项的值,用变量来接收
-
.unshift():在头部插入元素
- 参数是要推入的项,多个项用逗号隔开
-
.shift():在头部删除元素
- shift里面不需要带参数
- 删除数组的最后一项,并返回删除项的值,用变量来接收
5.3截取、替换数组方法
- .splice(index,content,new content):拼接,用于替换数组中的指定项,也可以用作在指定位置插入新项,还可以用来删除指定项
- 第一个参数是指定位置,第二个参数是删除连续项的个数,后面多个参数是替换的数据
- splice会以数组形式返回被删除的项
- arr.splice(n):如果只写第一个参数,就是删除从n开始删除后面的所有项,如果n是0,则返回的结果是与原数组一模一样的数组,但与原数组的空间地址不同,原数组变为空数组。
- arr.splice(n,m):如果只写两个值,表示删除从n开始的m项
- arr.splice(arr.length-1,1):在arr的末尾删除一项
- arr.splice(0,1):删除arr头部的一项
- arr.splice(arr.length,0,5):在arr的末尾插入一个5
- arr.splice(0,0,5):在arr的开头插入一个5
- arr.splice(3,2,‘X’,‘Y’,‘Z’);
- 3表示从arr数组中的下标为3的数据项开始替换
- 2表示连续替换两项,表示从3开始,删除两项,再插入后面要替换的值
- ‘X’,‘Y’,‘Z’:这是插入的值,插入到删除两项后下标为3的数组位置
- arr.splice(2,0,‘X’,‘Y’,‘Z’);
- 0代表不删除原来数组中的数据项,而是插入到该位置数据的前面,自己占到下标为2的位置
- arr.splice(2,4);
- 表示删除从下标2开始,后面连续的4项,因为后面没有写要修改的值,所以没有插入新值
- .slice(截取起始位置,截取结束位置):截取数组,与字符串的slice()方法相似,[a,b),截取从下标a开始,到下标b-1的数组,需要用一个新的变量接收截取的结果。
- arr.slice(a,b):表示截取从下标a开始,到下标b结束,不包括下标b的子数组
-
- .slice(n):如果第二个参数不写,则是从索引n开始一直到最后。
- .slice(0)():表示将数组全部的复制一份
- .slice(-3,-2):slice可以跟负数索引,但是第一个值
- slice可以是负值,表示倒数第几个。
5.4字符串数组转换方法
-
.toString():将数组转为字符串,不改变原数组,需要新变量接收字符串
-
.join(),使数组转为字符串,括号里面是各数据项之间以什么作为连接符,默认是逗号
- .join():以逗号为连接符将数组转为字符串
- .join(’’):空字符串代表两个数据项之间没有连接符
- .join(😃;以冒号为连接符将数组转为字符串
- .join(!):以!为连接符将数组转为字符串
-
.split(拆分标准):使字符串转为数组,括号中的参数是以什么字符拆分字符串,一般不能留空
- .split():将整个字符串转为只有一项的数组
- .split(’’):空字符串表示将字符串中每一个字符拆分为单独一个数组项
- .split(-):以-为拆分标准将一个字符串拆分成一个数组
- .split(!):以!为拆分标准将一个字符串拆分为一个数组
5.5数组字符串其他常用方法
- .concat()方法可以合并连接多个数组
- .concat()不会改变原数组,所以我们需要定义一个新变量去接收合并后的新数组
- var d=a.concat(b,c):a数组连接b数组,再连接c数组,得到的新数组赋值给d数组
- var d=a.concat(b,5,6,7):a先连接数组b,再在后面拼接5,6,7
- .reverse()方法用来将数组中的全部项置反
- .reverse()方法更改原来的数组
- .indexof()方法是搜索数组中的元素,并返回它首次出现的位置,如果没有该元素则返回-1
- .includes()方法的功能是返回数组中是否存在指定的值,返回的是boolean值
<script>
var ary = [1, 2, 3, 4, 5];
// 数组倒置
console.log(ary.reverse()); //[5,4,3,2,1];
//数组转字符串
str = ary.join();//"5,4,3,2,1";
console.log(str);
var str2 = ary.join("");//"54321";
console.log(str2);
var str3 = ary.join("-");//"5-4-3-2-1";
console.log(str3);
//数组替换、删除、添加数据项
ary.splice(1,2,6);//返回值是splice截取的值[4,3]
console.log(ary);//[5,6,2,1]
ary.splice(1,2);//纯删除没替换数据,返回截取的值[6,2]
console.log(ary);//[5,1]
console.log(ary.splice(1,0,3,2,1));//[]空数组
console.log(ary);//纯添加,将3,2,1插入到下标为1的数据项前面,使3的下标成为1,返回结果:[5,1,3,2,1]
//字符串转数组,转换完之后数组中的数据项是字符串类型
var array1=str.split();//由于没给分割条件,将整个字符串转为数组中的一个数据项
console.log(array1);//['5,4,3,2,1']
var array2=str.split("");//空字符串代表字符串中每一个字符都分割开,用逗号隔开,字符串中的逗号也会被分割为一个字符
console.log(array2);//['5',',','4',',','3',',','2',',','1']
var array3=str.split(",");//根据逗号分割字符串,逗号扔掉
console.log(array3);//['5','4','3','2','1']
//数组拼接
var a=[1,2];
var b=[3,4,5];
var c=[8,8];
var con=a.concat(b,c);//a后面拼接b,b后面拼接c,得到的结果需要一个新的变量来接收
console.log(con);//[1, 2, 3, 4, 5, 8, 8]
//push、pop、shift、unshift
var arrr=[1,2,3,6];
console.log("--------------------------------------");
console.log(arrr.pop());//4,返回的是pop出来的值
console.log(arrr);// [1, 2, 3],修改的是原数组
console.log(arrr.push(2));//4,返回的是当前数组长度
console.log(arrr.shift());//弹出首个数据项
console.log(arrr.unshift(6));//添加到首个数据项
console.log(arrr.indexOf(2));//1,返回数组中第一次出现2的下标
console.log(arrr.includes(22));//false,返回布尔值,判断arrr中是否存在22
</script>
5.6遍历
- .forEach():遍历数组中的每一项
arr.forEach(function(item,index){
console.log(item,index);
})
- item表示数组中数据项
- index表述数组索引值
.map():遍历数组中的每一项,并且返回一个在原数组基础上映射后的新数组,原数组不改变
-
<script> var arr=[1,23,45,9,4]; //item表示数据项 index表示对应的数组下标 var newarr= arr.map(function(item,index){ return item++; }); newarr;//新数组是在原数组的基础上每一项加1 </script>
6…Sort()
-
.Sort():js中的内置排序方法,用于数组的自动排序
-
.Sort():直接使用sort方法默认排序是按首字符(0-9)的顺序排序,101排在2前面
-
想要实现从小到大排序需要添加函数表达式
-
alert(arr.sort(function (a,b){ return a-b; }));
-
-
想要实现从大到小排序需要添加函数表达式
-
alert(arr.sort(function (a,b){ return b-a; }));
-
-
7.节点方法
7.1.appendChild()
.appendChild():方法是用来将孤儿节点过载到DOM树已经存在的节点上的
- 使用document.createElement()方法,创建一个节点,口号内是标签名
- 创建出来的节点是孤儿节点,因为没有挂载到DOM树上面
- 必须继续使用appendChild()或者insertBefore()将孤儿节点插入到DOM树上
- 任何已经在DOM树上的节点,都可以调用appendChild()方法,它可以将孤儿节点挂载到它内部,成为它的最后一个子节点
父节点.appendChild(孤儿节点)
7.2.insertBefore()
.insertBefore()方法是将孤儿节点插入到父节点的标杆节点之前
父节点.insertBefore(孤儿节点,标杆节点)
7.3.removeChild()
.removeChild:删除一个子节点
父节点.removeChild(要删除的节点);
节点的增删改移动?
创建:创建出来的节点是孤儿节点,需要放到父节点中
//创建一个元素
document.createElement("标签名");
//创建一个文本节点
document.createTextNode("文本内容");
添加到父节点:
//将所有孤儿节点添加到父节点所有子节点的后面
父节点.appendChild("孤儿节点变量名");
//插入到父节点指定子节点的前面
父节点.insertBefore("孤儿节点名","指定子节点名");
删除:只有父元素能够删除子元素,自己不能删自己
//通过父元素删除里面的子节点
父节点.removeChild("子节点")
克隆:克隆旧节点,克隆到的新节点是孤儿节点
var newNode=旧节点.clone();//克隆旧节点,不克隆它里面的子节点 浅克隆
var newNode=旧节点.clone(true);//克隆旧节点,克隆它里面的子节点 深克隆
8.添加事件方法
addEventListener()方法
-
addEventListener:给节点添加事件监听器
-
obox.addEventListener('click',function(){ //事件的处理函数体 },true);
- ():括号内分为三部分
- 第一部分:事件名,在DOM0级事件名的基础上去掉on前缀,比如onclick改为click
- 第二部分:执行的函数体
- 第三部分:布尔值,true监听捕获阶段,false监听冒泡阶段
- 如果嵌套盒子中,所有方法即设置了冒泡阶段,又设置了捕获阶段,外层嵌套的盒子会先执行捕获阶段,等执行到最内层盒子时,它的两个阶段的执行顺序按照书写顺序执行,接下来再由内向外执行嵌套盒子的冒泡阶段事件
- 嵌套盒子事件先执行捕获事件,执行完所有盒子的捕获事件以后,再由内向外执行冒泡事件
- 最内层盒子事件执行顺序按书写先后顺序执行
- 同名事件按书写顺序执行
e.stopPropagation()
- e.stopPropagation():停止事件传播方法,事件传播遇到这个方法就会停止
9.Date常用方法
date日期对象:13个方法:
- 八个,获取年月日时分秒毫秒星期等单个数据的方法:
- .getFullYear():得到年份
- .getMonth():得到月份0-11,获取的月份,比真实月份少1
- .getDate():得到日期1-31
- .getHours():得到小时数0-23
- .getMinutes():得到分钟数0-59
- .getSeconds():得到秒数0-59
- .getMilliSeconds():得到毫秒0-999
- .getDay():得到星期0-6,0代表星期日,1-6代表星期1-6
- 三个,获取日期时间字符串的方法:
- .toLocaleString():获取本地的日期时间字符串
- .toLocaleDateString():获取本地的日期字符串
- .toLocaleTimeString():获取本地的时间字符串
- 两个,将日期对象转为时间戳的方法:
- Date.prase():将日期对象转为时间戳,精确到秒
- .getTime():转为时间戳,精确到毫秒
10.节点属性方法
当我们想要给某节点甚至一个自己写的属性时,如果这个属性是非css3官方的,不能直接通过赋值的方法创建属性,而是使用setAttribute()和getAttribute方法,移除属性需要使用removeAttribute()方法
node.setAttribute()
- 设置节点的属性有两种方法,第一种是用点的方式创建,第二种是用.setAttribute()的方式创建属性
- 当创建的节点属性是标签自带的,则使用两种方法时是无区别的
- 当创建的属性不是html规范属性时,就有区别了
- 通过点设置的非html规范属性,只会添加在节点的对象中,不会添加在结构上,用getAttribute获取不到该属性
- 通过setAttribute设置的非html规范属性,只会添加在结构是哪个,不会添加在对象中,用obj.属性名的方式获取不到该属性
//使用点设置属性
box.index=1;
box.getAttribute("index");//null,因为设置的是非html官方属性,不会显示在结构上,但是在对象中能够看到index:1属性
//使用setAttribute设置属性
box.setAttribute("outer",2);
box.getAttribute("outer");//2,能够获取结构上的属性值
<div class="box" outer="2">//这个非html规范属性被设置在了html结构上
box.outer;undefined;//undefined,非规范属性没有被定义在节点对象中
-
node.setAttribute('data-n',123);属性名为data-n,属性值为123
-
第一个参数:属性名
-
第二个参数:属性值
-
node.getAttribute()
- node.getAttribute(‘属性名’):获取指定属性名的属性值
node.removeAttribute()
- node.removerAtribute(‘属性名’):移除指定属性
11.正则表达式方法
-
正则表达式可以“打点”调用哪些方法
-
.test():测试某个字符串是否匹配正则表达式,返回布尔值
-
.exec():根据正则表达式,在字符串中进行查找,返回结果数组或者null
- 直接检索字符串,匹配到第一个符合正则表达式规范的字符,就会返回这个数组
- 数组内容为返回字符、字符所在下标、父串内容
- +表示贪婪查询,会尽可能多的获取更长的子串
- g表示全局搜索,在表达式后面加上g使得每次检索的结果可以逐条遍历
<script> var str="121abcsd21234a345"; var regexp=/\d/;//只检索第一个符合条件的字符 var regexp1=/\d+/;//+贪婪检索,尽可能多的检索连续符合条件的字符串 var regexp2=/\d+/g;//g全局检索,开启遍历,每次检索都会从上一个符合条件的字符后面开始 var result; // 遍历出所有符合正则表达式的字符串数组 while(result=regexp2.exec(str)){ console.log(result); } //['121', index: 0, input: '121abcsd21234a345', groups: undefined] </script>
-
11.字符串相关正则方法
- .search():在字符串中根据正则表达式进行查找匹配,返回首次匹配到的位置索引,不存在则返回-1
- .match():在字符串中根据正则表达式进行查找,返回一个所有符合条件的字符串数组,找不到返回null
- .replace():使用替换字符串替换掉匹配到的子字符串,可以使用正则表达式
- .split():分割字符串为数组,可以使用正则表达式
12.硬绑定this指向方法
call和apply能够指定函数的上下文,并且立即执行函数
fun.call(xiaoming);//调用fun函数,并且以小明为指定上下文对象
fun.apply(xiaoming);//调用fun函数,并且以小明为指定上下文对象
- call和apply的区别
- 当函数有形参时,使用call方法指定上下文,传实参时,用逗号从后面罗列
- 但函数有形参时,使用apply方法指定上下文,传实参时,使用数组的形式包裹实参
- 如果传入参数的格式弄错,可能就不能正确传入到形参中了,甚至会报错
fun.call(xiaoming,50,89);//50和80是传给函数的实参
fun.apply(xiaoming,[50,80]);//[50,80]是传给函数的实参
- 什么时候用call,什么时候用apply
- 当传递的实参是数组或者类数组变量时,如arguments,用apply
- 传递的参数是逗号罗列时,用call
bind能生成一个新的绑定了指定this的函数,不执行它
var obj={
age:18,
test:function(a,b){
console.log(this.age,a,b);
}
}
setTimeout(obj.test.bind(obj,1,2),1000);
//将将指定函数中的this绑给他的第一个参数,并且返回一个新的this指向已经定死的硬绑定函数!!
13.判断对象所属的构造函数
13.1instanceof
-
instanceof:属于
-
instanceof关键字:用来判断一个实例对象,是否属于后面这个类
function Fn(){} var fnn=new Fn(); console.log(fnn instanceof Fn);//true,判断fnn属于Fn类吗 console.log(fnn instanceof Array);//false,判断fnn属于Array类吗 console.log(fnn instanceof Object);//false,万物皆对象,所有的实例原型链都是Object基类
13.2 in和hasOwnProperty
-
in检测私有和作用域链范围,hasOwnProperty检测私有范围
-
“name” in “arr”:检测某个对象是否有某个属性或方法(不管公有私有)
-
arr.hasOwnProperty(“name”):检测某个对象是否存在某个私有属性或方法
-
公有还是私有,是相对来说的,主要看针对的对象是谁
-
function Fn(name, age) { this.name = name; this.age = age; } var f1 = new Fn("lili", 18); Fn.prototype.name="haha"; "name" in f1;//true "toString" in f1;//true f1.hasOwnProperty("name")//true f1.hasOwnProperty("toString")//false Fn.prototype.hasOwnProperty("name");//true
13.3.getPropertypeOf()
- Object.getPropertypeOf(“对象名”):获取该对象的原型
14.ES6新增方法
字符串6个,数组7个,对象4个。
字符串新增的常用方法有6个:
- .includes(“ab”,2):判断字符串中是否包含某些字符或连续字符串,返回布尔值
- 第一个参数:想判断的字符串
- 第二个参数:开始搜索的位置
- 字符串的引用:网址参数键值对拼接,判断是否已经存在问号
- .padStart(5,“ab”)/.padEnd(5,“ab”):
- .padStart从开头/.padEnd从结尾,补全字符串长度,原字符串长度大于或等于目标长度,则不进行补位
- 第一个参数:补全以后字符串应该有的长度
- 第二个参数:想用什么字符进行补位
- 如果省略第二个参数,默认使用空格补全长度
- 常应用在规范显示日期格式
- .trimStart()/.trimEnd():清除字符串的首或尾空格,中间的空格不会清除
- .trim():首尾空格都清除
- trim常用于表单提交的数据格式验证
数组的常用新增方法7个:
- arr.includes(“a”,3):判断数组中是否有某个成员,判断标准是基本严格等于(===),但认为NaN全等于NaN
- 第一个参数:检测是否包含某个数据项
- 第二个参数:从第几项开始检测
- 应用:去重
- Array.from():将其他数据类型转换成数组
- 第一个参数:要遍历的对象
- 第二个参数: 回调函数,作用类似于数组的map方法,用于对每个元素进行操作,将处理后的值放入返回的数组
- 第三个参数:修改this指向,箭头函数无法修改this指向
- 参数类型可以是:
- 所有可遍历的,但是可遍历的使用展开运算符更方便:[…str]
- 拥有length属性的任意对象,只会转换length值个数据项。对象不够length值个键值对,用undefined填充
- arr.find()/findIndex():find找到某个值/findIndex找到某个值对应索引
- find(10):找到满足条件的某一个值,立即返回
- findIndex:找到满足条件的某一个值,立即返回它的索引
- 第一个参数:回调函数,与forEach里的回到函数用法相同,函数体内写查找条件
- 第二个参数:改变this指向,箭头函数无法修改this
- 应用:数据的筛选
- arr.keys():得到的是索引的可遍历对象,可以遍历索引值。
- arr.values():得到的是数据项的可遍历对象,可以遍历数据项值。
- arr.entries():得到的是数据项+索引组成的可遍历对象,遍历出索引,值组成的数组
- 可以用解构赋值的方式,单独获取索引或数据项:for(var [key,value] of arr){}
对象的新增常用方法4个:
-
Object.assign(obj1,obj2):合并对象, 将obj2中的内容,合并到obj1对象中,不会生成新的对象,改变第一个传入的对象,
- 可以合并多个对象
- 剩余运算符,{…obj}的形式是生成一个新对象
- 如何用Object.assign()合并出一个新对象,第一个参数传空对象
- 第一个参数叫目标对象**(Target),第二个参数叫源对象(Source)**
- 基本数据作为源对象:与对象的展开相似,先转换成对象,再合并
- 同名属性的替换:后面的会覆盖前面的
- 应用:合并默认参数和用户参数3
-
Object.keys():获取对象的键组成的数组
-
Object.values():获取对象的值组成的数组
-
Object.entries():获取对象的键和值组成的二维数组
-
与数组类似方法的区别
- 数组是实例的公有方法,返回的是遍历对象
- Object是构造函数的静态方法,返回结果是数组
-
keys是ES5的方法,values、entries是ES6新增的方法
-
应用:可以获取对象所有的键值对后,用for…of遍历这些二维数组。
-
js属性
1.长度判断属性
1.1.length
.length:长度,判断字符串的长度,其中的每个汉字、标点符号、英文单词、都算一个字符长度
2.获取文本属性
2.1.innerText
.innerText:获取标签内文本属性
var otext=obtn.innerText;//获取纯文本
obtn.innerText="<h1>好好</h1>";//将输入的文本不管是不是标签都会显示在页面上
2.2.innerHtml
.innerHtml:带有文字的标签+文字
var otext=omain.innerHtml;//获取带有文字的标签加文字
omain.innerHtml="<h1>好好</h1>";//将标签渲染成样式后,再显示到页面上
3.获取输入框内容属性
.value:获取输入框中的内容,也就是属性值
var ocontent=otext.value;
4.事件对象属性
4.1.鼠标位置属性
只针对于onmouseXX时间对象的属性
-
e.clientX:鼠标指针相对于浏览器窗口左上角的水平坐标
-
e.clientY:鼠标指针相对于浏览器窗口左上角的垂直坐标
-
e.pageX:鼠标指针相对于整个网页的水平坐标,整个网页的xy轴会随着滚动条的滚动而放大缩小
-
e.pageY:鼠标指针相对于真个网页的垂直坐标
-
e.offsetX:鼠标指针相对于事件源元素的水平坐标,事件源就是触发这个事件的盒子
-
e.offsetY:鼠标指针相对于事件源元素的垂直坐标
//获取鼠标指针相对于事件源元素的水平垂直坐标
oBox.onmouseover=function(e){
oInfo.innerHtml='offsetX/y'+e.offsetX+","+e.offsetY
+'clientX/y'+e.clientX+","+e.clientY//获取鼠标指针到浏览器窗口的xy值
+'pageX/y'+e.pageX+","+e.pageY;//获取鼠标指针到网页左上角的xy值
}
4.2字符码键码属性
只针对于onkeyXX事件对象的属性
e.charCode和e.keyCode属性
- e.charCode属性常用于onkeypress事件,表示用户输入的字符的“字符码”。
- e.keyCode属性常用于onkeydown事件和onkeyup,表示用户按下的“键码”
- e.charCode字符码
- 数字0-9:48-57
- 大写字母A-Z:65-90
- 小写字母a-z: 97-122
- e.keyCode键码
- 数字0-9:48-57
- a-z:不区分大小写65-90
- 四个方向键:左37、上38、右39、下40
- 回车键:13
- 空格键:32
4.3鼠标滚轮属性
只针对于.onmousewheel事件
- e.deltaY:鼠标滚轮方向,向下滑返回正值,向上滑返回负值
4.4事件委托属性
- e.target:触发此事件的最早的元素,即事件源元素,表示用户真正点击的那个元素
- tagName:获取标签名
- e.currentTarget:事件处理程序附加到的元素,表示真正执行了事件处理的元素
5.节点关系属性
5.1.childNodes
- ols.childNodes:获取ols节点的子节点数组
5.2.childElementCount
- ols.childElementCount:获取ols子节点的个数
5.3firstElementChild
- ols.firstElementChild:获取ols的第一个元素子节点
5.4lastElementChild
- ols.lastElementChild:获取ols的最后一个元素子节点
5.5firstChild
- ols.firstChild:获取ols节点的第一个子节点,可能是文本节点,也有可能是元素节点
5.6lastChild
- ols.lastChild:获取ols节点的最后一个子节点,可能是文本节点,也有可能是元素节点
5.7nextElementSibling
- ols.nextElementSibling:获取ols节点的后一个兄弟元素节点
5.8nextSibling
- ols.nextSibling:获取ols节点的后一个兄弟节点,可能是文本节点,也可能是元素节点
5.9previousElementSibling
- ols.previousElementSibling:获取ols节点的前一个兄弟元素节点
5.10previousSibling
- ols.previousSibling:获取ols节点的前一个兄弟节点,可能是文本节点,也可能是元素节点
js事件
1.文档对象事件
1.鼠标监听事件
1.1鼠标点击事件
.onclick:鼠标单击时会触发的事件,一次单击代表鼠标摁下并松开的过程,只摁下不松开不会触发单击事件
.ondblclick:鼠标双击时触发的事件
//鼠标单击事件
obox.onclick=function(){
alert.(1);
}
//鼠标双击事件
obox.ondbclick=function(){
alert.(2);
}
1.2鼠标进入事件
.onmouseover:鼠标划上时会触发的事件
.onmouseenter:鼠标进入某个对象是触发的事件,与onmuseover相似
//鼠标划上
obox.onmouseover=function(){
alert(2);
this//指定就是当前绑定的元素
}
1.3鼠标离开事件
.onmouseout:鼠标离开时会触发的事件
.onmouseleave:鼠标离开时会触发的事件与onmouseout相似
//鼠标离开
obox.onmouseout=function(){
alert(3);
this;
}
1.4鼠标移动事件
.onmousemove:鼠标移动时会触发的事件
//鼠标移动
obox.onmousemove=function(){
alert(3);
this;
}
1.5鼠标摁下事件
.onmousedown:当鼠标摁下某个对象时触发的事件
1.6鼠标松开事件
.onmouseup:当鼠标松开时触发的事件
1.7鼠标滚轮事件
.onmousewheel:当鼠标滚轮滚动是触发的事件
2.键盘监听事件
2.1.onkeypress
.onkeypress:当某个键盘的键被按下(系统按钮如上下左右箭头和功能键无法得到识别)
2.2onkeydown
.onkeydown:当某个键盘的键被按下(系统按键可以识别,并且先与onkeypress触发)
2.3onkeyup
.onkeyup:表示当某个按键被松开时触发的事件
3.表单监听事件
3.1onchange
onchange:当用户改变域内的内容时触发
3.2onfocus
onfocus:当某元素获得焦点时触发
3.3onblur
onblur:当某元素失去焦点时触发
3.4onsubmit
onsubmit:当表单被提交是触发
3.5onreset
onreset:当表单重置时触发
3.6oninput
oninput:当正在表单元素中输入东西时触发
4.页面监听事件
4.1onload
onload:当页面加载完成时触发的事件
window.onload=function(){
alert("页面加载完毕啦");
}
4.2onunload
onunload:用户关闭页面之前触发的事件
window.onunload=function(){
confirm("你是否要关闭页面");
}
5…addEventListener()
-
addEventListener:给节点添加事件监听器
obox.addEventListener('click',function(){
//事件的处理函数体
},true);
- ():括号内分为三部分
- 第一部分:事件名,在DOM0级事件名的基础上去掉on前缀,比如onclick改为click
- 第二部分:执行的函数体
- 第三部分:布尔值,true监听捕获阶段,false监听冒泡阶段
- 如果嵌套盒子中,所有方法即设置了冒泡阶段,又设置了捕获阶段,外层嵌套的盒子会先执行捕获阶段,等执行到最内层盒子时,它的两个阶段的执行顺序按照书写顺序执行,接下来再由内向外执行嵌套盒子的冒泡阶段事件
- 嵌套盒子事件先执行捕获事件,执行完所有盒子的捕获事件以后,再由内向外执行冒泡事件
- 最内层盒子事件执行顺序按书写先后顺序执行
- 同名事件按书写顺序执行
6.e.stopPropagation()
- e.stopPropagation():停止事件传播方法,事件传播遇到这个方法就会停止
2.浏览器对象事件
浏览器对象就是window
1.onresize
window.onresize事件就是窗口改变事件,当窗口大小发生改变时会触发这个事件
2.onscroll
window.onscroll事件是滚动条改变事件,当滚动条距离顶部的距离改变时,就会触发这个事件