JavaScript（2）

喃止

已于 2023-11-25 12:24:09 修改

阅读量113

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-07-06 10:31:47 首次发布

本文链接：https://blog.csdn.net/xmq119729/article/details/131514787

版权

1.DOM- 获取元素

1.1 let与const

let arr = [1,2,3]; // 可以改为const
arr.push(4); // 在原先的数组里增加一个值，不改变数组

let arr = [1,2,3]; 
arr = ['fsd',12,'ddd'];// 可以改为const 因为重新赋值一个数组

1.2 web API

就是使用JS去操作HTML和浏览器
分类
DOM: 文档对象模型
BOM: 浏览器对象模型

什么是DOM
DOM是浏览器提供的一套专门用来操作网页内容的功能。

DOM树
将HTML文档以树状结构直观的表现出来，描述网页内容关系的名词。标签与标签之间的关系
DOM对象
DOM对象的创建：浏览器根据html标签生成的JS对象
DOM的核心就是把内容当做对象进行处理：
所有标签属性都可以在这个对象上找到
修改这个对象的属性会自动映射到标签上
document
是DOM提供的一个对象，网页所有内容都在document中

1.3 获取

document.querySelector(css选择器)

document.querySelectorAll(css选择器)//querySelectorAll获得到的是一个伪数组有长度有索引号的数组，但是没有pop(),push()方法。

1.4 修改

修改DOM元素内容

属性：
对象.innerText = ‘’
对象.innerHTML = '' 能够解析标签，识别文本

修改DOM元素属性

常用属性：
href
title
src
对象.属性 = 值
img.src = `../${random(1,3)}.png`;


样式属性：
通过style属性操作css
	document.querySelector('h2').style.color='red';
	div.style.width = '50px';
    div.style.height = '50px';
    div.style.margin = '10px auto';

通过ClassName类名操作css,直接使用className会覆盖之前的值
const divid = document.querySelector('#div');
divid.className = 'box';

通过classList操作类控制css
const divid1 = document.querySelector('#div1');
 divid1.classList.add('box1');  //增加
 divid1.classList.add('box2');
 divid1.classList.remove('box2');  //删除
 divid1.classList.toggle('box2');  //有就加上，没有就删掉
案例：轮播图


表单元素：
获取：DOM对象.属性名 = 新值；

自定义属性：
标准属性：disabled,check selected
自定义属性
h5中推出了专门的data-自定义属性，
标签上一律以data-开头
DOM对象上一律以dataset对象方式获取
 <div data-id="1" data-sng="不知道"></div>
 const div = document.querySelector('div');
 div.dataset.id = 1;
 div.dataset.sng = "不知道";

定时器—间歇函数
开启定时器：setInterval（函数名，间隔时间）；// 函数名不加()
作用：每隔一段时间调用这个函数，间隔时间是毫秒。
定时器返回的是一个id数字

function fn(){
    console.log(111);
}
setInterval(fn,1000)

setInterval(function(){
    console.log(222);
},1000)

关闭定时器：根据定时器返回的id关闭定时器
let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)

2.DOM-事件基础

事件：实在编程时候系统内发生的动作或者发生的事情。

事件监听：
事件源.addEventListener(‘事件类型’,要执行的函数)；
事件源：dom元素
事件类型：click、mouseover
事件调用的函数：要做什么事情

事件监听版本：
事件源.on 每次都会替换掉之前
事件源.addEventListener 按顺序都会执行

事件类型
鼠标事件：click mouseenter mouseleave
键盘事件：keyup keydown
焦点：focus blur
input

事件对象
事件对象也是一个对象，存储事件触发时相关的信息。
在事件绑定的回调函数的第一个参数就是事件对象

环境对象
this，代表当前函数运行时所处的环境
谁调用, this就执行谁

function fn(){
	console.log(this);//window
}
fn(); // window.fn()

document.querySelector('button').addListener('click',function(){console.log(this)});// button

回调函数：函数a作为参数传递给函数b，函数a就是回调函数。（定时器、绑定事件中的函数）

2.1案例1 全选框

 <table>
        <tr>
            <th><input type="checkbox" name="" id="checkAll">全选</th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="" class="ck"></td>
            <td>小米手机1</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" class="ck"></td>
            <td>小米手机2</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" class="ck"></td>
            <td>小米手机3</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
    </table>

const checkAll = document.querySelector('#checkAll');
const cks = document.querySelectorAll('.ck');
//全选框
checkAll.addEventListener('click',function(){
    if(this.checked){
        cks.forEach(element => {
            element.checked = true;
            num = 3;
        });
    }else{
        cks.forEach(element => {
            element.checked = false;
            num = 0;
        });
    }
})
let num = 0;
//个别选框
cks.forEach(item => {
    item.addEventListener('click',function(){

        // this.checked?++num:--num;
        // if(num===3){
        //     checkAll.checked = true;
        // }
        // else 
        // checkAll.checked = false;


        // 或者
        const log = document.querySelectorAll('.ck:checked').length;
        if (document.querySelectorAll('.ck:checked').length!==cks.length)
            checkAll.checked = false;
        else
            checkAll.checked = true;
    })
})

3.DOM-事件进阶

3.1 事件流

事件流事件完整执行过程中的流动路径
类型：捕获（从大到小），冒泡（从小到大）

事件捕获
从大到小
事件捕获需要写对应的代码
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)； // true 捕获 false 冒泡

    <style>
        .father{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>

    <div class="father">
        <div class="son"></div>
    </div>

document.addEventListener('click',function () {
   alert("我是爷爷");
},true)
document.querySelector('.father').addEventListener('click',function(){
   alert('我是爸爸')
},true)
document.querySelector('.son').addEventListener('click',function(){
   alert('我是儿子')
},true)

事件冒泡
从小到大，调用所有同名事件（比如点击事件，键盘keyup事件等）

阻止冒泡
事件对象.stopPropagation();
阻止元素的默认行为
链接的跳转，表单的跳转
e.preventDefault()

document.addEventListener('click',function () {
   alert("我是爷爷");
})
document.querySelector('.father').addEventListener('click',function(){
   alert('我是爸爸')
})
document.querySelector('.son').addEventListener('click',function(e){
   alert('我是儿子')
   e.stopPropagation();
})

解绑事件
L0事件冒泡
btn.onclick = function(){}
btn.onclick = null;
L2事件
btn.addEventListener(‘click’,function(){})
btn.removeEventLister(‘click’,函数名)
匿名函数无法被解绑

鼠标经过事件：
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果

3.2 事件委托

引言：
如果给多个元素注册事件：for循环
现在可以用事件流的方式来解决，给最上层或者最底层绑定事件。
优点：减少注册次数，提高程序性能
事件委托就是利用了事件冒泡的特点。把事件绑定委托给父元素
再利用e.target.tagName找到真正触发的元素

3.3 其他事件

页面加载事件
页面加载外部资源加载完毕时触发的事件。

window.addEventListener(‘load’,function(){
//等待页面加载完成后，在执行的任务，dom结点页面没有加载完就不能操作
})
img.addEventListener(‘load’,function(){
//等待图加载完成后，在执行的任务
})
load要等待资源都加载好后才执行， window
DOMContentLoaded 不等待样式和图像 document(快一点)
document.addEventListener('DOMContentLoaded ',function(){})
元素滚动事件
滚动条再滚动的时候触发的事件
事件名：scroll
监听整个页面滚动。
事件源身上有scrollTop和scrollLeft

获取html元素的写法
document.documentElement
获取html被卷了多少
document.documentElement.scrollTop

页面尺寸事件
会在窗口尺寸改变的时候触发事件
window.addEventListener(‘resize’,function(){
// 检测屏幕宽度
let w = document.documentElement.clientWidth;
})
clientWidth 窗口的宽度
clientHeight 窗口的高度
不包含边框，margin 滚动条

3.4 元素尺寸和位置

offerWidth
offerHeight
包括边框。

4.DOM-节点操作

4.1 节点操作

DOM节点
DOM树里每一个内容都称为节点
节点类型：元素节点：所有标签：body div html 属性节点：所有的属性如href 文本节点：所有的文本其他

查找节点
节点的关系：
父节点：子元素.parentNode
子节点: 父元素.children 伪数组选择的是亲儿子元素节点 childnode 获取所有子节点，包括文本注释。
兄弟节点： nextElementSibling 下一个兄弟 previousElementSibling 上一个兄弟

增加节点
步骤

1. 创建一个新节点 document.createElement('标签名 ')
2. 把创建的节点查到指定元素的内部
	父元素.appendChild（要插入的元素） 追加到这个父元素的最后
	父元素.insertBefore(要插入的元素，在哪个元素前面)

或者可以使用克隆节点
元素.cloneNode(布尔）
布尔值为true 代表克隆接当前节点的子节点
布尔值为false 代表只克隆当前节点

创建节点

const li = document.createElement('li');
const ul = document.querySelector('ul');

追加节点

ul.appendChild(li);
ul.insertBefore(li,ul.children[0]);

删除节点
删除元素要通过父元素删除
父元素.removeChild(要删除的元素)
删除节点和删除隐藏节点（display：none）有区别：

4.2 M端事件

M端：指的是移动端
触屏事件：touch
在这里插入图片描述

4.3 JS插件

swiper插件

5.BOM-操作浏览器，浏览器对象

常用的BOM属性：location,history,navigator

5.1window对象

BOM浏览器对象模型
BOM中包含DOM
在这里插入图片描述
window是js中的顶级对象

ducoment.querySelector();
//全写
window.ducoment.querySelector();

所有var定义在全局作用域中的变量函数，都会变成window对象的属性和方法

定时器-延时函数
（有两种：间歇函数和延时函数）
间歇函数：间隔多少时间再执行，多次执行，setInterval
延时函数：延迟多少秒之后才执行只执行一次 setTimeout
【let timer =】 setTimeout(回调函数，等待的毫秒数)

清除延时函数：
在有一种情况下，就是递归的自己调用自己，这时候就需要清除延时函数
clearTimeout（timer）

案例：倒计时五秒，关闭广告

    <style>
        .box{
            margin: 10px auto;
            height: 400px;
            width: 700px;
            background-color: aqua;
            position: relative;
        }
        .son{
            position: absolute;
            top: 10px;
            right: 30px;
            font-size: 30px;
        }
    </style>

    <div class="box">
        <div class="son">5</div>
    </div>
    <script>
        const son = document.querySelector('.son')
        let count = 5;
        let id = setInterval(function(){
            son.innerHTML = '';
            son.innerHTML = `${--count}`;
        },1000);
        setTimeout(function(){
            clearInterval(id);
            document.querySelector('.box').style.display= 'none';
        },5000);
    </script>

JS执行机制----事件循环 eventLoop

浏览器有两个解析器：渲染引擎（html+css） 解析引擎（js）

解决js单线程的问题，不造成堵塞现象，允许js创建多线程，js中出现了同步和异步。
同步：按顺序执行，一件事情完成后再去做另外一件事情
异步：等待一个事情完成的事件去做另外一个事件
本质区别：执行栈上执行顺序不同。
js的异步是通过回调函数实现的

异步任务的类型
普通事件: click,resize
资源事件：load error
定时器：延时和间歇
异步任务都会加入到任务队列

执行机制：

先执行执行栈中的同步任务
异步任务加入任务队列中（这些异步任务会由专门的webAPI【实际就是浏览器也成为宿主环境】进行一部进程处理，等这些异步任务执行完毕后就会加入到任务队列中）
一旦执行栈中的所有同步任务都完成后，系统会依次执行任务队列中的异步任务，异步任务进入执行栈，开始执行

location对象
拆分并保存了url地址的各个组成部分。

属性
href : 存储了完整的路径，对其赋值可以用于地址跳转; // location.href = 'http://www.baidu.com' 利用技术的方法页面跳转 
search： 返回符号？及之后的内容（查询参数. ?id=xxx&name=yyy
hash：返回的是地址中的哈希值,符号#以及后面的内容[#xixixi]（锚链接 id=xx搭配href=‘#xx’
reload：刷新当前的页面，传入参数true 强制刷新
hst: 主机名 localhost:8080,www.baidu.com:80

navigator对象
记录浏览器自身的相关信息
cookieEnabled: 网页是否支持cookie

history对象
管理历史记录，该对象与浏览器地址栏的操作相对应。前进、后退、历史记录

方法
back() 后退功能
forward() 前进功能
go（参数）参数为num 前进后退几个页面

5.2 本地存储

localstorage，sessionStorage
本地存储—localStorage 把数据永久存储到用户电脑里，手动删除，否则页面关闭也依旧在。

//存储数据
localStorage.setItem(key,value)
//获取数据
localStorage.getItem(key);
//删除数据
localStorage.removeItem(key);

存储的值都是字符串类型

sessionStorage
生命周期为关闭浏览器窗口
在同一个窗口下数据恭喜

5.3 本地存储存储复杂类型的数据

本地存储只能存储字符串，无法存储复杂数据类型
调用JSON.stringify(obj)将复杂类型转化为JSON字符串
调用JSON.parse（string）将JSON字符串转换为复杂类型数据

const obj={
    uname:'pink',
    age:40
};
// 存储引用类型数据
localStorage.setItem('obj',JSON.stringify(obj));
// 存储引用类型数据
console.log(JSON.parse(localStorage.getItem('obj')))

6. 正则表达式

语法

// 方式1 const 变量名 = /表达式字面量/
const str = '我恨前端，再也不想学习前端了，我想睡觉，想躺平';
// 1)定义规则 写什么找什么
const regx = /前端/;
// 2)匹配字符串
regx.test(str); // 返回布尔值
// 检索复核规则的字符串
regx.exec(str));// 成功返回数组 否则为null

元字符

普通字符:所有字母和数字
元字符:[a-z]代表abcd...z

分类：
边界符：表示位置，^以谁开头 $以谁结尾如果/^哈哈哈哈$ /代表精确匹配，只能允许这样的词出现只有’哈哈哈哈’为true
量词：表示重复次数
在这里插入图片描述

字符类：
/[abc]/在选一个,中括号中任意出现一个都为true 出现两个或多个都为false
[ ^ 0-9]中括号中的^,代表取反，除了0-9之外的都匹配
大写的都是取反在这里插入图片描述

修饰符
修饰符限制了是否区分大小写，是否支持多行匹配
i 不区分大小写
g匹配所有满足正则表达式的结果

replace 替换
字符串.replace(/正则字面量/，‘替换的文本’)；返回新文本，一次只能替换一个，或者在/正则字面量/g 进行全局替换
多个字面量替换

document.querySelector('xx').value.replace(/zz|xx/g,'**');//将zz和xx替换成**

喃止

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript（2）

document.querySelectorAll(css选择器)//querySelectorAll获得到的是一个伪数组有长度有索引号的数组，但是没有pop(),push()方法。DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)；字符串.replace(/正则字面量/，‘替换的文本’)；节点类型：元素节点：所有标签：body div html 属性节点：所有的属性如href 文本节点：所有的文本其他。：函数a作为参数传递给函数b，函数a就是回调函数。
复制链接

扫一扫