JS基础内容

1、数据类型转换

1).转数值

◉number()

​ 语法&＃xff1a;Number(想要转换的内容)

​ 结果&＃xff1a;转换好数值类型的结果

var s1 &＃61; "1"
console.log(typeof Number(s1)) //number


◉parseInt()

​ 语法&＃xff1a;parseInt(想要转换的内容)

​ 结果&＃xff1a;转换好数值类型的结果

var s2 &＃61; &＃39;1&＃39;
console.log(typeof parseInt(s1)) //number


◉paserFloat()

​ 与parseInt区别&＃xff1a;parsetFloat可以解析小数部分

​ 语法&＃xff1a;paserFloat(想要转换的内容)

​ 结果&＃xff1a;转换好数值类型的结果console(String(b1)) //true

var s2 &＃61; &＃39;12.12&＃39;
console.log(parseInt(s1)) //12
console.log(paserFloat(s1)) //12.12


2).转字符串

◉String()

​ 语法&＃xff1a;String(想要转换的内容)

​ 结果&＃xff1a;转换好字符串类型的结果

var b1 &＃61; true
console(String(b1)) //true
console(typeof String(b1)) //string


◉toString()

​ 语法&＃xff1a;要转换的内容.toString()

​ 结果&＃xff1a;转换好字符串类型结果

var b2 &＃61; true
consolr.log(b2.toString()) //true


3).转布尔

◉Boolean()

​ 语法&＃xff1a;要转换的内容.Boolean()

​ 结果&＃xff1a;转换好的布尔类型结果

​ false: 0 NaN null undefined “”

​ true: 除以上全部为true

var c1 &＃61; "123"
console.log(c1.Boolean()) //true


2、运算符

1).&＃61;&＃61; && &＃61;&＃61;&＃61;

​ 等于比较&＃61;&＃61;&＃xff1a;比较 值 是否相等&＃xff0c;不考虑数据类型

​ 全等比较&＃61;&＃61;&＃61;&＃xff1a;值和数据类型全相同时&＃xff0c;才是true

2).!&＃61; && !&＃61;&＃61;

​ 不等于比较!&＃61;&＃xff1a;只要值不相等就是false

​ 不全等比较!&＃61;&＃61;&＃xff1a;值和数据类型&＃xff0c;任意一个不等就是false

3、作用域

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GyTTQyUL-1645447100472)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211216094735488.png)]

4、数据类型

1).对象数据类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eftVOIHp-1645447100473)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211216152801354.png)]

增

var b &＃61; {}
b.name &＃61; "小米" //方法一 {name:"小米"}
b[&＃39;age&＃39;] &＃61; 16 //方法二 {name:"小米",age:16}


删

var b &＃61; {}
delete b.name //方法一
delete b[&＃39;age&＃39;] //方法二


改

//与增加方法相同&＃xff0c;如果原来有 键值对 则是修改&＃xff0c;没有则是新增


查

var b &＃61; {}
b.name
b[&＃39;age&＃39;]


2).数组数据类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pa99OyOW-1645447100474)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211216152711870.png)]

3).冒泡排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yUQQqCBp-1645447100474)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211216155931969.png)]

4).选择排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UMPYH8dx-1645447100475)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211216161149194.png)]

5).数组常用方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LUmJeW23-1645447100475)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211217150306415.png)]

◉push()——末尾添加

​ 语法&＃xff1a;数组.push(数据)

​ 返回值&＃xff1a;追加数据后的新数组长度

◉pop()——末尾删除

​ 语法&＃xff1a;数组.pop()

​ 返回值&＃xff1a;被删除的数据

◉unshift()——头部添加

​ 语法&＃xff1a;数组.unshift(数据)

​ 返回值&＃xff1a;添加数据后新数组的长度

◉shift()——头部删除

​ 语法&＃xff1a;数组.shift()

​ 返回值&＃xff1a;被删除的数据

◉reveres()——数组反转

​ 语法&＃xff1a;数组.reveres()

​ 返回值&＃xff1a;反转后的数组

◉splice()

​ 语法&＃xff1a;数组.splice( 开始索引 &＃xff0c;多少个 &＃xff0c;要插入的数据 )

​ 开始索引默认为&＃xff1a;0 多少个默认&＃xff1a;0 要插入的数据默认&＃xff1a;0

​ 作用&＃xff1a;删除数组中若干数据&＃xff0c;并选择是否插入新数据

​ 返回值&＃xff1a;以新数组形式返回被删除的数据

◉sort()——排序

​ 语法&＃xff1a;

​ 数组.sort() 按照位排序 1,12,2,25,31,35,4,41

​ 数组.sort( function(a,b) {return a-b} ) 从小到大

​ 数组.sort( function(a,b) {return a-b} ) 从大到小

​ 返回值&＃xff1a;排序好的数组

◉join()——将数组用符号连接成字符串

​ 语法.数组.join( 符号 )

​ 返回值&＃xff1a;连接好的字符串

◉concat()——拼接数组

​ 语法&＃xff1a;数组.concat( 其他数组 )

​ 返回值&＃xff1a;拼接好的数组

◉slice()——截取

​ 语法.slice( 开始索引&＃xff0c;结束索引 )

​ 返回值&＃xff1a;以数组形式返回被截取的数据

◉indexOf()——查找数据在数组中的位置

​ 语法&＃xff1a;数组.indexOf( 数据 )

​ 作用&＃xff1a;查找该数据在数组中的位置

​ 返回值&＃xff1a;

​ 有该数据&＃xff0c;返回第一次出现的位置

​ 没有该数据&＃xff0c;返回 -1

◉forEach()——遍历数组

​ 语法&＃xff1a;数组.forEach( function( item, index,arr ){ } )

​ item:每一项

​ index:数组索引

​ arr:原始数组

​ 没有返回值

◉map()——映射数组

​ 语法&＃xff1a;数组.map( function( item, index,arr ){ } )

​ 返回值&＃xff1a;映射好的数组

◉filter()——过滤数组

​ 语法&＃xff1a;数组.filte( function( item, index,arr ){ } )

​ 返回值&＃xff1a;过滤好的新数组

◉every()——判断数组每一项是否满足条件

​ 语法&＃xff1a;数组.every( function( item, index,arr ){ return item > 50 } ) //判断是否每一项都大于50

​ 返回值&＃xff1a;一个布尔值

◉some()——判断数组是否有一项满足条件

​ 语法&＃xff1a;数组.some( function( item, index,arr ){ } )

6).字符串方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yfrSoO73-1645447100476)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211217152606762.png)]

◉charAt()——获取索引位置字符

​ 语法&＃xff1a;字符串.charAt( 索引 )

◉toLowerCase()——字母转换成小写

​ 语法&＃xff1a;字符串.toLowerCase()

​ 返回值&＃xff1a;转换好的字符串

◉toUpperCase()——字母转换成大写

​ 语法&＃xff1a;字符串.toUpperCase()

​ 返回值&＃xff1a;转换好的字符串

◉replace()——换内容

​ 语法&＃xff1a;字符串.replace( 换下内容&＃xff0c;换上内容 )

​ 作用&＃xff1a;将字符串中第一个满足换下内容的片段换成换上内容&＃xff0c;只能替换一个片段&＃xff0c;且是第一个片段

​ 返回值&＃xff1a;替换好的字符串

◉trim()——去掉首尾空格

​ 语法&＃xff1a;字符串.trim()

​ 返回值&＃xff1a;去除空格后的字符串

◉split()——用分隔符切分字符串为数组

​ 语法&＃xff1a;字符串.split(分隔符)

​ 返回值&＃xff1a;切割后的数组

◉substr()–substring()–slice()——截取字符串

​ 语法&＃xff1a;

​ 字符串.substr( 开始索引 &＃xff0c; 多少个 ) //包含开始所有

​ 字符串.substring( 开始索引 &＃xff0c; 结束索引 ) //包前不包后

​ 字符串.slice( 开始索引 &＃xff0c; 结束索引 ) // 包前不包后

​ 返回值&＃xff1a;截取出来的字符串

7).数字方法

◉random()——随机数

​ 语法&＃xff1a;Math.random()

​ 返回值&＃xff1a;

◉round()——四舍五入

​ 语法&＃xff1a;Math.round( 数组 )

​ 返回值&＃xff1a;取整以后的数字

◉ceil()–floor()——向上/下取整

​ 语法&＃xff1a;Math.ceil()–Math.floor()

​ 返回值&＃xff1a;取整后的数字

◉pow()——眯运算

​ 语法&＃xff1a;Math.pow( 底数&＃xff0c;指数 )

​ 返回值&＃xff1a;计算后的结果

◉sqrt()——二次方根

​ 语法&＃xff1a;Math.sqrt( 数字 )

​ 返回值&＃xff1a;计算后的结果

◉abs()——取绝对值

​ 语法&＃xff1a;Math.abs( 数字 )

​ 返回值&＃xff1a;计算后的结果

◉max()——取最大值

​ 语法&＃xff1a;Math.max( 数字1&＃xff0c;数字2&＃xff0c;数字3 … )

​ 返回值&＃xff1a;最大值

◉min()——去最小值

​ 语法&＃xff1a;Math.min( )

​ 返回值&＃xff1a;最小值

◉PI——得到近似π的值

​ 语法&＃xff1a;Math.PI

​ 返回值&＃xff1a;π

8&＃xff09;时间方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SSucxeh9-1645447100476)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211220161349621.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V3g1pFjJ-1645447100477)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211220161524669.png)]

◉new Date()

​ 创建时间对象&＃xff0c;当前主机时间

​ 创建规定的时间对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TAD51bzb-1645447100477)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211217165116709.png)]

◉new Data() .getFullYear()——获取年份信息

◉new Data() .getMonth()——获取月份信息

◉new Data() .getDate()——获取日期信息

◉new Data() .getHours()——获取小时信息

◉new Data() .getMinutes()——获取分钟信息

​ 当为个位数时&＃xff0c;前面加0

​ new Data() .getMinutes() <10 &＃xff1f;‘0’ &＃43; new Data() .getMinutes() &＃xff1a; new Data() .getMinutes()&＃xff1b;

◉new Data() .getSeconds()——获取秒钟信息

​ 当为个位数时&＃xff0c;前面加0

​ new Data() .getSeconds() <10 ? ‘0’ &＃43; new Data() .getSeconds() : new Data() .getSeconds()

◉new Data() .getDay()——获取星期信息

◉new Data() .getTime()——获取时间戳信息

5、BOM操作

一整套操作浏览器相关内容的属性和方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DqEg34ni-1645447100478)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211223101619111.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g1VSIDYZ-1645447100479)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211223101457917.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-soKR3Mb7-1645447100479)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211223101543343.png)]

1).获取浏览器可视窗口尺寸

◉获取可视窗口宽度&＃xff1a;window.innerWidth

◉获取可视窗口高度&＃xff1a;window.innerHeight

2).浏览器弹出层

◉提示框&＃xff1a;window.alert( ‘提示信息’ )

◉询问框&＃xff1a;window.confirm( ‘提示信息’ )——有确定/取消按钮&＃xff0c;有返回值(布尔值)

◉输入框&＃xff1a;window.promit( ‘提示信息’ )——有输入框、确定/取消按钮&＃xff0c;返回值(输入的信息 / null)

3).开启/关闭标签页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jbFQbunj-1645447100480)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211220163927325.png)] close&＃xff1a;关闭当前页面 open&＃xff1a;在新窗口中打开

◉开启&＃xff1a;window.open( ‘地址’ )

◉关闭&＃xff1a;window.close( ‘’ )

4).浏览器常见事件

◉资源加载完毕&＃xff1a;window.onload &＃61; function ( ) { }

◉可视尺寸改变&＃xff1a;window.resize &＃61; function ( ) { }

◉滚动条位置改变&＃xff1a;window.onscroll &＃61; function ( ) { }

5).浏览器历史记录操作

◉回退页面&＃xff1a;window.history.back()

◉前进页面&＃xff1a;window.history.forward()

6).浏览器卷去的尺寸

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vSHg6Q7i-1645447100480)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211220165048836.png)]

◉卷去的高度&＃xff1a;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lRXi4tq8-1645447100481)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211220165530780.png)]

​ document.documentElement.scrollTop 当页面有标签时使用

​ document.body.scrollTop 当页面没有标签时使用

◉卷去的宽度&＃xff1a;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VpYgRDE3-1645447100482)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211220165816341.png)]

​ document.documentElement.scrollLeft 当页面有标签时使用

​ document.body.scrollLeft 当页面没有标签时使用

7).浏览器滚动的位置

◉滚动到&＃xff1a;window.scrollTo( )

​ 参数方式1&＃xff1a;window.scrollTo( left , top )

​ left&＃xff1a;浏览器卷去的宽度

​ top&＃xff1a;浏览器卷去的高度

​ 参数方式2&＃xff1a;window.scrollTo( { left:xx, top:yy, behavior:‘smooth’ } )

​ behavior&＃xff1a;定位方式&＃xff1b;smooth&＃xff1a;表上平滑滚动&＃xff1b;

6、定时器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hU6O6JcH-1645447100483)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211223104110795.png)]

1).间隔定时器

◉setInterval( 函数&＃xff0c;时间 ) clearInterval()

​ 函数&＃xff1a;每次执行的内容

​ 时间&＃xff1a;单位是毫秒

2&＃xff09;延时定时器

◉setTimeout( 函数&＃xff0c;时间 ) clearTimeout()

​ 函数&＃xff1a;每次执行的内容

​ 时间&＃xff1a;单位是毫秒

7、DOM操作

一整套操作文档流相关内容的属性和方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cmPwKJTy-1645447100485)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211223154040864.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FXutKB2q-1645447100486)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211223153846580.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bmw88dCW-1645447100487)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211223153941463.png)]

1).获取元素

◉根据Id获取 document.getElementById( ‘Id名称’ )

​ 作用&＃xff1a;获取 id 对应的一个元素

◉根据类名获取 document.getElementsByClassName( ‘元素名称’ )

​ 作用&＃xff1a;获取classname 对应的所有元素

◉根据标签名获取 document.getElementsByTagName( ‘标签名’ )

​ 作用&＃xff1a;获取所有标签名对应的元素

◉根据选择器获取 document.querySelector( ‘选择器’ )

​ 选择器&＃xff1a;.class #id

​ 作用&＃xff1a;获取满足选择器规则的第一个元素

◉通过选择器获取一组元素 document.querySelectorAll( ‘选择器’ )

​ 作用&＃xff1a;获取满足选择器规则的所有元素

2).操作元素内容

◉操作文本内容

​ 获取&＃xff1a;元素.innerText

​ 设置&＃xff1a;元素.innerText &＃61; ‘新内容’

◉操作超文本内容

​ 获取&＃xff1a;元素.innerHTML

​ 设置&＃xff1a;元素.innerHTML &＃61; ‘新内容’

3).操作元素属性

◉原生属性

​ 获取&＃xff1a;元素.属性名

​ 设置&＃xff1a;元素.属性名 &＃61; ’属性值‘

◉自定义属性

​ 获取&＃xff1a;元素.getAttribute( ‘属性名’ )

​ 设置&＃xff1a;元素.getAttribute( ‘属性名’&＃xff0c;‘属性值’ )

​ 删除&＃xff1a;元素.removeAttribute( ‘属性名’ )

4).操作元素类名

​ 获取&＃xff1a;元素.className

​ 设置&＃xff1a;元素.className &＃61; ‘新类名’

5).操作元素行内样式

​ 获取&＃xff1a;元素.style.样式名

​ 设置&＃xff1a;元素.style.样式名 &＃61; ’样式值‘

6).获取元素非行内样式

​ 获取&＃xff1a;window.getComputedStyle(元素).样式名

​ 可以取行内样式&＃xff0c;也可以取非行内样式

​ 设置&＃xff1a;只能通过代码设置行内样式

7).节点操作

◉创建

​ 语法&＃xff1a;document.createElement( ‘标签名’ )

◉插入

​ 语法&＃xff1a;父节点.appendChild( 子节点 ) 把子节点放在父节点里&＃xff0c;并且放到最后的位置

​ 父节点.insertBefore( 要插入的节点&＃xff0c;哪一个子节点前面 ) 把子节点放在父节点里&＃xff0c;并且放到指点的子节点前面

◉删除

​ 语法&＃xff1a;父节点.removeChild( ‘子节点’ ) 从父节点删除一个子节点

​ 节点.remove() 把自己删除

◉替换

​ 语法&＃xff1a;父节点.replaceChild( 换上节点&＃xff0c;换下节点 )

◉克隆

​ 语法&＃xff1a;节点.cloneNode( 是否克隆后代节点 )

8).获取元素尺寸

◉元素.offsetHeight

元素.offsetWidth

​ 获取 内容 &＃43; padding &＃43; border 的尺寸

◉元素.clientHeight

​ 元素.clientWidth

​ 获取 内容 &＃43; padding 的尺寸

8、事件

1).事件绑定三要素

◉事件源&＃xff1a;和 谁 约定

◉事件类型&＃xff1a;约定什么行为

◉事件处理函数&＃xff1a;事件执行的代码

2).语法

◉事件源.on事件类型 &＃61; 事件处理函数

3).事件类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WUBXGxux-1645447100489)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211224153959044.png)]

4).事件对象信息

​ 通过function( e )获取

◉鼠标事件

​ offsetX/Y&＃xff1a;触发事件的元素的位置&＃xff08;盒子&＃xff09;

​ clientX/Y&＃xff1a;相对应浏览器可视窗口的坐标位置

​ pageX/Y&＃xff1a;相对应页面文档流的位置

◉键盘事件

​ 键盘编码 事件对象.keyCode 根据编码判断是哪个按键

5).事件传播

​ 浏览器响应事件的机制&＃xff1a;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nslCKloA-1645447100489)(C:\Users\Peach\AppData\Roaming\Typora\typora-user-images\image-20211224155611170.png)]

6).阻止事件传播

​ 语法&＃xff1a;事件对象.stopPropagation( )