JS第四天 - 代码天地

JS第三天复习：

* 节点:

* 节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)

* 文档：document---页面中的顶级对象

* 元素:页面中所有的标签, 标签---元素--对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)

* 节点的属性:作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素

* 节点的类型:1标签节点,2属性节点,3文本节点

* nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点

* nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---#text

* nodeValue:标签---null,属性---属性的值,文本---文本内容

* if(node.nodeType==1&&node.nodeName=="P")

* 获取节点及元素的代码(下面呢)

* 元素的创建

* 三种元素创建的方式

* 1. document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉

* 2. 父级对象.innerHTML="标签代码及内容";

* 3. document.createElement("标签名字");得到的是一个对象,

* 父级元素.appendChild(子级元素对象);

* 父级元素.inerstBefore(新的子级对象,参照的子级对象);

* 移除子元素

* 父级元素.removeChild(要干掉的子级元素对象);

* 事件的绑定:为同一个元素绑定多个相同的事件

* 三种方式:

* 1. 对象.on事件名字=事件处理函数如果是多个相同事件注册用这种方式,最后一个执行,之前的被覆盖了

* my$("btn").onclick=function(){};

* 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);

* my$("btn").addEventListener("click",function(){},false);

* 3. 对象.attachEvent("有on的事件名字",事件处理函数);

* my$("btn").attachEvent("onclick",function(){});

//为任意的一个元素,绑定任意的一个事件

function addEventListener(element,type,fn) {

if(element.addEventListener){

element.addEventListener(type,fn,false);

}else if(element.attachEvent){

element.attachEvent("on"+type,fn);

}else{

element["on"+type]=fn;

}

// my$("btn")["on"+"click"]=function(){};

// var obj={

// name:"张三",

// sayHi:function () {

// }

// };

//获取当前节点的父级节点

console.log(my$("uu").parentNode);

//获取当前节点的父级元素

console.log(my$("uu").parentElement);

//获取当前节点的子级节点

console.log(my$("uu").childNodes);

//获取当前节点的子级元素

console.log(my$("uu").children);

//获取当前节点的第一个子级节点

console.log(my$("uu").firstChild);

//获取当前节点的第一个子级元素

console.log(my$("uu").firstElementChild);

//获取当前节点的最后一个子级节点

console.log(my$("uu").lastChild);

//获取当前节点的最后一个子级元素

console.log(my$("uu").lastElementChild);

//获取当前节点的前一个兄弟节点

console.log(my$("uu").previousSibling);

//获取当前节点的前一个兄弟元素

console.log(my$("uu").previousElementSibling);

//获取当前节点的后一个兄弟节点

console.log(my$("uu").nextSibling);

//获取当前节点的后一个兄弟元素

console.log(my$("uu").nextElementSibling);

// document.write("<p>这是一个p</p>")

// document.body.innerHTML="<p>这是一个p</p>";

</script>

</head>

<body>

// var pObj=document.createElement("p");

// 父级元素.appendChild(pObj);

</script>

* 事件

* 1. 绑定事件的区别

* 总结绑定事件的区别:

* 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

* 现在遇到的逆境,都是以后成长的阶梯

为元素解绑事件：

<body>

//1 对象.on事件名字=事件处理函数----绑定事件

// my$("btn").onclick=function () {

// console.log("我猥琐");

// };

// my$("btn2").onclick=function () {

// //1.解绑事件

// my$("btn").onclick=null;

// };

// 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);

// };

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);

};

//解绑事件:

* 注意:用什么方式绑定事件,就应该用对应的方式解绑事件

* 1.解绑事件

* 对象.on事件名字=事件处理函数--->绑定事件

* 对象.on事件名字=null;

* 2.解绑事件

* 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件

* 对象.removeEventListener("没有on的事件类型",函数名字,false);

* 3.解绑事件

* 对象.attachEvent("on事件类型",命名函数);---绑定事件

* 对象.detachEvent("on事件类型",函数名字);

* */

</script>

* 2. 移除绑定事件的方式及区别和兼容代码

<body>

<input type="button" value="按钮" id="btn1"/>

<input type="button" value="干掉第一个按钮的事件" id="btn2"/>

<script src="common.js"></script>

<script>

//绑定事件的兼容

function addEventListener(element,type,fn) {

if(element.addEventListener){

element.addEventListener(type,fn,false);

}else if(element.attachEvent){

element.attachEvent("on"+type,fn);

}else{

element["on"+type]=fn;

}

//解绑事件的兼容

//为任意的一个元素,解绑对应的事件

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;

}

function f1() {

console.log("第一个");

}

function f2() {

console.log("第二个");

}

addEventListener(my$("btn1"),"click",f1);

addEventListener(my$("btn1"),"click",f2);

my$("btn2").onclick=function () {

removeEventListener(my$("btn1"),"click",f1);

};

</script>

</body>

* 3. 事件的三个阶段

//事件有三个阶段:

* 1.事件捕获阶段 :从外向内

* 2.事件目标阶段 :最开始选择的那个

* 3.事件冒泡阶段 : 从里向外

*

* 为元素绑定事件

* addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的)

* 事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->

* window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持

* window.event就是一个对象,是IE中的标准

* e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持

* window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准

* 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替

* addEventListener中第三个参数是控制事件阶段的

* 事件的阶段有三个:

* 通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的

* 如果这个属性的值是:

* 1---->捕获阶段

* 2---->目标阶段

* 3---->冒泡

* 一般默认都是冒泡阶段,很少用捕获阶段

* 冒泡阶段:从里向外

* 捕获阶段:从外向内

* 4. 事件冒泡

<title>title</title>

<style>

#dv1{

width: 300px;

height: 200px;

background-color: red;

}

#dv2{

width: 250px;

height: 150px;

background-color: green;

}

#dv3{

width: 200px;

height: 100px;

background-color: blue;

}

</style>

<script>

//事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.

</script>

</head>

<body>

<div id="dv1">

<div id="dv2">

<div id="dv3"></div>

</div>

<script src="common.js"></script>

<script>

//事件冒泡,阻止事件冒泡,

//如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

// e.stopPropagation(); 谷歌和火狐支持,

my$("dv1").onclick=function () {

console.log(this.id);

};

my$("dv2").onclick=function () {

console.log(this.id);

//window.event.cancelBubble=true;

};

//事件处理参数对象

my$("dv3").onclick=function (e) {

console.log(this.id);

//阻止事件冒泡

//e.stopPropagation();

console.log(e);

};

// document.body.onclick=function () {

// console.log("颤抖吧,你们这些愚蠢的标签");

// };

</script>

</body>

* 5. 为同一个元素绑定多个不同的事件,指向的是同一个事件处理函数

<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;

}

// my$("btn").onmouseover=function (e) {

// console.log(e);

// };

</script>

* 6. 百度的大项目

* 7. BOM

* JavaScript分三个部分:

* 1. ECMAScript标准---基本语法

* 2. DOM--->Document Object Model 文档对象模型,操作页面元素的

* 3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的

* 浏览器中有个顶级对象:window----皇上

* 页面中顶级对象:document-----总管太监

* 页面中所有的内容都是属于浏览器的,页面中的内容也都是window的

*

* 变量是window的

var num=100;

// console.log(window.num);

// function f1() {

// console.log("小苏我也从了");

// }

// window.f1();

//因为页面中的所有内容都是window的,window是可以省略的.

//window.document.write("哈哈");

// var name="您好";

// console.log(window.name);

// console.log(top);

// console.log(window);

系统对话框：

//window.alert("您好啊");//以后不用,测试的时候使用

//window.prompt("请输入帐号");

// var result=window.confirm("您确定退出吗");

// console.log(result);

</script>

加载事件：

<title>title</title>

//页面加载的时候,按钮还没出现,页面没有加载完毕

//页面加载完毕了,再获取按钮

//只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件

// window.onload=function () {

// document.getElementById("btn").onclick=function () {

// alert("您好");

// };

//很重要

// onload=function () {

// document.getElementById("btn").onclick=function () {

// alert("您好");

// };

//扩展的事件---页面关闭后才触发的事件

// window.onunload=function () {

// };

//扩展事件---页面关闭之前触发的

// window.onbeforeunload=function () {

// alert("哈哈");

// };

</script>

Location对象：

//对象中的属性和方法

//location对象

//console.log(window.location);

// //地址栏上#及后面的内容

// console.log(window.location.hash);

// //主机名及端口号

// console.log(window.location.host);

// //主机名

// console.log(window.location.hostname);

// //文件的路径---相对路径

// console.log(window.location.pathname);

// //端口号

// console.log(window.location.port);

// //协议

// console.log(window.location.protocol);

// //搜索的内容

// console.log(window.location.search);

onload=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");//没有历史记录

};

</script>

</head>

<body>

</body>

History对象;

<body>

//跳转的

my$("btn1").onclick = function () {

window.location.href = "15test.html";

};

//前进

my$("btn2").onclick = function () {

window.history.forward();

};

</script>

</body>

Navigator对象：

通过userAgent可以判断用户浏览器的类型

console.log(window.navigator.userAgent);

//通过platform可以判断浏览器所在的系统平台类型.

//console.log(window.navigator.platform);

</script>

* 8. 定时器

<body>

//定时器

//参数1:函数

//参数2:时间---毫秒---1000毫秒--1秒

//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....

//返回值就是定时器的id值

var timeId = setInterval(function () {

alert("hello");//断言

}, 1000);

document.getElementById("btn").onclick = function () {

//点击按钮,停止定时器

//参数:要清理的定时的id的值

window.clearInterval(timeId);

};

</script>

</body>

案例：一起摇起来

<title>title</title>

<style>

img {

width: 200px;

height: 200px;

}

div {

position: absolute;

}

</style>

</head>

<body>

</div>

//点击按钮摇起来

var timeId="";

my$("btn1").onclick = function () {

timeId= setInterval(function () {

//随机数

var x = parseInt(Math.random() * 100 + 1);

var y = parseInt(Math.random() * 100 + 1);

//设置元素的left和top属性值

my$("dv").style.left = x + "px";

my$("dv").style.top = y + "px";

}, 10);

};

my$("btn2").onclick=function () {

clearInterval(timeId);

};

</script>

</body>

案例：一闪一闪亮晶晶

<title>title</title>

<style>

div{

width: 600px;

height: 600px;

border:2px solid yellow;

background-color: black;

position: relative;

}

span{

font-size: 30px;

color: yellow;

position: absolute;

}

</style>

</head>

<body>

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>