16.包装类
- 在JS中为我们提供了三个包装类：
String() Boolean() Number()
- 通过这三个包装类可以创建基本数据类型的对象
例子：
var num = new Number(2);
var str = new String(“hello”);
var bool = new Boolean(true);
-
但是在实际应用中千万不要这么干。
-
当我们去操作一个基本数据类型的属性和方法时，
解析器会临时将其转换为对应的包装类，然后再去操作属性和方法，
操作完成以后再将这个临时对象进行销毁。
17.字符串的相关的方法
在底层字符串是以字符数组的形式保存的
//console.log(str.length);
//console.log(str[5]);
length
- 获取字符串的长度
charAt()
- 根据索引获取指定的字符
charCodeAt()
- 根据索引获取指定的字符编码
String.fromCharCode()
- 根据字符编码获取字符
concat()
-
可以用来连接两个或多个字符串
-
作用和+一样
indexOf()
lastIndexOf()
-
从一个字符串中检索指定内容
-
需要一个字符串作为参数，这个字符串就是要检索的内容，
如果找到该内容，则会返回其第一次出现的索引，如果没有找到则返回-1。
-
可以指定一个第二个参数，来表示开始查找的位置 ,不能指定负数
-
indexOf()是从前向后找
-
lastIndexOf()是从后向前找
slice()
-
可以从一个字符串中截取指定的内容，并将截取到内容返回，不会影响原变量
-
参数：
第一个：截取开始的位置（包括开始）
第二个：截取结束的位置（不包括结束）
-
可以省略第二个参数，如果省略则一直截取到最后
-
可以传负数，如果是负数则从后往前数
substr()
- 和slice()基本一致，不同的是它第二个参数不是索引，而是截取的数量
substring()
- 和slice()基本一致，不同的是它不能接受负值作为参数，如果设置一个负值，则会自动修正为0，
substring()中如果第二个参数小于第一个，自动调整位置
toLowerCase() toLocaleLowerCase()
- 将字符串转换为小写并返回
toUpperCase() toLocaleUpperCase()
- 将字符串转换为大写并返回
split()
-
可以根据指定内容将一个字符串拆分为一个数组
-
参数：
-
需要一个字符串作为参数，将会根据字符串去拆分数组
可以接收一个正则表达式，此时会根据正则表达式去拆分数组
| 方法 | 描述 |
| :-- | :-- |
| anchor() | 创建 HTML 锚。 |
| big() | 用大号字体显示字符串。 |
| blink() | 显示闪动字符串。 |
| bold() | 使用粗体显示字符串。 |
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
| concat() | 连接字符串。 |
| fixed() | 以打字机文本显示字符串。 |
| fontcolor() | 使用指定的颜色来显示字符串。 |
| fontsize() | 使用指定的尺寸来显示字符串。 |
| fromCharCode() | 从字符编码创建一个字符串。 |
| indexOf() | 检索字符串。 |
| italics() | 使用斜体显示字符串。 |
| lastIndexOf() | 从后向前搜索字符串。 |
| link() | 将字符串显示为链接。 |
| localeCompare() | 用本地特定的顺序来比较两个字符串。 |
| match() | 找到一个或多个正则表达式的匹配。 |
| replace() | 替换与正则表达式匹配的子串。 |
| search() | 检索与正则表达式相匹配的值。 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| small() | 使用小字号来显示字符串。 |
| split() | 把字符串分割为字符串数组。 |
| strike() | 使用删除线来显示字符串。 |
| sub() | 把字符串显示为下标。 |
| substr() | 从起始索引号提取字符串中指定数目的字符。 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 |
| sup() | 把字符串显示为上标。 |
| toLocaleLowerCase() | 把字符串转换为小写。 |
| toLocaleUpperCase() | 把字符串转换为大写。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| toSource() | 代表对象的源代码。 |
| toString() | 返回字符串。 |
| valueOf() | 返回某个字符串对象的原始值。 |
18.正则表达式
| 方法 | 描述 |
| :-- | :-- |
| exec | 一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（只有索引为零的值）（未匹配到则返回 null）【一次查一个 迭代使用】。 |
| test | 一个在字符串中测试是否匹配的RegExp方法，它返回 true 或 false。 |
| match | 一个在字符串中执行查找匹配的String方法，它返回一个数组，在未匹配到时会返回 null。 |
| matchAll | 一个在字符串中执行查找所有匹配的String方法，它返回一个迭代器（iterator）。 |
| search | 一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。 |
| replace | 一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。 |
| split | 一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法。 |
- 正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则，
也可以将一个字符串中符合规则的内容提取出来。
-
创建正则表达式
-
var reg = new RegExp(“正则”,“匹配模式”);
-
var reg = /正则表达式/匹配模式
下面这是两两等价 注意一下
var reg = /./
var reg = RegExp(‘\.’)
var reg = /\/
var reg = RegExp(‘\\’)
- 语法：
匹配模式：
i:忽略大小写
g:全局匹配模式
- 设置匹配模式时，可以都不设置，也可以设置1个，也可以全设置，设置时没有顺序要求
正则语法
| 或
[] 或
[^ ] 除了
[a-z] 小写字母
[A-Z] 大写字母
[A-z] 任意字母
[0-9] 任意数字
-
语法：
-
量词
{n} 正好n次
{m,n} m-n次
{m,} 至少m次
- 至少1次 {1,}
? 0次或1次 {0,1}
- 0次或多次 {0,}
- 转义字符
\ 在正则表达式中使用\作为转义字符
. 表示.
\ 表示\
. 表示任意字符
\w
- 相当于[A-z0-9_]
\W
- 相当于[^A-z0-9_]
\d
- 任意数字
\D
- 除了数字
\s
- 空格
\S
- 除了空格
\b
- 单词边界
下列都有/\bword\b/
‘word’ ‘#word%’
下列无/\bword\b/
‘_word’ ‘1word’
边界不能为 \w 相当于[A-z0-9_]
\B
- 除了单词边界
^ 表示开始
$ 表示结束
- 方法：
test()
-
可以用来检查一个字符串是否符合正则表达式
-
如果符合返回true，否则返回false
match()
-
可以将字符串中和正则表达式匹配的内容提取出来
-
默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
以为一个正则表达式设置多个匹配模式，且顺序无所谓
-
match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
-
参数：
-
正则表达式，可以根据该正则表达式将字符串中符合要求的内容提取出来
并且封装到一个数组中返回
replace()
-
可以将字符串中指定内容替换为新的内容
-
参数：
-
第一个：被替换的内容，可以是一个正则表达式
-
第二个：替换的新内容
-
默认只会替换第一个 ,可以设置为全局匹配
search()
-
可以根据正则表达式去字符串中查找指定的内容
-
可以搜索字符串中是否含有指定内容
-
参数：
正则表达式（也可以为字符串，但是有indexOf），将会根据该表达式查询内容，
并且将第一个匹配到的内容的索引返回，如果没有匹配到任何内容，则返回-1。
split()
-
可以根据指定内容将一个字符串拆分为一个数组
-
参数：
-
需要一个字符串作为参数，将会根据字符串去拆分数组
可以接收一个正则表达式，此时会根据正则表达式去拆分数组
这个方法即使不指定全局匹配，也会全都插分
19.Date
-
日期的对象，在JS中通过Date对象来表示一个时间
-
创建对象
-
创建一个当前的时间对象
var d = new Date();
- 创建一个指定的时间对象
var d = new Date(“月/日/年 时:分:秒”);
- 方法：
getDate()
- 当前日期对象是几日（1-31）
getDay()
-
返回当前日期对象时周几（0-6）
-
0 周日
-
1 周一 。。。
getMonth()
-
返回当前日期对象的月份（0-11）
-
0 一月 1 二月 。。。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime()
-
返回当前日期对象的时间戳
-
时间戳，指的是从1970年1月1日 0时0分0秒，到现在时间的毫秒数
计算机底层保存时间都是以时间戳的形式保存的。
Date.now()
- 可以获取当前代码执行时的时间戳
20.Math
- Math属于一个工具类，它不需要我们创建对象，它里边封装了属性运算相关的常量和方法
我们可以直接使用它来进行数学运算相关的操作
- 方法：
Math.PI
- 常量，圆周率
Math.abs()
- 绝对值运算
Math.ceil()
- 向上取整
Math.floor()
- 向下取整
Math.round()
- 四舍五入取整
Math.random()
-
生成一个0-1之间的随机数 没有0和1
-
生成一个x-y之间的随机整数
Math.floor(Math.random()*(y+1-x)+x);
Math.pow(x,y)
-
求x的y次幂
-
x ** y
Math.sqrt()
- 对一个数进行开方
Math.max()
- 求多个数中最大值
Math.min()
- 求多个数中的最小值
21.JSON
IE7及以下的浏览器的JSON字符串转为对象格式
1.什么是DOM
-
DOM，全称Document Object Model文档对象模型。
-
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
-
文档
– 文档表示的就是整个的HTML网页文档
- 对象
– 对象表示将网页中的每一个部分都转换为了一个对象。
-
转换完对象以后，就可以以一种纯面向对象的形式来操作网页了
-
模型
– 使用模型来表示对象之间的关系，这样方便我们获取对象。
2.节点
-
节点Node，是构成我们网页的最基本的组成部分，网页中每一个部分都可以称为是一个节点。
-
比如：html标签、属性、文本、注释、整个文档等都是一个节点。
-
虽然都是节点，但是实际上他们的具体类型是不同的。
-
比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
-
节点的类型不同，属性和方法也都不尽相同。
节点的属性
文档节点（document）
-
文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。
-
document对象作为window对象的属性存在的，我们不用获取可以直接使用。
-
通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。
元素节点（Element）
-
HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。
-
浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。
-
比如：
– document.getElementById()
– 根据id属性值获取一个元素节点对象。
文本节点（Text）
-
文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。
-
它包括可以字面解释的纯文本内容。
-
文本节点一般是作为元素节点的子节点存在的。
-
获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。
-
例如：
– 元素节点.firstChild;
– 获取元素节点的第一个子节点，一般为文本节点
属性节点（Attr）
-
属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
-
可以通过元素节点来获取指定的属性节点。
-
例如：
– 元素节点.getAttributeNode("属性名");
注意：我们一般不使用属性节点。
3.事件
-
事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
-
JavaScript 与 HTML 之间的交互是通过事件实现的。
-
对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。
4.获取节点
获取元素节点 – 通过document对象调用
getElementById()
– 通过id属性获取一个元素节点对象
getElementsByTagName()
– 通过标签名获取一组元素节点对象
getElementsByName()只有document有
– 通过name属性获取一组元素节点对象
getElementsByClassName()
-
DOM操作
-
DOM查询
-
在网页中浏览器已经为我们提供了document对象，
它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。
-
document查询方法：
-
根据元素的id属性查询一个元素节点对象：
-
document.getElementById(“id属性值”);
-
根据元素的name属性值查询一组元素节点对象:
-
document.getElementsByName(“name属性值”);
-
根据标签名来查询一组元素节点对象：
-
document.getElementsByTagName(“标签名”);
获取元素节点的子节点 – 通过具体的元素节点调用
getElementsByTagName()
– 方法，返回当前节点的指定标签名后代节点
getElementsByClassName
– 方法，返回当前节点的指定类名后代节点
childNodes
– 属性，表示当前节点的所有子节点
firstChild
– 属性，表示当前节点的第一个子节点
firstElementChild
– 属性，表示当前节点的第一个元素子节点
lastChild
– 属性，表示当前节点的最后一个子节点
lastElementChild
– 属性，表示当前节点的最后一个元素子节点
children
– 获取当前元素的所有子元素
- 可以通过元素节点来获取指定的属性节点。
– 元素节点.getAttributeNode("属性名");
注意：我们一般不使用属性节点。
获取父节点和兄弟节点 – 通过具体的节点调用
parentNode
– 属性，表示当前节点的父节点
previousSibling
– 属性，表示当前节点的前一个兄弟节点
previousElementSibling
– 属性，表示当前节点的前一个兄弟节点
nextSibling
– 属性，表示当前节点的后一个元素兄弟节点
nextElementSibling
– 属性，表示当前节点的后一个元素兄弟节点
元素节点的属性
-
获取，元素对象.属性名
-
注意 属性
class在js里面是className
例：
element.value
element.id
element.className
- 设置，元素对象.属性名=新的值
例：
element.value = “hello”
element.id = “id01”
element.className = “newClass”
nodeValue-innerHTML-innerText
nodeValue
– 文本节点可以通过nodeValue属性获取和设置文本节点的内容
innerHTML
– 元素节点通过该属性获取和设置标签内部的html代码
innerHTML和innerText
-
这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性
-
两个属性作用类似，都可以获取到标签内部的内容，
不同是innerHTML会获取到html标签，而innerText会自动去除标签
- 如果使用这两个属性来设置标签内部的内容时，没有任何区别的
读取标签内部的文本内容
h1中的文本内容
元素.firstChild.nodeValue
其他属性
- document对象的其他的属性和方法
document.all
- 获取页面中的所有元素，相当于document.getElementsByTagName(“*”);
document.documentElement
- 获取页面中html根元素
document.body
- 获取页面中的body元素
document.getElementsByClassName()
-
根据元素的class属性值查询一组元素节点对象
-
这个方法不支持IE8及以下的浏览器
使用CSS选择器进行查询
-
querySelector() -
querySelectorAll() -
这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。
-
不同的地方是
querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。
5.节点的修改(DOM修改)
-
这里的修改我们主要指对元素节点的操作。
-
创建节点
– document.createElement(标签名)
- 删除节点
– 父节点.removeChild(子节点)
- 替换节点
– 父节点.replaceChild(新节点 , 旧节点)
- 插入节点
– 父节点.appendChild(子节点)
– 父节点.insertBefore(新节点 , 旧节点)
DOM修改
document.createElement()
- 可以根据标签名创建一个元素节点对象
document.createTextNode()
- 可以根据文本内容创建一个文本节点对象
父节点.appendChild(子节点)
-
向父节点中添加指定的子节点
-
若这个节点是页面上的，就把原位置节拿走放到指定父节点的里面
父节点.insertBefore(新节点,旧节点)
- 将一个新的节点插入到旧节点的前边
父节点.replaceChild(新节点,旧节点)
- 使用一个新的节点去替换旧节点
父节点.removeChild(子节点)
-
删除指定的子节点
-
推荐方式：子节点.parentNode.removeChild(子节点)
innerHTML 配合 字符串 也可以完成上述操作，但浏览器在添加元素时，会把之前存在的相同的元素节点覆盖替换，比较浪费资源，须在合适的时机使用
myClick(‘btn02’, function () {
var li = document.createElement(‘li’)
// var text = document.createTextNode(‘广州’)
// li.appendChild(text);
li.innerHTML = ‘广州’
city.insertBefore(li, bj)
})
6.文档的加载
-
文档的加载
-
浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。
-
如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，
此时将会无法正常获取到DOM对象，导致DOM操作失败。
-
解决方式一：
-
可以将js代码编写到body的下边
按钮
-
解决方式二：
-
将js代码编写到window.onload = function(){}中
-
window.onload 对应的回调函数会在整个页面加载完毕以后才执行，
所以可以确保代码执行时，DOM对象已经加载完毕了
7.DOM对CSS的操作
DOM对CSS的操作
-
读取和修改内联样式
-
使用style属性来操作元素的内联样式
-
读取内联样式：
语法：元素.style.样式名
- 例子：
元素.style.width
元素.style.height
- 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法
将-去掉，然后-后的字母改大写
- 比如：background-color --> backgroundColor
border-width —> borderWidth
- 修改内联样式：
语法：元素.style.样式名 = 样式值（为字符串）
- 通过style修改的样式都是内联样式，由于内联样式的优先级比较高，
所以我们通过JS来修改的样式，往往会立即生效，
但是如果样式中设置了!important，则内联样式将不会生效。
-
读取元素的当前样式
-
正常浏览器
-
使用getComputedStyle()
-
这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
-
参数：
1.要获取样式的元素
2.可以传递一个伪元素，一般传null
- 例子：
获取元素的宽度
getComputedStyle(box , null)[“width”];
-
通过该方法读取到样式都是只读的不能修改
-
IE8
-
使用currentStyle
-
语法：
元素.currentStyle.样式名
- 例子：
box.currentStyle[“width”] （不好的地方 div宽度可能读到auto）
- 通过这个属性读取到的样式是只读的不能修改
读取当前样式兼容写法
function getStyle(obj , name){
if(window.getComputedStyle){
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
}
- 其他的样式相关的属性
注意：以下样式都是只读的
clientHeight
- 元素的可见高度，指元素的-内容区和内边距-的高度
clientWidth
- 元素的可见宽度，指元素的-内容区和内边距-的宽度
offsetHeight
- 整个元素的高度，包括-内容区、内边距、边框-
offsetWidth
- 整个元素的宽度，包括-内容区、内边距、边框-
offsetParent
-
当前元素的定位父元素
-
离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body
offsetLeft
offsetTop
-
当前元素和定位父元素之间的偏移量
-
offsetLeft水平偏移量 offsetTop垂直偏移量
scrollHeight
scrollWidth
- 获取元素滚动区域的高度和宽度 -内容区和内边距-
scrollTop
scrollLeft
- 获取元素垂直和水平滚动条滚动的距离
判断滚动条是否滚动到底
- 垂直滚动条
scrollHeight - scrollTop = clientHeight
- 水平滚动
scrollWidth - scrollLeft = clientWidth
//当满足scrollHeight - scrollTop == clientHeight
//说明垂直滚动条滚动到底了
//当满足scrollWidth - scrollLeft == clientWidth
//说明水平滚动条滚动到底
8.对类的操作
点击按钮以后修改box的样式
1.了解 事件
-
指的就是用户与浏览器交互的一瞬间
-
我们通过为指定事件绑定回调函数的形式来处理事件，当指定事件触发以后我们的回调函数就会被调用，这样我们的页面就可以完成和用户的交互了。
-
事件（Event）
-
事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。
-
我们可以为事件来绑定回调函数来响应事件。
-
绑定事件的方式：
1.可以在标签的事件属性中设置相应的JS代码
例子：
<button οnclick=“js代码。。。”>按钮
2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件
例子：
按钮
2.事件处理程序
- 我们可以通过两种方式为一个元素绑定事件处理程序：
– 通过HTML元素指定事件属性来绑定
– 通过DOM对象指定的属性来绑定
-
这两种方式都是我们日常用的比较多的，但是更推荐使用第二种方式。
-
还有一种方式比较特殊我们称为设置事件监听器。使用如下方式：
– 元素对象.addEventListener()
3.通过HTML标签的属性设置
- 通过HTML属性来绑定事件处理程序是最简单的方式。
按钮
-
这种方式当我们点击按钮以后，
onclick属性中对应的JS代码将会执行，也就是点击按钮以后，页面中会弹出两个提示框。 -
这种方式我们直接将代码编写到了onclick属性中，可以编写多行js代码，当然也可以事先在外部定义好函数。
-
这种方式的优点在于，设定步骤非常简单，并且能够确保事件处理程序会在载入时被设定。
-
如果在函数的最后return false则会取消元素的默认行为。
-
使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
-
需要使用event来取消默认行为event.preventDefault();
-
但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
-
<a href="javascript:;">Delete</a>可以取消啊的默认行为
4.通过DOM对象的属性绑定
- 但是其实上面的写法虽然简单，但却将
JS和HTML的代码编写到了一起，并不推荐使用，我们更推荐
如下的写法：
var btn = document.getElementById(‘btn’);
btn.onclick = function(){
alert(“hello”);
};
- 这种写法将HTML代码和JS写在不同的位置，维护起来更加容易。
5.设置事件监听器
-
前边两种方式都可以绑定事件处理程序，但是它们都有一个缺点就是都只能绑定一个程序，而不能为一个事件绑定多个程序,如果绑定了多个，则后边会覆盖掉前边的。
-
这是我们就可以使用
addEventListener()来处理，这个方法需要三个参数：
1.事件的字符串，不要on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false 默认 false，可以不填
-
使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
-
需要使用event来取消默认行为event.preventDefault();
-
但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
btn.addEventListener(‘click’ , function(){alert(“hello”);},false);**
-
但是要注意的是ie8以下的浏览器是不支持上边的方法的，需要使用
attachEvent代替。 -
也可以使用
removeEventListener()和detachEvent()移除事件。
点我一下
6.事件处理中的this
-
在事件处理程序内的 this 所引用的对象即是设定了该事件处理程序的元素(IE的’attachEvent '里的this是window）。
-
也就是事件是给那个对象绑定的this就是哪个对象。
-
再循环中事件处理的回调函数多使用this ，慎用 for循环的index ，回调函数执行时，index已成为定值（循环结束后的值，不能如愿的根据index索引到指定元素删除），即使用的是let 定义的index ，也要慎用，尤其回调函数中有添加删除此类元素节点的操作
7.事件对象
-
在DOM对象上的某个事件被触发时，会产生一个事件对象Event，这个对象中包含着所有事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
-
例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持 event 对象，但支持方式不同。
-
DOM标准的浏览器会将一个event对象传入到事件的处理程序当中。无论事件处理程序是什么都会传入一个event对象。
-
可以通过这种方式获取：
btn.onclick = function(event){
alert(event.type);
};
- Event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。
Event对象的通用属性/方法
8.IE中的事件对象
-
与访问 DOM 中的 event 对象不同，要访问 IE 中 的 event 对象有几种不同的方式，取决于指定事件处理程序的方法。
-
在IE中event对象作为window对象的属性存在的，可以使用window.event来获取event对象。
-
在使用attachEvent()的情况下，也会在处理程序中传递一个event对象，也可以按照前边的方式使用。
Event对象的通用属性/方法（IE）
事件
-
事件对象
-
当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，
这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。
-
可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存
-
例子：
元素.事件 = function(event){
event = event || window.event;
};
元素.事件 = function(e){
e = e || event;
};
9.事件的触发
-
事件的发生主要是由用户操作引起的。
-
比如
mousemove这个事件就是由于用户移动鼠标引起的，在鼠标指针移动的过程中该事件会持续发生。 -
当指定事件被触发时，浏览器就会调用对应的函数去响应事件，一般情况下事件没触发一次，函数就会执行一次。
-
因此设置鼠标移动的事件可能会影响到鼠标的移动速度。所以设置该类事件时一定要谨慎。
10.事件的传播
- 在网页中标签与标签之间是有嵌套关系的，比如这样一个页面：
sample
-
如果这时用户点击了sample按钮，则会以该按钮作为事件目标触发一次点击事件。
-
这时，事件的处理将会分为捕获阶段、目标阶段、事件冒泡这三个阶段。
事件的传播流程
- 捕获阶段
– 这一阶段会从window对象开始向下一直遍历到目标对象，如果发现有对象绑定了响应事件则做相应的处理。
- 目标阶段
– 这一阶段已经遍历结束，则会执行目标对象上绑定的响应函数。
- 事件冒泡阶段
– 这一阶段，事件的传播方式和捕获阶段正好相反，会从事件目标一直向上遍历，直至window对象结束，这时对象上绑定的响应函数也会执行。
取消事件传播
- 我们可以使用event对象的两个方法完成：
– stopPropagation():取消事件的进一步捕获或冒泡
– stopImmediatePropagation():取消事件的进一步捕获或冒泡
- 取消默认行为：
– preventDefault()
-
事件的冒泡（Bubble）
-
事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
-
事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
-
可以将事件对象的cancelBubble设置为true，即可取消冒泡
-
例子：
元素.事件 = function(event){
event = event || window.event;
event.cancelBubble = true;
};
11.常用的事件属性
MouseEvent - WheelEvent 继承MouseEvent
WheelEvent 只有事件wheel属于这个对象
| 属性/方法 | 描述 |
| :-- | :-- |
| clientX | 返回触发鼠标事件时，鼠标指针相对于当前窗口的水平坐标。 |
| clientY | 返回触发鼠标事件时，鼠标指针相对于当前窗口的垂直坐标。 |
| offsetX | 返回鼠标指针相对于目标元素边缘位置的水平坐标。 |
| offsetY | 返回鼠标指针相对于目标元素边缘位置的垂直坐标。 |
| pageX | 返回触发鼠标事件时鼠标指针相对于文档的水平坐标。 |
| pageY | 返回触发鼠标事件时鼠标指针相对于文档的垂直坐标。 |
| screenX | 返回触发事件时鼠标指针相对于屏幕的水平坐标。 |
| screenY | 返回触发事件时鼠标指针相对于屏幕的垂直坐标。 |
注意
chrome的html无法触发onscroll事件，离谱的是chrome的html可以读取scrollTop属性，但是chrome的body不能读取
触发事件建议直接使用 document.onscroll
读取 scrollTop 使用 如下表达式
document.body.scrollTop || document.documentElement.scrollTop;
KeyboardEvent
这些事件类型属于 KeyboardEvent 对象：
| 事件 | 描述 |
| :-- | :-- |
| onkeydown | 当用户正在按下键时，发生此事件。 |
| onkeypress | 当用户按了某个键时，发生此事件。 |
| onkeyup | 当用户松开键时，发生此事件。 |
| 属性/方法 | 描述 |
| :-- | :-- |
| altKey | 返回触发按键事件时是否按下了 “ALT” 键。 |
| charCode | 返回触发 onkeypress 事件的键的 Unicode 字符代码。 |
| code | 返回触发事件的键的代码。 |
| ctrlKey | 返回按键鼠标事件时是否按下了 “CTRL” 键。 |
| getModifierState() | 如果指定的键被激活，则返回 true。 |
| isComposing | 返回事件的状态是否正在构成。 |
| key | 返回事件表示的键的键值。 |
| keyCode | 返回触发 onkeypress 事件的键的 Unicode 字符码，或触发 onkeydown 或 onkeyup 事件的键的 Unicode 键码。 |
| location | 返回键盘或设备上按键的位置。 |
| metaKey | 返回按键事件触发时是否按下了 “META” 键。 |
| repeat | 返回是否重复按住某个键。 |
| shiftKey | 返回按键事件触发时是否按下了 “SHIFT” 键。 |
| which | 返回触发 onkeypress 事件的键的 Unicode 字符码，或触发 onkeydown或 onkeyup 事件的键的 Unicode 键码 |
12.事件的委派
添加超链接
我是p元素
- 超链接一
- 超链接二
- 超链接三
13.案例
1).拖拽
取消浏览器鼠标默认行为
return false
IE:
设置某元素捕获所有鼠标按下的事件
-
一次性的
-
setCapture()
-
- 只有IE支持，但是在火狐中调用时不会报错，
-
而如果使用chrome调用，会报错
取消某元素捕获所有鼠标按下的事件
- releaseCapture();
我是一段文字
2).滚轮事件
-
使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
-
需要使用event来取消默认行为event.preventDefault();
-
但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
3).键盘事件
/*
-
键盘事件：
-
onkeydown
-
- 按键被按下 -
- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发 -
- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快 -
这种设计是为了防止误操作的发生。 -
- keycode无法区分大小写 -
onkeyup
-
- 按键被松开 -
- keycode可以区分大小写 -
onkeypress 与onkeydown类似 ，但是无法监测功能键和和功能组合键
-
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
*/
/*
-
可以通过keyCode来获取按键的编码
-
通过它可以判断哪个按键被按下
-
除了keyCode，事件对象中还提供了几个属性
-
altKey
-
ctrlKey
-
shiftKey
-
- 这个三个用来判断alt ctrl 和 shift是否被按下 -
如果按下则返回true，否则返回false
*/
//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
return false
//在文本框中输入内容，属于onkeydown的默认行为
//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
按键移动div
1.什么是
BOM-
ECMAScript无疑是JavaScript的核心，但是要想在浏览器中使用JavaScript，那么BOM（浏览器对象模型）才是真正的核心。 -
BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。 -
BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为。
/*
-
BOM
-
- 浏览器对象模型
-
- BOM可以使我们通过JS来操作浏览器
-
- 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
-
- BOM对象
-
Window -
- 代表的是整个浏览器的窗口，同时window也是网页中的全局对象 -
Navigator -
- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 -
Location -
- 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面 -
History -
- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录 -
由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页 -
**而且该操作只在当次访问时有效** -
Screen -
- 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息 -
这些BOM对象在浏览器中都是作为window对象的属性保存的， -
可以通过window对象来使用，也可以直接使用
*/
2.
window对象-
window对象是BOM的核心，它表示一个浏览器的实例。 -
在浏览器中我们可以通过window对象来访问操作浏览器，同时window也是作为全局对象存在的。
-
全局作用域：
– window对象是浏览器中的全局对象，因此所有在全局作用域中声明的变量、对象、函数都会变成window对象的属性和方法。
3.窗口大小
- 浏览器中提供了四个属性用来确定窗口大小：
– 网页窗口的大小
-
innerWidth -
innerHeight
– 浏览器本身的尺寸
-
outerWidth -
outerHeight
4.打开窗口
-
使用
window.open()方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。 -
这个方法需要四个参数：
– 需要加载的url地址
– 窗口的目标
– 一个特性的字符串
– 是否创建新的历史记录
5.超时调用
- 超时调用：
–
setTimeout()– 超过一定时间以后执行指定函数
– 需要连个参数：
-
要执行的内容
-
超过的时间
-
取消超时调用
–
clearTimeout()- 超时调用都是在全局作用域中执行的。
6.间歇调用
- 间歇调用：
–
setInterval()– 每隔一段时间执行指定代码
– 在开启定时器之前，需要将当前元素上的其他定时器关闭
– 需要两个参数：
-
要执行的代码
-
间隔的时间
-
取消间隔调用：
–
clearInterval()clearInterval()可以接收任意参数，如果参数是一个有效的定时器的标识，则停止对应的定时器
如果参数不是一个有效的标识，则什么也不做
超时调用和延时调用返回值的类型是number
7.系统对话框
-
浏览器通过
alert()、confirm()和prompt()方法可以调用系统对话框向用户显示消息。 -
它们的外观由操作系统及（或）浏览器设置决定，而不是由
CSS决定。 -
显示系统对话框时会导致程序终止，当关闭对话框程序会恢复执行。
alert
-
alert()接收一个字符串并显示给用户。调用alert()方法会向用户显示一个包含一个确认按钮的对话框。 -
例如：
– alert(“Hello World”);
confirm
-
confirm和alert类似，只不过confirm弹出的对话框有一个确认和取消按钮。用户可以通过按钮来确认是否执行操作。
-
例如：
– confirm(‘你确定吗？’);
- 这个函数的执行会返回一个布尔值，如果选择确定则返回true，如果点击取消则返回false。
prompt
-
prompt会弹出一个带输入框的提示框，并可以将用户输入的内容返回。
-
它需要两个值作为参数：
– 显示的提示文字
– 文本框中的默认值
- 例子：
– prompt(‘你的年龄是？’,‘18’);
8.
location对象-
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
-
href属性：
–
href属性可以获取或修改当前页面的完整的URL地址，使浏览器跳转到指定页面。– 也可以直接把URL地址直接赋值给location对象
– 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
assign()方法
– 所用和
href一样，使浏览器跳转页面，新地址错误参数传递到assign ()方法中– 用来跳转到其他的页面，作用和直接修改location一样
replace()方法
– 功能一样，只不过使用replace方法跳转地址不会体现到历史记录中。
reload(true)方法
– 用于强制刷新当前页面 ，不传参只是刷新页面
点我一下
Location
9.
navigator对象-
navigator对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息。 -
我们有时会使用
navigator的userAgent属性来检查用户浏览器的版本。
/*
-
Navigator
-
- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
-
- 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
-
- 一般我们只会使用userAgent来判断浏览器的信息，
-
userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容， -
不同的浏览器会有不同的userAgent -
NT 6.1 win7 -
WOW64:64位系统 Win64; x64 -
Gecko：火狐引擎 -
Firefox：火狐 Chrome：谷歌 -
火狐的userAgent
-
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
-
Chrome的userAgent
-
Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
-
IE8
-
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
-
IE9
-
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
-
IE10
-
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
-
IE11
-
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
-
- 在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
*/
var ua = navigator.userAgent;
console.log(ua);
if (/firefox/i.test(ua)) {
alert(“你是火狐！！！”);
} else if (/chrome/i.test(ua)) {
alert(“你是Chrome”);
} else if (/msie/i.test(ua)) {
alert(“你是IE浏览器~~~”);
} else if (“ActiveXObject” in window) {
alert(“你是IE11，枪毙了你~~~”);
}
//ActiveXObject 在IE11 转化为 false ，其他IE 转化为true ，所以用"ActiveXObject" in window
10.
screen对象-
screen对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。 -
该对象作用不大，我们一般不太使用。
11.
history对象-
history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。 -
length
返回浏览器历史列表中的 URL 数量。
go()
– 使用
go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。- back()
– 向后跳转
- forward()
– 向前跳转
/*
-
length
-
- 属性，可以获取到当成访问的链接数量
*/
//alert(history.length);
/*
-
back()
-
- 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
*/
//history.back();
/*
-
forward()
-
- 可以跳转下一个页面，作用和浏览器的前进按钮一样
*/
//history.forward();
/*
-
go()
-
- 可以用来跳转到指定的页面
-
- 它需要一个整数作为参数
-
1:表示向前跳转一个页面 相当于forward() -
2:表示向前跳转两个页面 -
-1:表示向后跳转一个页面 -
-2:表示向后跳转两个页面
*/
12.
document-
document对象也是window的一个属性，这个对象代表的是整个网页的文档对象。
-
我们对网页的大部分操作都需要以document对象作为起点。
13.案例
定时器动画效果，利用好回调函数
动画模块 tools.js
//尝试创建一个可以执行简单动画的函数
/*
-
参数：
-
obj:要执行动画的对象
-
attr:要执行动画的样式，比如：left top width height
-
target:执行动画的目标位置
-
speed:移动的速度(正数向右移动，负数向左移动)
-
callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + “px”;
//当元素移动到0px时，使其停止执行动画
if(newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
}
/*
-
定义一个函数，用来获取指定元素的当前的样式
-
参数：
-
obj 要获取样式的元素 -
name 要获取的样式名
*/
function getStyle(obj, name) {
if(window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
html页面点击按钮以后box1向右移动
点击按钮以后box1向左移动
点击按钮以后box2向右移动
测试按钮
轮播图
tools.js与前面的案例相同-
-
二级菜单
tools.js//尝试创建一个可以执行简单动画的函数
/*
-
参数：
-
obj:要执行动画的对象
-
attr:要执行动画的样式，比如：left top width height
-
target:执行动画的目标位置
-
speed:移动的速度(正数向右移动，负数向左移动)
-
callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + “px”;
//当元素移动到0px时，使其停止执行动画
if(newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
}
/*
-
定义一个函数，用来获取指定元素的当前的样式
-
参数：
-
obj 要获取样式的元素 -
name 要获取的样式名
*/
function getStyle(obj, name) {
if(window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
-
参数:
-
obj 要添加class属性的元素
-
cn 要添加的class值
*/
function addClass(obj, cn) {
//检查obj中是否含有cn
if(!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
-
判断一个元素中是否含有指定的class属性值
-
如果有该class，则返回true，没有则返回false
*/
function hasClass(obj, cn) {
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;
var reg = new RegExp(“\b” + cn + “\b”);
return reg.test(obj.className);
}
/*
- 删除一个元素中的指定的class属性
*/
function removeClass(obj, cn) {
//创建一个正则表达式
var reg = new RegExp(“\b” + cn + “\b”);
//删除class
obj.className = obj.className.replace(reg, “”);
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
前端校招精编面试解析大全点击这里免费获取完整版pdf查看
/设置超链接浮动/
float: left;
/设置超链接的宽和高/
width: 15px;
height: 15px;
/设置背景颜色/
background-color: red;
/设置左右外边距/
margin: 0 5px;
/设置透明/
opacity: 0.5;
/兼容IE8透明/
filter: alpha(opacity=50);
}
/设置鼠标移入的效果/
#navDiv a:hover{
background-color: black;
}
-
-
二级菜单
tools.js//尝试创建一个可以执行简单动画的函数
/*
-
参数：
-
obj:要执行动画的对象
-
attr:要执行动画的样式，比如：left top width height
-
target:执行动画的目标位置
-
speed:移动的速度(正数向右移动，负数向左移动)
-
callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + “px”;
//当元素移动到0px时，使其停止执行动画
if(newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
}
/*
-
定义一个函数，用来获取指定元素的当前的样式
-
参数：
-
obj 要获取样式的元素 -
name 要获取的样式名
*/
function getStyle(obj, name) {
if(window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
-
参数:
-
obj 要添加class属性的元素
-
cn 要添加的class值
*/
function addClass(obj, cn) {
//检查obj中是否含有cn
if(!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
-
判断一个元素中是否含有指定的class属性值
-
如果有该class，则返回true，没有则返回false
*/
function hasClass(obj, cn) {
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;
var reg = new RegExp(“\b” + cn + “\b”);
return reg.test(obj.className);
}
/*
- 删除一个元素中的指定的class属性
*/
function removeClass(obj, cn) {
//创建一个正则表达式
var reg = new RegExp(“\b” + cn + “\b”);
//删除class
obj.className = obj.className.replace(reg, “”);
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-orcU6J01-1713504135476)]
[外链图片转存中…(img-kvGkuHUK-1713504135477)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-7MpRTk9y-1713504135477)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
[外链图片转存中…(img-r2L9JS60-1713504135477)]
最后
前端校招精编面试解析大全点击这里免费获取完整版pdf查看
-
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
