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查看
-