文章目录
一、类数组对象arguments
arguments不是数组,不能使用数组方法,只能使用length。在没有形参的情况下,可以使用arguments获取所有实参。只能在函数体中使用。
function fun(){
console.log(arguments);
}
fun(1,2,3,4,5,6);
二、闭包*(面试重点)
可以访问其他作用域的变量的函数,即函数嵌套函数。
1.引入库
2.读入数据
三、DOM
节点树:节点即为标签,节点数即为标签间的关系。
DOM:可理解为整个节点数的最为层根节点,是内置的document对象,是引用类型数据。
DOM属性
1.documentElement
获取节点树的Html标签
document.documentElement;//获取节点树的Html标签
document.head;
document.title;
document.body;
只有这四个。
DOM方法
1.getElementById
通过标签ID选择器,在JS中获取对应标签节点。
var element=document.getElementById("box");
2.querySelector
event事件对象
任意结点树上的节点都可以绑定多个事件。当用户触发事件的时候,系统会自动给事件处理函数传递实参(自动注入实参),这个参数即为事件对象。
var div=document.querySlector("div");
div.onclick= function(event){//其他也可以,一般写event
var e= event||window.event;//兼容IE8以下
console.log(e);
}
获取鼠标位置
当用户出发事件时,系统自动给事件21 去AS Q1 q全往ASQ处理函数注入实参(事件处理函数),他给我们提供很多信息,可获取鼠标位置。
1.screenX||screenY
事件对象属性,获取鼠标位置,零零点在电脑屏幕左上角。
2.pageX||pageY
事件对象属性,获取鼠标位置,零零点在网页主体部分左上角,不包含浏览器的导航、网页选择框等。
3.clientX||clinetY
事件对象属性,获取鼠标位置,零零点为可视区域的左上角。
4.offsetX||offsetY
事件对象属性,获取鼠标位置,获取数据类似pageX||pageY,但是会受子元素影响,即只获取鼠标所在的最小区域的坐标。
原生JS实现拖拽效果
三步骤:鼠标按下、鼠标移动、鼠标抬起
京东放大镜效果
四、BOM
【browser object model】提供一些获取浏览器信息的属性和方法,即浏览器内置的window对象。
BOM方法可省略window
如:
window.location.href//获取地址栏信息
window.screen.width//获取电脑屏幕信息
window.screen.height;
window.navigator.userAgent;//获取浏览器信息
定时器setInterval方法
定时器:每隔一段时间执行一次回调函数。
语法格式:
setInterval(callback,time);
setInterval(function(){
console.log("我是定时器")
},1000);
第一个参数必有【回调函数,当一个函数执行的时候,传递实参是另一个函数的声明部分】
第二个参数,时间,单位毫秒,1s=1000ms。
异步语句
若一个语句非常耗时间【称之为异步语句】。
特点:先执行异步语句后面的代码,回首再执行异步语句。
//清除定时器方法
clearInterval(n);//n表示第几个定时器
运动套路
定时器+改变定位元素left、top。