目录
01 创建元素的方式
02 BOM概述
03 window
04定时器
05 location对象的使用
07 js特效
08 offset系列相关属性
09 scroll 相关属性
10 client 相关属性
11 window 相关的事件
12 event 相关的属性
01 创建元素的方式
创建元素的三种方式:
1.innerHTML创建元素
<div id="inner"></div>
<script>var inner=document.querySelector('#inner')inner.innerHTML='<a href="#">百度</a>'for(var i=0;i<100;i++){inner.innerHTML+='<a href="#">百度</a>'}
</script>2.使用数组来创建元素
<script>var arr=[];for(var i=0;i<100;i++){arr.push('<a href="#">百度</a>')}inner.innerHTML=arr.join('')
</script>3.document.createELement 创建元素
<div id="create"></div>
<script>var create=document.querySelector('#create')for(var i=0;i<100;i++){var a=document.createElement('a');create.append(a)}
</script>02 BOM概述
js三大核心 : js基础语法 DOM BOM
BOM(Brower Object Model)
js给我们内置了一些能够操作浏览器本身相关的一些对象
BOM包含DOM
DOM 最顶级的对象: document
BOM 最顶级的对象 : window
03 window
alert('123')
弹窗方法都是window调用的
所有使用window调用的属性和方法 都可以省略
window.open 打开新窗口的方法 (了解)
04定时器
定时器分为一次性定时器和永久定时器
1. 永久定时器:
var timer=setInterval(function(){
console.log('111')
})
2.一次性定时器:
var timer=setTimeout(function(){
console.log('111')
})
停止定时器:
停止永久定时器 : clearInterval(clearInterval方法的返回值)
停止一次性定时器 : clearTimeout(setTimeout方法的返回值)
05 location对象的使用
location对象是封装和地址相关的一些数据
console.log(location);
console.log("地址栏全信息:",location.href)
console.log("协议:",location.protocol);
console.log("主机:",location.hostname);
console.log("主机+端口:",location.host);
console.log("地址路径部分:",location.pathname);
console.log("地址的#号锚点部分:",location.hash);
console.log("地址的参数部分:",location.search);
location对象三个关于页面跳转的功能
location.href='地址'
location.assign('地址')
location.replace('地址')
注意:
href 和assing功能一模一样
跳转后把页面存为历史记录 跳转过去之后可以回退回来
replace跳转会把当前页面销毁 跳转到新页面去 无法回退
06 history对象的使用
history对象 专门操作历史记录相关的数据
history.go(number)
go(1) 前进一个记录
go(-1) 后退一个记录
go(0) 刷新 和 location.reload( ) 效果一样
07 js特效
js中dom节点和动画相关的一些属性放到一起抽离出来 做成js动画的效果 就是js特效
js特效相关的数据大致分为:
offset方向
scroll方向
client方向
08 offset系列相关属性
offset方向的五大属性:
1.offsetWidth offsetHeight 返回的结果是number类型
获取的是盒子自身的宽高+padding+border
其实获取的就是最终渲染的盒子的大小 不包含margin
2.offsetLeft offsetTop
获取当前盒子距离最近的有定位的父盒子左上角的距离
如果父盒子没有定位则距离body的距离
以上四个属性都是只读的 无法复制 只能获取 返回的是数字类型 所以比较好用
3. offsetParent
获取最近的有定位的父盒子
如果父盒子没有定位则返回body
09 scroll 相关属性
scroll相关属性:
1.scrollWidth scrollHeight
内容不超出盒子宽高的时候 返回的是盒子自身的高度+padding
如果内容超出了盒子的宽高 则返回的是内容的宽高
2.scrollLeft scrollTop
html对象调用 返回的是可滚动的浏览器页面被卷曲的头部和左侧的距离
以上两个属性不但能获取还能设置浏览器卷曲多少
特殊元素的获取方式:
html对象的获取: document.documentELement
body对象的获取: document.body
head对象的获取: document.head
title对象的获取: document.title
页面滚动事件:
window.οnscrοll=function(){ }
或者
window.addEventListener('scroll', function(){})
只要页面滚动1px 就会触发一次这个事件
10 client 相关属性
1.clientWidth/clientHeight
是html对象调用 获取浏览器可视区域宽度
可以根据浏览器的可视区域的宽高实现页面响应式布局
2.clientLeft/clientTop(获取盒子左边框和上边框的宽度 没用)
3.获取浏览器可视化区域大小的其他方式(推荐使用)
window.innerWidth / window.innerHeight
11 window 相关的事件
window.onscorll 页面滚动事件
window.onload 页面加载完毕事件
所有页面的dom节点加载完毕 页面所有的图片加载完毕 后才去执行的事件
window.onresize 页面大小改变事件
12 event 相关的属性
鼠标到body的距离(pageX/Y) e.pageX e.pageY
鼠标到屏幕的距离(screenX/Y) e.screenX e.screenY
鼠标到可视区域的距离(clientX/Y) e.clientX e.clientY
