JavaScript入门到精通全套--web API部分

最新推荐文章于 2024-05-09 15:15:12 发布

339+

最新推荐文章于 2024-05-09 15:15:12 发布

阅读量107

点赞数

分类专栏： JavaScript入门到精通全套文章标签： javascript 前端正则表达式

本文链接：https://blog.csdn.net/m0_47743942/article/details/129796283

版权

JavaScript入门到精通全套专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javascript基础、进阶、高级、ES6语法、API

1.DOM

DOM（Document Object Model）：文档对象模型，呈现HTML或XML文档交互的API
文档：表示的是整个HTML页面
对象：表示将网页中的每一个部分转换为一个对象
模型：表示对象之间的关系，方便获取对象

DOM树：将HTML文档以树形结构直观的表现出来，直观的体现了标签和标签之间的关系
在这里插入图片描述
DOM对象：浏览器根据html标签生成相应的js对象，修改对象的属性会自动映射到标签上
所有网页内容都在document对象里面，整个页面最大js对象

DOM核心思想：把网页内容当作对象处理

获取DOM元素

通过 id 查找 HTML 元素

获取一个元素节点对象
const div = document.getElementById("one");

通过标签名查找 HTML元素

获取一组元素节点对象，返回一个类数组对象，所有查询到的元素都会封装到元素中，即使一个元素
const div= document.getElementsByTagName("div");

通过类名查找 HTML元素

获取一组元素节点对象
const div= document.getElementsByClassName("box");

通过 CSS 选择器查找 HTML元素

获取第一个元素节点对象
const div= document.querySelector("ul li");
获取一组元素节点对象，返回一个伪数组对象，即使符合条件的元素只有一个，也返回数组保存结果
const div= document.querySelectorAll("ul li");

DOM增删改

document.creatElement( )：创建一个元素节点对象，需要一个标签名作为参数，根据该标签名创建元素节点对象，并将创建的对象作为返回值返回

document.creatTextNode( )：创建一个文本节点对象，需要一个文本内容作为参数，根据该内容创建文本节点，并将新的节点返回

appendChild( )：向一个父节点添加一个新的子节点

insertBefore(新节点,旧节点)：在指定的子节点前面插入新的子节点，需要父节点调用

replaceChild(新节点,旧节点)：使用指定的子节点替换已有的子节点，需要父节点调用

removeChild( )：删除子节点，需要父节点调用

cloneNode(布尔值)：克隆出一个跟原标签一样的元素，为true则包含后代内容，为false则不包含

innerHTML：该属性也可以完成DOM的增删改相关操作

样式属性

元素.style.样式名 = 样式值 div.style.backgroundColor = "red"; div.style.opacity = 1; div.style.width = "100px"
元素.className = 类名(会覆盖之前类名) div.className = "one"
元素.classList.add(类名)(不会覆盖，追加类效果) div.classList.add("one")
元素.classList.remove(类名)(只会删除这个类名) div.classList.remove("one")
元素.classList.toggle(类名)(切换某一个类，有则移除，没有则加上) div.classList.toggle("one")

获取元素样式

获取元素当前显示的样式，只支持IE浏览器
语法：元素.currentStyle.样式名

获取元素当前显示的样式，对于其它浏览器但不支持IE8及以下
可以获取元素当前正在显示的样式，如果没有设置样式则获取它的默认值
语法：getComputedStyle(参数1，参数2)
参数1：要获取样式的元素
参数2：伪元素，一般传null
该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式

如果获取的样式没有设置，则会获取到真实的值，而不是默认值，比如：width不为auto

通过currentStyle和getComputedStyle( )读取到的样式不能修改

自定义属性
在这里插入图片描述

2.事件监听

事件绑定

addEventListener()

addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件
useCapture默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播

在这里插入图片描述

removeEventListener()

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序
element.removeEventListener("mousemove", myFunction);

另外：使用btn.onclick = function () { }只有事件处理和事件冒泡，没有事件捕获，且会发生相同点击事件被覆盖情况，因此现在DOM L2多用btn.addEventListener('click', function( ) { })
在这里插入图片描述

事件类型

鼠标事件

click 鼠标单机
mouseenter 鼠标移入不冒泡
mouseleave 鼠标移出不冒泡
mouseover 鼠标移入冒泡
mouseout 鼠标移出冒泡
mouseup 鼠标松开冒泡
mousedown 鼠标按下冒泡

焦点事件

focus 获取焦点不可取消默认行为，不冒泡
blur 失去焦点不可取消默认行为，不冒泡

键盘事件

keydown 键盘按下可以取消默认行为，会冒泡
keyup 键盘送开可以取消默认行为，会冒泡

文本事件

input <input>, <select>, 或 <textarea> 元素的 value 被修改时，会触发 input 事件，不可取消，冒泡
change 用户更改<input>、<select> 和 <textarea> 元素的值时，change 事件在这些元素上触发，不可取消，不冒泡

案例：全选，全不选
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            border-collapse: collapse;  /*  边框：合并 */
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }
        th{
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;

        }
        td{
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>商品价格列表</caption>
        <tr>
                <th class="allCheck">
                    <input type="checkbox" class="allCheckBoxs">全选
                </th>
                <th>商品</th>
                <th>商家</th>
                <th>价格</th>
        </tr> 
        <tr>
            <td><input type="checkbox" name="check" class="checkBox"></td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="check" class="checkBox"></td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="check" class="checkBox"></td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
        </tr>
    </table>

    <script>
        /* 获取大复选框 */
        const allCheckBoxs = document.querySelector(".allCheckBoxs")
        /* 获取所有小复选框 */
        const checkBox = document.querySelectorAll('.checkBox')
        /* 为大复选框绑定点击事件，选中则所有小复选框选中 */
        allCheckBoxs.addEventListener('click',function(){
            for(let i=0;i<checkBox.length;i++){
                checkBox[i].checked = allCheckBoxs.checked
            }     
        })
        /* 为每个小复选框绑定点击事件 */
        for(let i=0;i<checkBox.length;i++){
            checkBox[i].addEventListener('click',function(){
            /* 如果查询到已勾选小复选框个数等于小复选框个数，则大复选框勾选 */
            /* 不这样写，就需要再次循环，反向判断不选中且先让大复选框全选，就很麻烦 */
            allCheckBoxs.checked = document.querySelectorAll(".checkBox:checked").length === checkBox.length
        })
        }
    </script>
</body>
</html>

事件对象

在这里插入图片描述

注意：pageX和pageY，获取相对于网页左上角的位置，会加上水平/垂直滚动距离

环境对象
指的是函数内部特殊的变量this，代表着当前函数运行时所处的环境

JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象
在函数中，this 表示全局对象
在构造函数中，this 是实例化的对象
在事件中，this 表示触发事件的元素
类似 call() 和 apply() 方法可以将 this 引用到任何对象，箭头函数除外

3.事件冒泡

事件冒泡

指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件

事件流程

捕获阶段：从祖先元素传导到目标节点（上层传到底层）称为“捕获阶段”，捕获阶段不会响应任何事件；
目标阶段：在目标节点上触发称为“目标阶段”；
冒泡阶段：从目标节点传导回祖先元素并依次触发事件（从底层传回上层），称为“冒泡阶段”；

事件委托

利用事件冒泡机制把里层所需要响应的事件绑定到外层
可以减少事件的绑定次数
能够动态的给新增子元素添加该冒泡事件，可以根据event.target.tagName进行筛选

阻止事件

event.stopPropagation()
这是阻止事件的冒泡和捕获方法，但是默认事件任然会执行，如果点击一个连接，这个连接仍然会被打开

event.preventDefault()
这是阻止默认事件的方法，调用此方法时，链接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素

return false
这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件，不仅阻止了事件往上冒泡，而且阻止了事件本身

4.其它事件

页面加载事件

load

当scipt标签的代码，写在body上方时，需要用到
表示等待页面所有资源加载完毕，才执行回调函数
也可以监听某个资源，加载完毕才执行回调

window.addEventListener('load', function ( ) { })

DOMContentLoaded

当初始的HTML文档被完全加载和解析后，事件被触发
表示无需等待样式表、图片等资源完全加载完毕，也可执行回调函数

document.addEventListener('DOMContentLoaded', function ( ) { })

元素滚动事件

window.addEventListener('scroll', function ( ) { })

div.addEventListener('scroll', function ( ) { })

clientWidth：获取元素的可见宽度，包括内容区和内边距，返回数字不带px，只读属性
clientHeight：获取元素的可见高度，包括内容区和内边距，返回数字不带px，只读属性

offsetWidth：获取元素的宽度，包括内容区、内边距和边框、滚动条，返回数字不带px，只读属性
offsetHeight：获取元素的高度，包括内容区、内边距和边框、滚动条，返回数字不带px，只读属性

offsetParent：获取离当前元素最近的开启了定位的父元素，默认返回body
offsetLeft：获取当前元素相对于其定位父元素的水平偏移量，返回数字不带px，只读属性
offsetTop：获取当前元素相对于其定位父元素的垂直偏移量，返回数字不带px，只读属性

scrollWidth：获取元素整个滚动区域的宽度，返回数字不带px，只读属性
scrollHeight：获取元素整个滚动区域的高度，返回数字不带px，只读属性

scrollLeft：获取元素水平滚动条滚动的距离，返回数字不带px，可读写
scrollTop：获取元素垂直滚动条滚动的距离，返回数字不带px。可读写

当满足scrollHeight – scrollTop == clientHeight时，表明垂直滚动条滚动到底了
当满足scrollWidth– scrollLeft == clientWidth时，表明水平滚动条滚动到底了

在这里插入图片描述

例如：让页面初始时距离上方800px

documnet.documentElement.scrollTop = 800 //不带单位的，scrollTop 得到的就是数字型800，赋值也是

【注意】你需要一个小数值，可使用 element.getBoundingClientRect()，它是相对于视口的位置

页面尺寸

window.addEventListener('resize', function ( ) { })

案例：仿京东侧边栏电梯效果

在这里插入图片描述

M端事件
在这里插入图片描述

5.日期对象

JS中使用Date对象来表示一个时间
如果直接使用构造函数创建一个Date对象，则会封装当前代码执行时间
创建一个指定时间的对象，需要在构造函数中传递一个表示时间的字符串作为参数

在这里插入图片描述

const date = new Date()
const getDate = date.getDate()
const getDay = date.getDay()
const getMonth = date.getMonth()
const getTime = date.getTime()
console.log(date) // 创建日期对象
console.log(getDate) // 获取当前日期对象日的信息
console.log(getDay) // 获取当前日期对象是周几，0表示周日
console.log(getMonth) // 获取当前日期对象月的信息，0表示一月
console.log(getTime) // 返回 1970 年 1 月 1 日至今的毫秒数，表示时间戳，可以指定时间
console.log(Date.now()) // 返回当前时间戳
console.log(+new Date()) // 返回当前时间戳,可以指定时间

在这里插入图片描述
案例：倒计时

在这里插入图片描述

6.BOM

在这里插入图片描述

执行机制
在这里插入图片描述

BOM对象

Window：代表整个浏览器窗口，也是网页中的全局对象
Navigator：代表当前浏览器的信息，可以来识别不同的浏览器
Location：代表当前浏览器的地址栏信息，可以跳转页面 location.herf = "https://www.baidu.com"
History：代表浏览器的历史记录，由于隐私原因，不能获取到具体的历史记录，只能操作向前或向后翻页，而且该操作只在当次访问时有效
Screen：代表用户屏幕的信息，可以获取到用户的显示器的相关信息

这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用

location:
在这里插入图片描述
navigator:

Naigator代表当前浏览器的信息，由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了，一般只会使用userAgent来判断浏览器信息
userAgent：返回一个字符串，含有用来描述浏览器信息的内容，不同浏览器返回不同

history:

history对象可以操作浏览器向前或向后翻页
length属性：获取当前访问的链接数量

back( )：方法，用来回退到上一个页面，和浏览器回退按钮一样
forward( )：方法，用来跳转到下一个页面，和浏览器前进按钮一样
go( )：方法，用来跳转到指定的页面，需要一个整数作为参数
1：表示向前跳转1个页面，相当于forward( )
2：表示向前跳转2个页面
-1：表示向后回退1个页面，相当于back( )
-2：表示向后回退2个页面

存储相关

localStorage
sessionStorage
cookie
session
token

正则表达式

创建正则表达式

语法：var 变量 = new RegExp(“正则表达式”,”匹配模式”);
语法：var 变量 = /正则表达式/匹配模式;

test( )，使用这个方法可以检查一个字符串是否符合正则表达式的规则，符合返回true

字符串和正则相关方法

split( )：将一个字符串拆分为数组，可以搭配正则表达式进行使用，该方法即使不指定全局匹配也会全部拆分

search( )：可以搜索字符串中是否有指定内容，搜到指定内容则返回第一次出现的索引，没有则返回-1，可以搭配正则表达式进行检索字符串，该方法不能全局匹配

match( )：可以搭配正则表达式提取出符合条件的内容，默认情况下只会找到第一个符合要求的内容，可以设置成全局匹配获得所有结果，会将匹配结果封装到一个数组中返回

replace( )：可以搭配正则表达式替换字符串中指定内容，默认只替换第一个，可以设置成全局匹配模式

正则量词

通过量词可以设置内容出现的次数，只对前边一个内容起作用，可添加括号成整体
{n}：正好出现n次
{m,n}：出现m到n次，如果n不写表示m次以上
+：至少出现一次，相当于{1,n}
*：零次或出现多次，相当于{0,}
？：零次或出现一次，相当于{0,1}
^：表示开头
$：表示结尾

搭配转义字符

.：表示表示匹配除换行符（\n、\r）之外的任何单个字符，相等于 [^\n\r]
\.：表示匹配.
[ ]：表示括号里面任意一个都可以
\\：表示\
\w：表示任意字母、数字、下划线，相当于[A-z0-9_]
\W：表示除了字母、数字、下划线，相当于[^A-z0-9_]
\d：表示任意数字，相当于[0-9]
\D：表示除了数字，相当于[^0-9]
\s：表示空格
\S：表示除了空格
\b：表示单词边界
\B：表示除了单词边界

7.登录注册
正则表达式
循环定时器
本地存储
页面渲染
页面跳转

8.放大镜效果
在这里插入图片描述
考虑页面y轴发生滚动

let x = e.pageX - middle.getBoundingClientRect().left
let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop

蒙版元素移动

比例关系

需要计算移动的比例关系：蒙版元素可移动的距离 / 大图片可移动的距离

 const scale = (smallPic.clientWidth - maskDiv.offsetWidth) / (BigImg.offsetWidth - BigPic.clientWidth)
 BigImg.style.left = - left / scale + "px"
 BigImg.style.top = - top / scale + "px"

直接2倍

声明两个变量，mx：表示遮罩层水平移动距离，my：表示遮罩层垂直移动距离

let mx = 0, my = 0
if(x < 100) mx = 0
if(x >= 100 && x <= 300) mx = x - 100
if(x > 300) mx = 300 - 100

if(y < 100) my = 0
if(y >= 100 && y <= 300) my = y - 100
if(y > 300) my = 300 - 100

// 遮罩层移动
mask.style.left = mx + "px"
mask.style.top = my + "px"
// 大盒子移动
bigImg.style.left = - 2 * mx + "px"
bigImg.style.top = - 2 * my + "px"