回顾
节点
节点：页面中的所有内容(标签、属性、文本(文字、空格、换行))
文档：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>