在js 中函数中用var 可表示为局部变量,不用var 是全局;变量范围越小越好;在ES5.1没有常量语法,后来的有,
延时:window.setTimeout(函数名,时间ms) 只执行一次;更灵活,可以变化时间间隔,
计时器:window.setInterval((函数名,时间间隔ms)
都会返回一个计时器的id
arguments.callee
arguments:函数中的隐含对象,一个伪数组,表示的是函数的参数。
callee表示正在被调用的函数
arguments.callee拿到正在被调用的函数,匿名函数中拿自己 timeId也在一直变化,要不断更新。
window.clearInterval(timerId); 停止计时器。clearTimeout
var timeId = window.setTimeout(function(){
countDown-=1;
if (countDown == 0){
window.location.href = "https://www.baidu.com";}
else{
span.textContent = countDown;
window.setTimeout(arguments.callee,1000);
}
},1000)
window.location.href 拿到完整的url
window.history.back() / forward() / go() 浏览网页的历史记录
window.navigator 查看浏览器的一些信息
window.screen 查看屏幕信息
index = 0
index +=1;
index %=4;
在0-3循环。
var img = document.getElementsByTagName("img")[0];得到的是一个数组
通过document对象获取页面元素的常用方法有5个:
document.getElementById("……")
document.getElementsByTagName("....") 根据标签名得到列表
document.getElementsByClassName("....") 根据类名获取标签的列表
document.querySelector("....")通过样式表选择器获取单个元素
document.querySelectorAll(".....")通过样式表选择器获取元素的列表
绑定事件:okButton.addEventListener("click",函数名或匿名函数,)
第三个参数默认为false;表示事件冒泡,从内向外层传递
如果是true;表示捕获,从外向内层传递
一般用事件冒泡。
如果想阻止事件的传播行为可以调用事件对象的stopPropagation方法
给okButton绑定click事件的回调函数,
回调函数:回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。
当你知道事件发生时要做什么,但是不知道事件什么时候发生,这种情况的处理方式都是绑定一个事件的回调函数(callback)
可以写多个点击事件,不会被覆盖,用onclick会被覆盖
取消绑定的事件
okButton.removeEventListener("click",arguments.callee)
低版本(9以前)没addEventListener;用attachEvent();
事件回调中的第一个参数是事件对象(封装了和事件相关的信息)
three.addEventListener("click",function(evt){
window.alert("I am three");
evt.stopPropagation()
})
易错点
var div = document.querySelectorAll("#div1>button");
for(var i = 0;i<10;i++){
div[i].addEventListener("click",function(){
var texts = div[i].textContent;
window.alert("你选中了"+texts);
})
}
回调函数没有执行,当点击是i为10;所以取不到值;
window.alert("你选中了"+evt.target.textContent);用这个就行
var button = evt.target ||evt.srcElement 用于解决兼容性问题。
通过事件对象的target属性可以获取事件源(谁引发了事件)
有的浏览器要用srcElement属性获取事件源
可以通过短路运算来解决这兼容问题
当获取到一个元素后可以通过他的属性来获取他的父节点、子节点、
parentNode:父元素
firstChild/lastChild/children
previousSibling/nextSibling :前/后一个兄弟元素
网友评论