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;}

<h1 class="c1">这里是标题</h1>

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

<div class=”box” data-id=”10”>盒子</div>

<script>

const box=document.querySelector(‘.box’)

console.log(box.dataset.id)

</script>

延时函数

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

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])

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.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对象

map

数组的map方法：将数组中的元素按照规则映射为一个新数组，并返回；

const arr=[‘red’,’blue’,’green’]

const newArr=arr.map(function(element,index){return element+’颜色’;})

forEach

数组中的forEach方法，遍历数组元素；

join

数组中的join方法：将数组中的元素连接 成一个字符串；

一般浮点数

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)

隐式转换

+两边只要有一个字符串，会把另个一转换为字符串；‘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个，才能转换成功；

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

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

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