当前速看：JavaScript学习笔记

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

当前速看：JavaScript学习笔记

2023-03-23 14:57:29 来源：博客园

JavaScript学习笔记

操作属性

(资料图片)


获取标签	querySelector（‘CSS选择器’）返回一个元素对象，可以直接操作；找不到返回null； querySelectorAll（‘CSS选择器’）返回一个伪数组，需要遍历得到对象再操作；注意：参数必须加引号（字符串），参数必须是CSS选择器；伪数组：没有pop、push等方法，但是可以遍历；
inner	元素.innerText属性，元素.innerHTML属性； innerText只识别文本，不解析标签； innerHTML能识别文本，也能解析标签；（推荐）
style	对象.style.样式属性=值 const box=document.querySelector(‘.box’) box.style.width=’200px’ box.style.marginTop=’15px’ box.style.backgroundColr=’pink’ 修改样式属性，通过style属性引出；样式属性都放在style属性中；如果属性名有-连接符，需要转换为小驼峰命名法；赋值时，需要带单位px；
className	className配合样式进行使用，通过修改className，就匹配到对应的样式； className只适用于单类名，而不适用于多类名；多类名用classList进行操作； .c1 {color: red;} .c2 {color: blue;} 这里是标题 const h1 = document.querySelector("h1")//查询获取元素对象 h1.innerHTML = "新设置的标题"//修改元素属性，从而修改文本内容 h1.className="c2"//修改类名，从而修改样式
classList	为了解决className容易覆盖原值的情况，可以通过classList追加和删除类名；元素.classList.add(‘类名’)//追加一个类；元素.classList.remove(‘类名’)//删除一个类；元素.classList.toggle(‘类名’)//添加或删除一个类；如果classList中没有这个类名，就是添加，并返回true；如果classList中有这个类名，就是删除，并返回false； classList toggle() 方法说明该classList.toggle()方法允许您根据当前class属性值添加或删除类名。如果要切换的类名已经存在于元素中，则该toggle()方法将删除该类名，反之亦然。您可以通过它返回的值知道该toggle()方法是否添加或删除了一个类。如果类名被删除，toggle()将返回false.添加类名后，将返回true.
自定义属性	html5中推出的自定义属性data-自定义属性名； DOM对象上以dataset对象方式获取自定义属性；例如，定义用data-id获取用dataset.id 盒子 <script> const box=document.querySelector(‘.box’) console.log(box.dataset.id) </script>

window.定时器

延时函数

一定时间后，执行某个操作，只执行一次；

let timer=setTimeout(回调函数，等待毫秒数)

clearTimeout(timer)清除

间歇函数

每间隔一定时间，执行一次回调函数；

let timer=setInterval(回调函数，间隔毫秒数)

clearInterval(timer)清除

函数名字不需要加括号，定时器返回的是一个id数字；

function(){console.log(‘每秒执行一次’)}

setInterval(fn,1000)//fn不需要小括号，时间单位是毫秒；

元素位置尺寸

获取宽高	offsetWidth,offsetHeight; 获取元素自身的宽度和高度，包含padding，border；得到的是数值方便计算；获取的是可视宽高，如果盒子隐藏，结果为0；
获取位置	offsetLeft,offsetTop是只读属性；元素距离父元素的左侧和上侧的距离；
获取宽高	clientWidth,clientHeight; 获取可见部分宽高，不包含边框、margin、滚动条；
获取位置	scrollLeft,scrollTop;可读可写；获取被卷去的大小；获取元素滚出去（看不到）的距离；

事件分类

事件总结

resize	window.addEventListener(‘resize’,funciton(){//要执行的操作 let w=document.documentElement.clientWidth})
scroll	window.addEventListener(‘scroll’,function(){//要执行的操作})
load	监听整个页面资源加载情况；也可以监听某个元素的加载情况； window.addEventListener(‘load’,function(){//要执行的操作}) img.addEventListener(‘load’,function(){//要执行的操作})
DOMContentLoaded	只是加载DOM元素，而不包含样式表、图片等；
事件委托	事件委托：利用事件流特征，解决一些开发需求的技巧；优点：减少注册次数，提高程序性能；原理：利用事件冒泡特点；给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件； ul.addEventListener(‘click’,function(){})
鼠标经过事件	mouseover,mouseout会有冒泡效果； mouseenter,mouseleave没有冒泡效果；（推荐）
解绑事件	function fn(){} btn.addEventListener(‘click’,fn) btn.removeEventListener(‘click’,fn) 匿名函数无法解绑；
阻止冒泡	默认冒泡，容易导致事件影响到父级元素；把事件限制在当前元素内，需要阻止事件冒泡；前提：需要拿到当前事件对象；事件对象.stopPropagation()
键盘事件	keyup，keydown； tx.addEventListener(‘keyup’,function(e){ if(e.key===’Enter’){item.style.display=’block’}})

事件捕获（父→子）和事件冒泡（子→父）

阻止

阻止冒泡

事件对象.stopPropagation();

将事件局限在本对象范围内，而不会传递到父对象；

阻止默认行为

e.preventDefault()；

阻止元素的默认行为，例如链接的跳转，表单的submit等；

日期时间

时间戳

时间戳：1970年1月1日0时0分0秒起至今的毫秒数；

const last=new Date(‘2022-5-1 18:30:00’)；返回字符串形式的时间戳；毫秒数

const now=new Date()返回字符串形式的当前时间戳；

+new Date()将字符串转换为数字形式；

const date=new Date() ;//实例化日期对象

date对象：月份0-11星期0-6；

date.getTime();获取当前时间戳；

Date.now()当前时间戳，无需实例化；

日期对象

const date=new Date() ;//实例化日期对象

getFullYear,getMonth获取月份:0-11,getDate,getDay获取星期：0-6；

getHours:0-23,getMinutes:0-59,getSeconds:0-59;

节点操作

查找节点	节点关系：父子关系、兄弟关系；父元素.children（）获取所有元素节点，返回一个伪数组；伪数组：没有普通数组的一些方法pop等； childNodes获得所有子节点，包括文本节点（空格、换行），注释节点等；兄弟节点： nextElementSibling上一个兄弟,previousElementSibling下一个兄弟子元素.parentNode，查找父元素节点；
创建节点	document.createElement(‘标签名’) document.createElement(‘div’) const ul=document.querySelector(‘ul’) const li=document.createElement(‘li’) li.innerHTML=’我是li’
添加节点	//父元素.appendChild（要插入的元素），插入到所有子元素尾部 ul.appendChild(li) //父元素.insertBefore(要插入的元素，放在哪个子元素前面) ul.insertBefore(li,ul.children[0]) ul.appendChild(li)
克隆节点	复制一个节点，将节点放到指定元素内部；元素.cloneNode(Boolean)； true表示克隆所有后代节点，false表示不克隆后代节点；默认false；
删除节点	删除元素必须通过其父元素；没有父子关系的无法删除；父元素.removeChild(要删除的节点元素) ul.removeChile(ul.children[0])

手机端事件

touchstart手指触摸一个DOM元素时触发；

touchend,手指从一个DOM元素离开时触发；

touchmove手指在一个DOM元素上滑动时触发；

window下面的对象

history对象	管理浏览器的历史记录； back后退；forward前进；go（参数）参数1前进，-1后退；
navigator	记录浏览器相关信息；可以根据不同的浏览器执行区别化的操作，使得适应性更强； navigator.userAgent : 浏览器用于 HTTP 请求的用户代理头的值，通过UserAgent可以取得浏览器类别、版本，客户端操作系统等信息。在PC端打开，navigator.userAgent 显示如下 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36 在手机web端打开，navigator.userAgent 显示如下 Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
location	存储当前页面的url，可以通过修改href，让当前页面进行跳转； location.href=’http://www.baidu.com’

持久化存储：localStorage

永久存储键值对，除非手动删除；多个窗口/页面可以共享，同一浏览器可以共享；页面刷新不丢失；

简单类型

localStorage.setItem(‘uname’,’齐天大圣’)

localStorage.getItem(‘uname’)

复杂类型

obj={name:’李四’,age:18,gender:’男’}

localStorage.setItem(‘obj’,JSON.stringify(obj))//先转化为json字符串，然后存储到localStorage

const newObj=JSON.parse(localStorage.getItem(‘obj’))//先读取json字符串，然后解析为js对象

临时性存储：sessionStorage

声明周期为关闭浏览器窗口；

再同一个窗口（页面）下数据可以共享；

以键值对的形式存储；

使用方法同localStorage；

数组方法总结

map	数组的map方法：将数组中的元素按照规则映射为一个新数组，并返回； const arr=[‘red’,’blue’,’green’] const newArr=arr.map(function(element,index){return element+’颜色’;})
forEach	数组中的forEach方法，遍历数组元素；
join	数组中的join方法：将数组中的元素连接成一个字符串；

document.body.style.backgroundImage=`url(./images/desktop_${random}.jpg)`

innerHTML()解析传入字符串中的html标签；

innerText()不解析字符串中的html标签；

document.querySelectorAll(‘.box’);选择所有匹配项；

找到就返回数组（伪数组），有长度length，但是没有pop，push方法；

document.querySelector(‘div’);只选择第一个匹配项；找到就返回一个对象，找不到就返回null；

随机数

一般浮点数

Math.random()随机数[0,1)浮点数

Math.random()*11随机数[0,11)浮点数

0-end整数

Math.floor(Math.random()*(end+1))

start-end整数

Math.floor(math.random()*(end-start+1)+start)

对象属性的增删改查：

删：delete stu.name;
改：已有的属性直接赋值；
增：没有的属性直接赋值；
查1：用.运算符；
查2：用中括号[‘’]；

classList、querySelector

const h2 = document.querySelector("h2") console.log(h2.classList)//DOMTokenList(2) ["b1", "c1", value: "b1 c1"] h2.classList.remove("b1")//移除b1类 console.log(h2.classList)//DOMTokenList(1) ["c1", value: "c1"] h2.classList.add("b2")//添加b2类 console.log(h2.classList)//DOMTokenList(2) ["c1", "b2", value: "c1 b2"] h2.classList.toggle("c2")//添加或删除 console.log(h2.classList)//DOMTokenList(3) ["c1", "b2", "c2", value: "c1 b2 c2"] // 如果classList中没有这个类名，就是添加，并返回true； // 如果classList中有这个类名，就是删除，并返回false； const h1 = document.querySelector("h1") h1.innerHTML = "新设置的标题" h1.className = "c2" // const h1 = document.querySelector("h1") // console.log(h1)//h1对象 // const h2 = document.querySelector("h2") // console.log(h2)//null 找不到对象，就返回null // const lis1 = document.querySelectorAll(".list1 li") // console.log(lis1)//NodeList(4) [li, li, li, li] // const lis2 = document.querySelectorAll("list2 li") // console.log(lis2)//NodeList(0) []，找不到，就返回空数组（伪数组） // const lis3 = document.querySelectorAll("list3 li") // console.log(lis3)//NodeList(0) []，找不到，就返回空数组（伪数组）

数据类型、布尔值、逻辑中断

//■数据类型 // let num = 10 // console.log(typeof num)//number // console.log(typeof (num))//number // let str = "hello" // console.log(typeof str)//string // console.log(typeof (str))//string // let flag = true // console.log(typeof flag)//boolean // console.log(typeof (flag))//boolean // let un // console.log(typeof un)//undefined // console.log(typeof (un))//undefined // let obj = null // console.log(typeof obj)//object // console.log(typeof (ojb))//undefined // let nan = NaN // console.log(typeof nan)//number // console.log(typeof (nan))//number //■布尔值 // console.log("-----builtin-----") // console.log(Boolean(true))//true // console.log(Boolean(false))//false // console.log(Boolean(undefined))//false // console.log(Boolean(null))//false // console.log(Boolean(NaN))//false // console.log("-----number-----") // console.log(Boolean(100))//true // console.log(Boolean(3.14))//true // console.log(Boolean(0.00))//false // console.log(Boolean(0))//false // console.log(Boolean(-0.00))//false // console.log("-----string-----") // console.log(Boolean("hello"))//true // console.log(Boolean("true"))//true // console.log(Boolean("false"))//true // console.log(Boolean("null"))//true // console.log(Boolean("undefined"))//true // console.log(Boolean("0"))//true // console.log(Boolean(""))//false // console.log("-----array-----") // console.log(Boolean([1, 2, 3]))//true // console.log(Boolean([0, 0, 0]))//true // console.log(Boolean([]))//true // console.log("-----object-----") // console.log(Boolean({ name: "tom" }))//true // console.log(Boolean({}))//true //■逻辑中断 console.log(22 || 33)//22 console.log(0 || 33)//33 console.log(22 && 33)//33 console.log(0 && 33)//0 console.log("res" || "default")//res console.log("" || "default")//default//■显式类型转换 console.log("-----Number-----") console.log(Number("22"))//22 转换成功 console.log(Number(".22"))//.22 转换成功 console.log(Number("22.33"))//22.33 转换成功 console.log(Number("22.33.44"))//22.33 转换成功 console.log(Number("22aa"))//NaN 转换失败结果肯定不是数字，具体是什么不知道 console.log(Number("22啊啊"))//NaN 转换失败结果肯定不是数字，具体是什么不知道 console.log(Number("啊啊22"))//NaN 转换失败结果肯定不是数字，具体是什么不知道 //所有字符只能是数字或者小数点，不能有其他字符，才能转换成功； console.log("-----parseInt-----") console.log(parseInt("88"))//88 转换成功只取前面的数字部分 console.log(parseInt("88.44"))//88 转换成功只取前面的数字部分 console.log(parseInt("88哈哈"))//88 转换成功只取前面的数字部分 console.log(parseInt("88.56px"))//88 转换成功只取前面的数字部分 console.log(parseInt(".88"))//NaN 转换失败结果肯定不是数字，具体是什么不知道 console.log(parseInt("px88.56")) //NaN 转换失败结果肯定不是数字，具体是什么不知道 //必须数字开头，才能转换成功，否则失败 console.log("----------") console.log(parseFloat("88"))//88 console.log(parseFloat("88.44"))//88.44 从前面开始，数字和小数点 console.log(parseFloat("88哈哈")) // 88 console.log(parseFloat("88.56px"))//88.56 从前面开始，数字和小数点 console.log(parseFloat("px88.56"))//NaN 转换失败结果肯定不是数字，具体是什么不知道 console.log(parseFloat("88.44.55.66"))//88.44 console.log(parseFloat(".44.55.66"))//0.44 //以数字或小数点开头，就能转换成功，否则失败； console.log("-----+-----") console.log(+"88")//88 console.log(+"88.44")//88.44 console.log(+"88哈哈")//NaN console.log(+"88.56")//88.56 console.log(+"88.56px")//NaN console.log(+"px88.56px")//NaN console.log(+".88")//0.88 console.log(+".88.56")//NaN console.log(+".88px")//NaN console.log(+"3.1.4")//NaN //必须全部是数字或小数点，并且小数点个数不能超过1个，才能转换成功；

数据类型转换

隐式转换

+两边只要有一个字符串，会把另个一转换为字符串；‘1’+1=‘11’；

+以外的算术运算符，会把数据转换成数字；‘22’/2=11；

任何数字和字符串相加，结果都是字符串；

+作为正号可以将字符串转换为数字；（有用）

显式转换

+，Number（），parseInt（），parseFloat（）

var a1 = parseFloat("100.456啊啊啊");//a的结果为100

var b1 = parseFloat("1.2xxx")//b的结果为1.2

l+ //必须全部是数字或小数点，并且小数点个数不能超过1个，才能转换成功；

lparseFloat//以数字或小数点开头，就能转换成功，否则失败；

lparseInt //必须数字开头，才能转换成功，否则失败；

lNumber//所有字符只能是数字或者小数点，可以有多个小数点，不能有其他字符，才能转换成功；

NaN不知道结果是什么，但是肯定不是一个数字；

任何对NaN的操作，返回的结果都是NaN；

JavaScript 弱数据类型；

基本数据类型 num,string,boolean,undefined,null,引用类型：对象object；

常量const a=10，声明时必须赋值，声明后不能再次赋值；

var有很多bug，弃用，声明变量统一使用let；

数组 arr.length ，arr[0] arr[3]；

变量声明let age let name

声明多个变量let age=19,name=’tom’

字面量｛｝对象，[]数组，’’字符串

内部、外部、行内

write(‘’)里面可以写html标签；
alert(‘’)会优先执行
log(‘’)
prompt(‘’)会优先执行

内部和外部JS

// alert("hello 内部js")

</script>

hello.js

alert(‘hello 外部js’)

JS位置、CSS位置

行内JS
内部JS	<script ></script>标签内
外部JS	<script src="hello.js"></script> <script src="../../js/js4.js" type="text/javascript" charset="utf-8">
行内CSS	行内样式
内部CSS	将样式编写到head中的style标签里
外部CSS

学习网址：

https://developer.mozilla.org/zh-cn/docs/web/javascript

https://www.swiper.com.cn/

#end

关键词：

当前速看：JavaScript学习笔记

这里是标题