回顾
节点
节点:页面中的所有内容(标签、属性、文本(文字、空格、换行))
文档:document----页面中的顶级对象
元素:页面中的所有标签 标签--元素--对象
节点的类型:1标签节点、2属性节点、3文本节点
节点的属性:(为了将来获得很多节点,得到节点中的标签,识别节点中的标签元素)
nodeType:节点类型 标签节点--1、属性节点--2、文本节点--3
nodeName:标签节点--大写的标签名、元素节点--小写的属性名、文本节点--#text
nodeValue:标签--null,属性--属性的值,文本--文本内容
if(node.nodeType==1&&node.nodeName=="p")
获取节点及元素的代码
console.log(ulObj.parentNode); //父节点
console.log(ulObj.parentElement); //父元素
console.log(ulObj.childNodes); //子节点
console.log(ulObj.children); //子元素
//以上四行,所有浏览器都支持,以下IE8中所有节点为元素,所有元素不支持
console.log(ulObj.firstChild); //第一个子节点
console.log(ulObj.firstElementChild); //第一个子元素
console.log(ulObj.lastChild); //最后一个子节点
console.log(ulObj.lastElementChild); //最后一个子元素
console.log(threeObj.previousSibling); //某个元素的前一个兄弟节点
console.log(threeObj.previousElementSibling); //某个元素的前一个兄弟元素
console.log(threeObj.nextSibling); //某一个元素的下一个兄弟节点
console.log(threeObj.nextElementSibling); //某一个元素的下一个兄弟元素
-------------------------------------------------------------------------------
元素创建及移除
元素创建的三种方式
1.document.write("标签代码及内容");
如果在页面加载完毕后创建元素,页面中所有原有元素会被清除
2.父级对象.innerHTNML = ”标签代码及内容“
3. obj = document.createElement("标签名"); //得到的是一个对象,只是创建
obj.innerText = "元素内容"; //配合使用
父级元素.appendChild(子级元素对象);
父级元素.insertBefore(新的子级对象,参照的子级对象);
元素移除
父级元素.removeChild(要移除的子级元素对象);
------------------------------------------------------------------------
绑定多个事件
事件的绑定:为同一个元素绑定多个相同的元素
三种方式:
1.对象.on事件名 = 事件处理函数 //如果是多个相同事件注册用该方式,只有最后一个生效,之前的被覆盖,不可一次性绑定多个相同类型事件
document.getElementById("btn").onclick = function(){};
2.对象.addEventListener(”没有on的事件名“,事件处理函数,false); //谷歌、火狐支持,IE8不支持
document.getElementById("btn").addEventListener("click",function(){},false);
3.对象.attachEvent("有on的事件名",事件处理函数) //谷歌、火狐不支持,IE8支持
document.getElementById("btn").attachEvent("onclick",function(){});
为任意元素,绑定任意的事件----兼容代码
参数:元素、事件类型、事件处理函数
function addEventListener(element,type,func){
if(element.addEventListener){
element.addEventListener(type,func,false)
}else if(element.attachEvent){
element.attachEvent("on"+type,func);
}else{
element["on"+type] = func;
}
}
事件
* 总结绑定事件的区别:
* addEventListener();
* attachEvent()
* 相同点: 都可以为元素绑定事件
* 不同点:
* 1.方法名不一样
* 2.参数个数不一样addEventListener三个参数,attachEvent两个参数
* 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
* attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
* 4.this不同,addEventListener 中的this是当前绑定事件的对象
* attachEvent中的this是window
* 5.addEventListener中事件的类型(事件的名字)没有on
* attachEvent中的事件的类型(事件的名字)有on
----------------------------------------------------------------------------------------
现在遇到的逆境,都是以后成长的阶梯
事件解绑的三种方式
1. 用什么方式绑定事件就用什么方式解绑事件
对象.on事件名字 = 事件处理函数----绑定事件
对象.on事件名字 = null ----解绑事件
my$("btn").onclick=function () {
console.log("我猥琐");
};
my$("btn2").onclick=function () {
my$("btn").onclick=null; //事件清除
};
---------------------------------------------------------------------------
2.addEventListener()
对象.addEventListener("事件类型名",事件处理函数(命名函数),false) ----绑定事件
解绑事件的时候,需要在绑定事件的时候,使用命名函数
对象.removeEventLister("事件类型名",事件处理函数(命名函数),false) ----解绑事件
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
my$("btn").addEventListener("click",f1,false);
my$("btn").addEventListener("click",f2,false);
//点击第二个按钮把第一个按钮的第一个点击事件解绑
my$("btn2").onclick=function () {
//解绑事件的时候,需要在绑定事件的时候,使用命名函数
my$("btn").removeEventListener("click",f1,false);
};
----------------------------------------------------------------------------------
3.attachEvent
对象.attachEvent("事件类型名",事件处理函数(命名函数)) ----绑定事件
解绑事件的时候,需要在绑定事件的时候,使用命名函数
对象.detachEvent("事件类型名",事件处理函数(命名函数)) ----解绑事件
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
my$("btn").attachEvent("onclick",f1);
my$("btn").attachEvent("onclick",f2);
my$("btn2").onclick=function () {
my$("btn").detachEvent("onclick",f1);
};
解绑事件的兼容
//为任意的一个元素,解绑对应的事件
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}
事件冒泡(多个元素嵌套,有层次关系,都注册了相同的事件)
如果内层元素注册的事件被触发,则外层元素的相同事件自动触发;从里向外触发;
阻止事件冒泡
1. e.stopPropagation();
//该绑定事件默认传入一个参数(谷歌、火狐,IE8没有)--事件处理参数对象--需要时可传入
my$("dv3").onclick=function (e) {
console.log(this.id);
//阻止事件冒泡
e.stopPropagation(); //谷歌、火狐支持,IE不支持
console.log(e);
};
----------------------------------------------------------------
2. window.event.cancelBubble=true;
my$("dv3").onclick=function () {
console.log(this.id);
//阻止事件冒泡
window.event.cancelBubble=true; //IE、谷歌支持,火狐不支持
};
事件三阶段
addEventListener中第三个参数是控制事件阶段的
addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的)
1-----事件捕获阶段:从外向里 -----true
2-----事件目标阶段
3-----事件冒泡阶段:从里向外 -----false
反映事件阶段的属性(存在于事件参数对象中)
e.eventPhase 值为1(捕获),2(目标),3(冒泡)
<script>
//同时注册点击事件
var objs = [my$("dv3"), my$("dv2"), my$("dv1")];
//遍历注册事件
objs.forEach(function (ele) {
//为每个元素绑定事件
ele.addEventListener("click", function (e) { //"e"为事件参数对象
console.log(this.id+"====>"+e.eventPhase);
}, true); //true/false 控制是捕获/冒泡阶段---捕获与冒泡不会同时出现
});
//该属性在事件参数对象中存在
</script>
案例-为同一个元素绑定多个不同的事件,指向相同的事件处理函数
my$("btn").onclick = f1;
my$("btn").onmouseover = f1;
my$("btn").onmouseout = f1;
function f1(e) {
switch (e.type) {
case "click":
alert("好帅哦");
break;
case "mouseover":
this.style.backgroundColor = "red";
break;
case "mouseout":
this.style.backgroundColor = "green";
break;
}
}
BOM
JS分三个部分:
1.ECMAScript标准----将基本语法
2.DOM-----Document Object Model 文档对象模型,用于操作页面元素
3.BOM-----Browser Object Model 浏览器对象模型,用于操作浏览器
页面的顶级对象--------------->document
浏览器的顶级对象------------>window/top
页面中的所有内容都属于浏览器,页面中的内容也都是window的
因为页面中的所有内容都是window的,window是可以省略的
var num = 10;
console.log(window.num) --- console.log(num)
---------------------------------------------------
function f1(){ console.log(num) };
window.f1(); --- f1();
----------------------------------------------------
window.alert("哈哈哈") //一般不用,或测试的时候用---页面无法加载
window.prompt("HHH") //一般不用,各浏览器中显示不一样,体验不好
window.confirm("AAA") //一般不用,各浏览器中显示不一样,体验不好
........
页面加载的事件 !!!!
window.onload = function(){}; //只要页面加载完毕,该事件就触发--页面中的所有内容
window.onunload = function(){}; //页面关闭后才触发的事件------IE
window.onbeforeunload = function(){}; //页面关闭之前触发的------IE
location对象-----浏览器地址栏
属性:
1.hash //地址栏上 #及后面的内容
2.host //主机名及端口号
3.hostname //主机名
4.pathanme //当前页面的文件相对路径
5.port //端口号
6.protocol //协议
7.search //搜索内容
方法:
1. .assign(url); //打开url地址页面
2. .reload(); //刷新当前页面
3. .replace(url); //没有历史纪录的打开url地址页面
function () {
document.getElementById("btn").onclick=function () {
//设置跳转的页面的地址
//location.href="http://www.jd.com"; //属性----->必须记住
//location.assign("http://www.jd.com"); //方法
//location.reload(); //重新加载--刷新
//location.replace("http://www.jd.com");//没有历史记录-->直接替换当前页面,没有后退
};
};
history对象
可以实现控制页面的前进与后退
方法:
//需要有历史纪录
forward(); //前进
back(); //后退
go(); //参数为正---前进,参数为负---后退
window.history.back();
navigator对象
属性:
1.userAgent //用于判断浏览器类型
console.log(window.navigator.userAgent); //每个浏览器得到的字符串不一样
2.platform //用于判断浏览器所在平台类型
移动端(android、ios、塞班)/PC端(windows系列、linux、mac)
console.log(window.navigator.platform);
定时器
BOM中有两个定时器----计时器
参数1:函数
参数2:时间---毫秒---1000毫秒=1秒
执行过程:页面加载完成后,每经过一次参数时间;
执行一次参数函数,返回值是定时器的id
var timeId = (window.)setInterval(function(){console.log("hahaha")},1000);
停止定时器
(window.)clearInterval(定时器的id)
案例
1."一起摇起来!"
<body>
<input type="button" id="btn1" value="摇起来"/>
<input type="button" id="btn2" value="停止"/>
<div id="dv" style="position: absolute;">
<img src="./images/boduo.jpg" alt=""/>
<img src="./images/heihei.jpg" alt=""/>
</div>
<img src="">
<script>
var timeId = "";
document.getElementById("btn1").onclick = function () {
timeId = setInterval(function () {
var dvObj = document.getElementById("dv");
var x = parseInt(Math.random()*100+1);
var y = parseInt(Math.random()*100+1);
dvObj.style.left = x+"px";
dvObj.style.top = y+"px";
},50);
};
document.getElementById("btn2").onclick = function () {
clearInterval(timeId);
};
</script>
</body>
2.亮晶晶
<style>
div{
width: 600px;
height: 600px;
border:2px solid yellow;
background-color: black;
position: relative;
}
span{
font-size: 30px;
color: yellow;
position: absolute;
}
</style>
--------------------------------------------------
<body>
<input type="button" value="亮起来" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick=function () {
setInterval(function () {
my$("dv").innerHTML="<span>★</span>";
var x = parseInt(Math.random() * 600 + 1);
var y = parseInt(Math.random() * 600 + 1);
my$("dv").firstElementChild.style.left=x+"px";
my$("dv").firstElementChild.style.top=y+"px";
},5);
};
</script>
</body>
3.美女时钟
<body>
<img src="" alt="" id="im" />
<script src="common.js"></script>
<script>
function f1() {
//获取当前时间
var dt = new Date();
//获取小时
var hour = dt.getHours();
//获取秒
var second = dt.getSeconds();
hour = hour < 10 ? "0" + hour : hour;
second = second < 10 ? "0" + second : second;
my$("im").src="meimei/"+hour+"_"+second+".jpg";
}
f1();
//页面加载完毕后,过了1秒才执行函数的代码
setInterval(f1,1000);
</script>
</body>