[TOC]
事件的传播
事件的传播 关于事件的传播网景公司和微软公司有不同的理解
- 微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件
然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行
网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,
应该先触发当前元素的最外层的祖先元素的事件<br />W3C综合了两个公司的方案,将事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
2.目标阶段
事件捕到目标元素,捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件,可以将 addEventlistener()的第三个参数设置为true<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #box1{ width:300px; height:300px; } #box2{ width:200px; height:200px; } #box3{ width:100px; height:100px; } </style> <script type="text/javascript"> window.onload = function(){ var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); var ul = document.getElementById("ul"); function bind(obj,eventStr,callback){ if(obj.addEventListener){ obj.addEventListener(eventStr,callback,false); }else{ obj.attachEvent("on"+eventStr,function(){callback.call(obj)});//匿名函数中调用回调函数来this为 }; }; bind(box1,"click",function(){alert(1);}); bind(box2,"click",function(){alert(2);}); bind(box3,"click",function(){alert(3);}); }; </script> <title>测试</title> </head> <body> <div id = "box1"> <div id = "box2"> <div id = "box3"> </div> </div> </div> </body> </html>拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #box1{ width:300px; height:300px; position:absolute; } #box2{ width:300px; height:300px; position:absolute; left:200px; top:200px; } </style> <script type="text/javascript"> window.onload = function(){ var box1 = document.getElementById("box1"); box1.onmousedown = function(event){ var ol = event.clientX - box1.offsetLedt-ol; //相对位置 var ot = event.clientY - box1.offsetTop-ot; document.onmousemove = function(event){ var x = event.clientX; var y = event.clientY; box1.style.left = left+"px"; box1.style.top = top+"px"; }; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; //当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,此时会导致拖功能的异常,这个是浏览器提默认行为 return false; //如果不希望发生这个行为,则可以通过 return false来取消默认行为 }; //IE8 不想管了 //最后可以封装成函数 绑定ID就可以调用 </script> <title>测试</title> </head> <body> <div id = "box1"></div> <div id = "box2"></div> </body> </html>滚轮事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #box1{ width:300px; height:300px; } </style> <script type="text/javascript"> window.onload = function(){ var box1 = document.getElementById("box1"); box1.onmousewheel = function(event){ //为box绑定滚轮事件 event = event || window.event; alert(event.wheelDelta);//向上120 向下-120 向上向下只看正负 //火狐中event.detail if(event.wheelDelta>0|| event.detail<0){ box1.style.height = box1.clientHeight - 10 +"px"; }else{ box1.style.height = box1.clientHeight + 10 +"px"; } }; return false; //使用 addEventlistener()方法绑定响应函数,取消默认行为时不能使用 return false IE8 不支持 //在火狐中 DOMMouseScrool 来绑定滚动事件 //bind(box1,"DOMMouseScroo",function(){}); bind(box1,"DOMMouseScroo",box1.onmousewheel)//回调 都兼容了 event.preventDefault && event.preventDefault(); </script> <title>测试</title> </head> <body style = "height:2000px;"> <div id = "box1"></div> </body> </html>键盘事件
键盘事件
onkeydown 按键被按下
对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发
当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常的快
这种设计是为了防止误操作的发生
- onkeyup
按键被松开
```html
<!DOCTYPE html>
<a name="JRrIS"></a> ### 键盘移动div ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript"> //键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document window.onload = function(){ var box1 = document.getElementById("box1"); document.onkeydown = function(event){ event = event || window.event; switch(event.keyCode){ case 37: box1.style.left = box1.offsetLeft - 10 +"px"; break; case 39: box1.style.left = box1.offsetLeft + 10 +"px"; break; case 38: box1.style.top = box1.offsetLeft - 10 +"px"; break; case 40: box1.style.top = box1.offsetLeft + 10 +"px"; break; } var input = document.getElementsByTagName("input")[0]; input.onkeydown = function(event){ //在文本框中辑入内容,属于 onkeydown的默认行为 //如果在 onkeydown中取消了默认行为,则输入的内容,不会出现在文本框中 return false event = event || window.event; //数字48-57 if(event.keyCode >=48 && event.keyCode <=57){ return false; } }; }; //可以添加定时器来使起步不卡 </script> <title>测试</title> </head> <body> <div id = "box1"></div> </body> </html>Navigator
BOM 浏览器对象模型:
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象,用来完成对浏览器的操作
BOM对象
Window：代表的是整个浏览器的窗口,同时 window也是网页中的全局对象
Navigator：代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
Location：代表当前浏览器的地址栏信息，可以跳转页面
History：代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录，只能向前向后翻页
Screen：代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为 window对象的属性保存的<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript"> console.log(navigator.appName); console.log(navigator.userAgent);//一般我们只会使用 userAgent来判断浏览器的信息 //userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的 userAgent var ua = navigator.userAgent; if(/firefox/i.test(ua)){ alert("firefox"); } if("ActiveXObject" in window){ alert("IE"); }else{ alert("not IE"); } </script> <title>测试</title> </head> <body> </body> </html>History
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript"> console.log(history.length); //可以荻取到当成访问的链接数量 window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ history.back(); //history.forward(); //history.gp(1); }; }; </script> <title>测试</title> </head> <body> <h1>Test</h1> <a href = "test.html">去History</a> <button id= "btn"></button> </body> </html>Location
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript"> console.log(history.length); //可以荻取到当成访问的链接数量 window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ alert(location); location = "www.baidu.com";//会生成相应记录 //location.assign("www.baidu.com"); location.reload();//刷新 location.reload(true);//强制清空缓存 }; }; </script> <title>测试</title> </head> <body> <h1>Test</h1> <a href = "test.html">去History</a> <button id= "btn"></button> </body> </html>定时器
setInterval() 定时调用
可以将一个函数,每隔一段时间执行一次
参数:
1.回调函数,该函数会每隔一段时间被调用一次
2.每次调用间隔的时间,单位是毫秒
返回Number 这个数字用来作为定时器的唯一标识<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript"> window.onload = function(){ var count = document.getElementById("count"); var Num = 1; var timer = setInterval(function(){ count.innerHTML = Num++; if(Num ==11){ clearInterval(timer); } },1000); }; </script> <title>测试</title> </head> <body> <h1 id="count">Test</h1> </body> </html>切换图片练习
clearInterval()可以接收任意参数,
如果参数是一个有效的定时器的标识,则停止对应的定时器
如果参数不是一个有效的标识,则什么也不做<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript"> window.onload = function(){ var img1 = document.getElementById("img1"); var imgArr = ["img/1.jpg","img/1.jpg","img/1.jpg"]; var index = 0; var timer; var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); btn1.onclick = function(){ //点一次开一个定时器 clearInterval(timer);//关掉上一个 timer = setInterval(function(){ index ++ if(index >= imgArr.length){ index = 0; } // index = index % imgArr.length; img1.src = imgArr[index]; },1000); }; btn2.onclick = function(){ clearInterval(timer); }; }; </script> <title>测试</title> </head> <body> ... </body> </html>延时调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript"> window.onload = function(){ var Num = 1; setTimeout(function(){ var timer = console.log(Num++); },3000);//3秒后在执行 ，只执行一次 }; cleatTimeout(timer); </script> <title>测试</title> </head> <body> <h1 id="count">Test</h1> </body> </html>定时器的应用
parseInt取出字符串中的合法数字
注意不要重复创建定时器，及时删除
创建函数的话 ，定时器用timer保存，那么只会存在一个
将timer放在对象上形成专属的，obj.timer...单独放在js中<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript"src = "js/tools.js"></script> <title>测试</title> </head> <body> ... </body> </html>完成轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width: 520px; height: 333px; margin: 50px auto; background-color: greenyellow; padding: 10px 0; position: relative; overflow: hidden; } #imgList{ list-style: none; /*width: 2600px;*/ position: absolute; left: 0px; } #imgList li{ float: left; margin: 0 10px; } #navDiv{ position: absolute; bottom: 15px; /*left: 50%; transform: translateX(-50%);*/ } #navDiv a{ float: left; width: 15px; height: 15px; background-color: red; margin: 0 5px; opacity: 0.5; } #navDiv a:hover{ background-color: black; opacity: 0.5; } </style> <script type="text/javascript"> window.onload = function (){ var imgList = document.getElementById("imgList"); var imgArr = document.getElementsByTagName("img"); imgList.style.width = 520 * imgArr.length+"px"; //设置导航居中 var navDiv = document.getElementById("navDiv"); var outer = document.getElementById("outer"); navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2+"px"; var index = 0; var allA = document.getElementsByTagName("a"); allA[index].style.backgroundColor = "black"; //点击超链接 for (var i=0; i<allA.length;i++){ //为每个绑定单击相应事件 allA[i].num = i; allA[i].onclick = function (){ clearInterval(timer); index = this.num; // imgList.style.left = -520*index+"px"; setA(); move(imgList,"left",-520*index,20,function (){ //回调函数 //动画执行完毕，再次开启切换 autoChange(); });//前面章节写的定时器的应用 }; } autoChange(); var timer; //自动切换图片 function autoChange(){ timer = setInterval(function (){ index++; index = index % imgArr.length; move(imgList,"left",-520*index,20,function (){ //修改导航点 setA(); }); },3000); } //创建方法用来设置选中的a function setA(){ //判断是否为最后一张图片 if(index >= imgArr.length-1){ index = 0; imgList.style.left = 0; //通过CSS将最后一张切换成第一张 } for (var i =0;i<allA.length;i++){ allA[i].style.backgroundColor = "";//默认样式 内联级别更高 } allA[index].style.backgroundColor = "black";//选中为黑 } }; </script> <title>Title</title> </head> <body> <div id="outer"> <ul id="imgList"> <li> <img src="img/1.jpg" /> </li> <li> <img src="img/2.jpg" /> </li> <li> <img src="img/3.jpg" /> </li> <li> <img src="img/4.jpg" /> </li> <li> <img src="img/5.jpg" /> </li> <li> <img src="img/1.jpg" /> </li> </ul> <div id="navDiv"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </body> </html>类的操作
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style type="text/css"> .b1{ width: 100px; height: 100px; background-color: red; } .b2{ width: 100px; height: 100px; background-color: yellow; } </style> <script type="text/javascript"> window.onload = function (){ var box = document.getElementById("box"); var btn01 = document.getElementById("btn01"); btn01.onclick = function (){ //通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新涫染一次页面 // box.style.width = "200px"; // box.style.height = "200px"; box.className += " b2"; //这样一来,我们只需要修改一次,即可同时修改多个样式 }; function addClass(obj,className){ if(!hasClass(obj,className)){ obj.className += " "+className;} } function hasClass(obj,className){ // var reg = /\b\b/; //单词边界 var reg = new RegExp("\\b"+className+"\\b"); // 构造函数要\\ return reg.test(obj.className); } function removeClass(obj,className){ var reg = new RegExp("\\b"+className+"\\b"); obj.className = obj.className.replace(reg,""); //替换原理 } function toggleClass(obj,className){ //切换 if(hasClass(obj,className)){ removeClass(obj,className); }else { addClass(obj,className); } } }; </script> <title>Document</title> </head> <body> <button id="btn01">点击以后修改样式</button> <div id="box" class="b1" ></div> </body> </html>二级菜单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script> window.onload = function (){ // 我们的每一个菜单都是一个div // 当div具有collapsed这个类时,diV就是折叠的状态 // 当diV没有这个类是,div就是属开的状态 var menuSpan = document.querySelectorAll(".menuSpan"); //获取类 var openDiv = menuSpan[0],parentNode; //定义一个变量,来保存当前打开的菜单 for(var i =0;i<menuSpan.length;i++){ menuSpan[i].onclick = function (){ var parentDiv = this.parentNode; toggleMenu(parentDiv); if(openDiv != parentDiv && !hasClass(openDiv,"collapsed")){ // toggleClass(openDiv,"collapsed") //确保别才删就又加上 不用adc等下好写动画 toggleMenu(openDiv); } openDiv = parentDiv; //确保最新的 }; } //用来切换菜单折叠和显示状态 function toggleMenu(obj){ var begin = obj.offsetHeight; toggleClass(obj,"collapsed"); //切换 var end = obj.offsetHeight; obj.style.height = begin +"px"; //从开始到结束进行动画，免得直接回去了 move(obj,"height",end,10,function (){ obj.style.height = ""; }); } }; </script> <title>Document</title> </head> <body> ... </body> </html>JSON
JSON
JS中的对象只有JS自己认识,其他的语言都不认识
JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别
并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
分类：
对象：{}
数组：[]
JSON中允许的值
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript"> var obj = '{"name":"tom"}'; //对象 var arr = '[1,2,3]'; //数组 var obj = JSON.parse(obj); var obj = {"name":"tom"}; var obj = JSON.stringify(obj); </script> <title>Document</title> </head> <body> </body> </html>完结散花！
若有收获，就点个赞吧
0 人点赞
