javascript的Bom与特效

发表于2023-09-14更新于2023-09-14

BOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
navigator对象 包含有关浏览器的信息 最常用的是userAgent可用来判断
手机端和电脑端显示不同界面
location对象                                         
location.href               // 获取设置整个url
location.host               // 返回主机域名
location.port               // 返回端口号
location.pathname          // 返回路径
location.search           // 返回参数
location.hash              // 返回片段#后面内容常见锚点
location.reload()           //刷新界面
history对象                                                    
history.back( )              //可以后退功能
history.forward         // 前进功能
history.go(参数)         // 前进后退功能参数如果是1  前进一个界面  -1后退一个界面

本地存储

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.sessionStorage                                        
1.生命周期为关闭浏览器窗口
2.在同一个窗口(页面)下数据可以共享
3.以键值对的形式储存使用
sessionStorage.setltem(名称key,value)                   // 存储数据
sessionStorage.getltem(key)                              // 获取数据
sessionStorage.removeltem(key)                           // 删除数据
sessionStorage.clear( )                                   // 删除所有数据
window.localStorage                                             
1.永久有效 ,除非手动删除 否则关闭界面也会存在
2.可多窗口共享 同一浏览器
3.以键值队的形式储存使用
localStorage.setltem(名称key,value)                    //存储数据
localStorage.getltem(key)                               // 获取数据
localStorage.removeltem(key)                           //  删除数据
localStorage.clear( )                                     // 删除所有数据

本地储存只能存储字符串数据格式 我们把对象转化为字符串格式  JSON.stringify()
使用JSON.parse()转化为对象格式

网页特效

offset系列

1
2
3
4
5
element.offsetTop                    // 返回元素带有定位父元素上方偏移
element.offsetLeft                  // 返回元素相对带有定位的父元素左边偏移  (没有定位以body为准)
element.offsetWidth                 // 返回元素大小高度包含  padding+border+width
element.offsetHeight                //返回元素大小高度包含  padding+border+height
element.offsetParent              // 返回该元素带有定位的父级元素  如果没有定位返回body

client 系列

1
2
3
4
element.clientTop                         //返回元素上边框大小
element.clientLeft                        //返回左边框大小
element.clientWidth                      //返回自身包括padding 内容宽度不含边框
element.clientHeight                     //返回自身包括padding 内容高度 不含边框

scroll 系列

1
2
3
4
5
6
7
8
element.scrollTop                        //返回被卷上去的上册距离
elenmnt.scrollLeft                       // 返回被卷去的左侧距离
element.scrollWidth               //返回自身实际宽度  不含边框包含padding  滚动所有宽度
element.scrollHeight              //返回自身实际高度  不含边框包含padding  滚动所有高度
页面被卷去的头部     是      window.pageYoffset
document.documentElement.scrollTop
mousever  鼠标经过自身盒子会触发 经过子盒子还会触发  mouseentre 只会经过自身盒子触发
之所以这样mouseenter不会冒泡    缓动动画公式  :(目标值-现在位置)/10

移动端知识

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
touchstart                                  // 手指触摸到
touchmove                                   //元素上滑动
touchend                                   //  从元素上移开触发
transitionend                              //  过渡结束事件
触摸事件对象
touches                                //  正在触摸屏幕所有手指的列表
targetTouches                             // 正在触摸当前dom元素手指列表
changedTouches                          // 手指状态发生改变的列表 从无到有或者 从有到无

click延时解决(因为移动端双击会缩放页面所有延时300ms)
1.禁用缩放
<meta name="viewport" content="user-scalable=no">
2.fastclick 插件解决300ms延时问题
先引入文件然后
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
轮播图插件
Swiper插件使用
视频插件   zy.media,js插件设置视频样式

正则表达式

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
正则表达式:是用于匹配字符串中字符的组合模式  js中也是对象
创建正则表达式
let 名 = new RegExp(/表达式/)
let 名 = /表达式/
使用方法
名.test(检测字符串)                 //符合返回true否则返回false
名.exec(检测字符串)                 //检测是否含有返回数组得知位置的索引无返回就是null
let 名 = / 表达式/修饰符(swith)
swith匹配模式三种:
g                             //全局匹配
i                             //忽略大小写
gi                            //全局匹配+忽略大小写

替换
字符串.replace('被替换','替换成')       //常用忽略敏感词汇replace('/敏感词/','替换词')

元字符(特殊字符)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1.边界符  
 ^                              //表示匹配行首的文本(以谁开始)头和结尾都写就是精确匹配  
 $                              //表示匹配行尾的文本(以谁结束) 
2.量词                           
用来设定某个模式出现次数
*                              //0或者更多词
+                              //重复一次或者是更多
?                              // 重复0或者一次
{n}                            //重复n次
{n,}                           // n次或更多次
{n,m}                          // n到m次
3.字符类
[匹配词]                       //只要包含匹配里面的任何一个就是true
[a-z]      (a到z 26个英文字母)
[a-zA-Z]   (a到z 26个英文字母大小写都可以)
[0-9]      (0到9数字都可以)
[^a-z]     取反除了a-z

预定义类

预定义类 说明
\d 匹配0-9之间任意一个数字，相当于[0-9]
\D 匹配除0-9之外任意字符，相当于[^0-9]
\w 匹配任意字母，数字和下划线，相当于[A-Za-z0-9_]
\W 匹配任意除字母，数字和下划线之外任意字符，相当于[^A-Za-z0-9_]
\s 匹配空格（换行符，制表符，空格符等），相当于[\t\r\n\v\f]
\S 匹配除空格之外任意字符，相当于[^\t\r\n\v\f]