day03_js学习笔记_03_js的事件、js的BOM、js的DOM
============================================================================= ============================================================================= 涉及到的知识点有： 五、js的事件 1、js的常用事件 onclick 点击事件 onchange 用户改变域的内容事件 onfoucus 获得焦点事件 onmouseover 鼠标悬浮事件 onmouseout 鼠标离开事件 onblur 失去焦点事件 onload 加载完毕的事件 2、事件的绑定方式（也可以叫事件的注册） (1) 将事件和响应行为都内嵌到html标签中。（学习演示时用的多） (2) 将事件内嵌到html中，而响应行为用函数进行封装。（开发中用的多） (3) 将事件和响应行为，与html标签完全分离。（开发中用的多） 3、阻止事件的默认行为 4、阻止事件的传播（相当于阻止事件冒泡） 六、js的BOM (1) Window对象（窗口对象） 弹框的方法 open方法（打开网页的方法） 定时器方法 (2) Location对象（跳转位置对象） (3) History对象（历史对象） 七、js的DOM 1、理解文档对象模型 2、dom方法和属性 (1) 通过元素的id属性获得元素节点对象 (2) 通过元素的name属性获得元素节点对象的集合 (3) 通过标签名称获得元素节点对象的集合 (4) 查看元素节点是否含有子节点 (5) 获得节点名称类型和值 Node节点对象练习1： Node节点对象练习2： (6) 通过父节点替换子节点 (7) 获取属性节点的值 (8) 设置属性值（同上） (9) 创建节点（同上） (10) 将元素插入到元素前面 (11) 将新节点插入到某节点的后面（同上） (12) 删除节点 (13) innerHTML属性 ============================================================================= ============================================================================= day03_js学习笔记_03_js的事件、js的BOM、js的DOM ----------------------------------------------------------------------------- 一、js的简介 二、js的基本语法 三、js的内建对象 四、js的函数（相当于java中的方法） ----------------------------------------------------------------------------- 五、js的事件 事件通常与函数配合使用，这样我们可以通过发生的事件来驱动函数执行。 事件(动作/行为) 事件源(动作/行为的承受者) 响应行为 -------------------------------------- 1、js的常用事件 onclick 点击事件 onchange 用户改变域的内容事件 需求：实现二级联动 <select id="city"> <option value="bj">北京</option> <option value="tj">天津</option> <option value="sh">上海</option> </select> <select id="area"> <option>海淀</option> <option>朝阳</option> <option>东城</option> </select> <script type="text/javascript"> var select = document.getElementById("city"); select.onchange = function() { var optionVal = select.value; switch (optionVal) { case 'bj': var area = document.getElementById("area"); area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>"; break; case 'tj': var area = document.getElementById("area"); area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>"; break; case 'sh': var area = document.getElementById("area"); area.innerHTML = "<option>浦东</option><option>杨浦</option>"; break; default: alert("error"); } }; -------------------------------------- onfoucus 获得焦点事件 onblur 失去焦点事件 需求：当输入框获得焦点的时候，提示输入的内容格式。 当输入框失去焦点的时候，提示输入有误。 <!-- 使用 label "for" 属性绑定到 input "id"属性上 --> <label for="txt">name</label> <input id="txt" type="text" /><span id="action"></span> <script type="text/javascript"> var txt = document.getElementById("txt"); txt.onfocus = function() { // 获得焦点后：友好提示 var span = document.getElementById("action"); span.innerHTML = "用户名格式最小8位"; span.style.color = "green"; }; txt.onblur = function() { // 失去焦点后：错误提示 var span = document.getElementById("action"); span.innerHTML = "对不起 格式不正确"; span.style.color = "red"; }; </script> -------------------------------------- onmouseover 鼠标悬浮事件 onmouseout 鼠标离开事件 需求：div元素 鼠标移入变为绿色 移出恢复原色 <head> <style type="text/css"> #d1 { background-color: red; width: 200px; height: 200px; } </style> </head> <body> <div id="d1"></div> </body> <script type="text/javascript"> var div = document.getElementById("d1"); div.onmouseover = function() { this.style.backgroundColor = "green"; }; div.onmouseout = function() { this.style.backgroundColor = "red"; }; </script> -------------------------------------- onload 加载完毕的事件 等到页面加载完毕后再执行onload事件所指向的函数。 <head> <script type="text/javascript"> window.onload = function() { var span = document.getElementById("span"); // alert(span); // [object HTMLSpanElemennt] span.innerHTML = "hello js"; }; </script> </head> <body> <span id="span"></span> </body> ----------------------------------------------------------------------------- 2、事件的绑定方式（也可以叫事件的注册） (1) 将事件和响应行为都内嵌到html标签中。（学习演示时用的多） <input type="button" value="button" onclick="alert('xxx')" /> (2) 将事件内嵌到html中，而响应行为用函数进行封装。（开发中用的多） <input type="button" value="button" onclick="fn()" /> <script type="text/javascript"> function fn() { // 有名函数 alert("yyy"); } </script> (3) 将事件和响应行为，与html标签完全分离。（开发中用的多） <input id="btn" type="button" value="button" /> <script type="text/javascript"> var btn = document.getElementById("btn"); // 先找到这个节点对象 btn.onclick = function() { // 匿名函数 alert("zzz"); }; </script> 注意： this关键字 this经过事件的函数进行传递的是html标签对象，通过该对象可以获取html标签任意的属性。 <input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)" /> <script type="text/javascript"> function fn(obj) { alert(obj.name); } </script> ----------------------------------------------------------------------------- 3、阻止事件的默认行为 法一： W3c标准：传递过来的事件对象.preventDefault(); IE标准：使用window.event.returnValue = false; <body> <a href="demo11.html" onclick="fn(event)">点击我吧</a> </body> <script type="text/javascript"> function fn(e) { // W3c标准 if (e && e.preventDefault) { alert("W3c"); e.preventDefault(); // IE标准 } else { alert("IE"); window.event.returnValue = false; } } </script> 法二： 通过事件返回false也可以阻止事件的默认行为 <a href="demo11.html" onclick="return false">点击我吧</a> 法三： <a href="javascript:void(0)">点击我吧</a> ----------------------------------------------------------------------------- 4、阻止事件的传播（相当于阻止事件冒泡） W3c标准: 传递过来的事件对象.stopPropagation(); IE标准： window.event.cancelBubble = true; <body> <div onclick="fn1()" style="width: 100px; height: 100px; background-color: green; padding: 50px;"> <div onclick="fn2(event)" style="width: 100px; height: 100px; background-color: red;"> xxxx </div> </div> </body> <script type="text/javascript"> function fn1() { alert("fn1"); } function fn2(e) { alert("fn2"); // W3c标准: 传递过来的事件对象.stopPropagation(); // IE标准： window.event.cancelBubble = true; // W3c标准 if (e && e.stopPropagation) { alert("W3c"); e.stopPropagation(); // IE标准 } else { alert("IE"); window.event.cancelBubble = true; } } </script> ----------------------------------------------------------------------------- 六、js的BOM (1) Window对象（窗口对象） window.alert(); 弹框的方法： 提示框： alert("提示信息"); 没有返回值。 var res = alert("xxx"); alert(res); 确认框： confirm("确认信息"); 有返回值：如果点击确认，返回true。如果点击取消，返回false。 var res = confirm("您确认要删除吗？"); alert(res); 输入框： prompt("提示信息"); 有返回值：如果点击确认，返回输入框的文本。如果点击取消，返回null。 var res = prompt("请输入密码"); alert(res); -------------------------------------- open方法（打开网页的方法）： window.open("url地址"); window.open("../js的内建对象/demo04.html"); -------------------------------------- 定时器方法： 1、setTimeout(函数, 毫秒值); // 在过多少毫秒值后去执行某函数，只执行一次 setTimeout( function() { alert("xxx"); }, 3000 ); 2、clearTimeout(定时器的名称); // 清除定时器 <head> <script type="text/javascript"> var timer; var fn = function() { alert("x"); timer = setTimeout(fn, 2000); // 要想实现多次执行，需要用到递归，但是不好，有安全风险(递归可能会导致内存泄漏) }; var closer = function() { clearTimeout(timer); }; fn(); </script> </head> <body> <input type="button" value="button" onclick="closer()"> </body> 3、setInterval(函数, 毫秒值); // 在间隔多少毫秒值后去执行某函数，一直执行(多次执行) clearInterval(定时器的名称); // 清除定时器 （js开发中常用以上这两个函数） <head> <script type="text/javascript"> var timer = setInterval( function() { alert("hello"); }, 2000 ); var closer = function() { clearInterval(timer); }; </script> </head> <body> <input type="button" value="button" onclick="closer()"> </body> 需求： 注册5秒钟后跳转首页。 <head> <script type="text/javascript"> var time = 5; var timer; timer = setInterval( function() { var second = document.getElementById("second"); // 先得到span对象 if (time >= 1) { second.innerHTML = time; time--; } else { clearInterval(timer); location.href = "../js的内建对象/demo01.html"; } }, 1000 ); </script> </head> <body> 恭喜您注册成功！ <span id="second" style="color: red;">5</span>秒后跳转到首页，如果不跳转请 <a href="../js的内建对象/demo01.html">点击这里</a> </body> -------------------------------------- (2) Location对象（跳转位置对象） location.href = "url地址"; -------------------------------------- (3) History对象（历史对象） back() 加载 history 列表中的前一个 URL forward() 加载 history 列表中的下一个 URL go() 加载 history 列表中的某个具体页面 方式一： demo05.html <a href="demo6.html">后一页</a> demo06.html <a href="demo7.html">后一页</a> <input type="button" value="上一页" onclick="history.back()"> <input type="button" value="下一页" onclick="history.forward()"> demo07.html 第七页 方式二： demo05.html <a href="demo6.html">后一页</a> demo06.html <a href="demo7.html">后一页</a> <input type="button" value="上一页" onclick="history.go(-1)"> <input type="button" value="下一页" onclick="history.go(1)"> demo07.html 第七页 ----------------------------------------------------------------------------- 七、js的DOM 1、理解文档对象模型 html文件加载到内存之后会形成一棵dom树，根据这些节点对象可以进行脚本代码的动态修改。 在dom树当中，一切皆为节点对象。 2、dom方法和属性 -------------------------------------- (1) 通过元素的id属性获得元素节点对象 <body> <form name="form1" action="test.html" method="post" > <input type="text" name="username" value="IT精英培训" id="tid" onchange="" /> <input type="button" name="ok" value="保存1" /> </form> </body> <script type="text/javascript"> // 输出 <input type="text" name="username" value="IT精英培训" id="tid" >标签value属性的值 var inputNode = document.getElementById("tid"); alert(inputNode.value); // IT精英培训 // 输出 <input type="text" name="username" value="IT精英培训" id="tid" >标签type属性的值 var inputNode = document.getElementById("tid"); alert(inputNode.type); // text </script> -------------------------------------- (2) 通过元素的name属性获得元素节点对象的集合 <body> <form name="form1" action="test.html" method="post"> <input type="text" name="tname" value="IT精英培训_1" id="tid_1"><br> <input type="text" name="tname" value="IT精英培训_2" id="tid_2"><br> <input type="text" name="tname" value="IT精英培训_3" id="tid_3"><br> <input type="button" name="ok" value="保存1" /> </form> </body> <script type="text/javascript"> // 通过元素的name属性获取所有元素的引用 var inputNodes = document.getElementsByName("tname"); // 测试该数据的长度 alert(inputNodes.length); // 3 // 遍历元素，输出所有value属性的值 for (var i = 0; i < inputNodes.length; i++) { var inputNode = inputNodes[i]; alert(inputNode.value); } // 为每个文本框(<input type="text">)增加onchange事件，当值改变时，输出改变的值 for (var i = 0; i < inputNodes.length; i++) { var inputNode = inputNodes[i]; inputNode.onchange = function() { alert(this.value); }; } </script> -------------------------------------- (3) 通过标签名称获得元素节点对象的集合 <body> <form name="form1" action="test.html" method="post"> <input type="text" name="tname" value="IT精英培训_1" id="tid_1"><br> <input type="text" name="tname" value="IT精英培训_2" id="tid_2"><br> <input type="text" name="tname" value="IT精英培训_3" id="tid_3"><br> <input type="button" name="ok" value="保存1" /> </form> <select name="edu" id="edu"> <option value="博士">博士^^^^^</option> <option value="硕士" selected="selected">硕士^^^^^</option> <option value="本科">本科^^^^^</option> <option value="幼儿园">幼儿园^^^^^</option> </select> <select name="job" id="job"> <option value="美容">美容^^^^^</option> <option value="IT">IT^^^^^</option> <option value="程序员">程序员^^^^^</option> <option value="建筑师">建筑师^^^^^</option> </select> <br /> <input id="btn" type="button" value="输出select被选中的值" /> </body> <script type="text/javascript"> // 获取所有的input元素，返回值是数组 var inputNodes = document.getElementsByTagName("input"); // 测试长度 alert(inputNodes.length); // 4 // 遍历所有value的值 for (var i = 0; i < inputNodes.length; i++) { var inputNode = inputNodes[i]; alert(inputNode.value); } // 输出type="text"中 value属性的值 ,不包含按钮(button) for (var i = 0; i < inputNodes.length; i++) { var inputNode = inputNodes[i]; if (inputNode.type == "text") { alert(inputNode.value); } } // 输出所有下拉选项select的option标签中value的值 var optionNodes = document.getElementsByTagName("option"); for (var i = 0; i < optionNodes.length; i++) { var optionNode = optionNodes[i]; alert(optionNode.value); } // 输出所有下拉选项 id="edu"中option标签中 value属性的值 var edu = document.getElementById("edu"); var optionNodes = edu.getElementsByTagName("option"); for (var i = 0; i < optionNodes.length; i++) { var optionNode = optionNodes[i]; alert(optionNode.value); } // 点击按钮输出下拉选项中被选中的值 var btn = document.getElementById("btn"); btn.onclick = function() { var optionNodes = document.getElementsByTagName("option"); for (var i = 0; i < optionNodes.length; i++) { var optionNode = optionNodes[i]; if (optionNode.selected) { alert(optionNode.value); } } }; </script> -------------------------------------- (4) 查看元素节点是否含有子节点 <body> <form name="form1" action="test.html" method="post"> <input type="text" name="tname" value="IT精英培训_1" id="tid_1" /><br> <input type="text" name="tname" value="IT精英培训_2" id="tid_2" /><br> <input type="text" name="tname" value="IT精英培训_3" id="tid_3" /><br> <input type="button" name="ok" value="保存1" /> </form> <select name="edu" id="edu"> <option value="博士">博士^^^^^</option> <option value="硕士">硕士^^^^^</option> <option value="本科" selected="selected">本科^^^^^</option> <option value="幼儿园">幼儿园^^^^^</option> </select> <select name="job" id="job"> <option value="美容">美容^^^^^</option> <option value="IT">IT^^^^^</option> <option value="程序员">程序员^^^^^</option> <option value="建筑师">建筑师^^^^^</option> </select> </body> <script type="text/javascript"> // 查看id="edu"的节点是否含有子节点 var edu = document.getElementById("edu"); alert(edu.hasChildNodes()); // true // 查看id="tid_1"的节点是否含有子节点 var tid_1 = document.getElementById("tid_1"); alert(tid_1.hasChildNodes()); // false </script> -------------------------------------- (5) 获得节点名称类型和值 <body> <form name="form1" action="test.html" method="post"> <input type="text" name="tname" value="IT精英培训_1" id="tid_1"><br> <input type="text" name="tname" value="IT精英培训_2" id="tid_2"><br> <input type="text" name="tname" value="IT精英培训_3" id="tid_3"><br> <input type="button" name="ok" value="保存1" /> </form> <p id="pid">明天上课</p> </body> <script type="text/javascript"> // <input type="text" name="tname" value="IT精英培训_1" d="tid_1" ><br> // 元素节点 ：id="tid_1"，输出nodeName(只读) nodeType(只读) nodeValue(可读可写) var node = document.getElementById("tid_1"); alert(node.nodeName); // input 元素节点返回元素名称，属性节点返回属性名称，文本节点返回内容为#text的字符串 alert(node.nodeType); // 1 元素节点返回1，属性节点返回2，文本节点返回3 alert(node.nodeValue); // null 元素节点返回null，属性节点返回属性的值，文本节点返回文本节点的内容 // <p id="pid">明天上课</p> // 属性节点 ：id="pid",输出nodeName nodeType nodeValue var node = document.getElementById("pid"); var p = node.getAttributeNode("id"); alert(p.nodeName); // id alert(p.nodeType); // 2 alert(p.nodeValue); // pid // <p id="pid">明天上课</p> // 文本节点 ：id="pid"，输出nodeName nodeType nodeValue var node = document.getElementById("pid"); var textNode = node.firstChild; alert(textNode.nodeName); // #text alert(textNode.nodeType); // 3 alert(textNode.nodeValue); // 明天上课 </script> ----------------------------------------------------------------------------- Node节点对象练习1： <body> <h1 id="h1">明天休息</h1> </body> <script type="text/javascript"> // <h1 id="h1">明天休息</h1> // 方法一： 利用firstChild/lastChild 输出明天休息 var h1 = document.getElementById("h1"); var textNode = h1.firstChild; // 因为只有一个孩子，lastChild也可以 alert(textNode.nodeName); // #text alert(textNode.nodeType); // 3 alert(textNode.nodeValue); // 明天休息 // 测试nodeValue是一个读写属性 alert(textNode.nodeValue); // 明天休息 alert(textNode.nodeValue = "明天继续上课"); // 明天继续上课 // 方法二：childNodes表示父元素下的所有的子元素(数组/集合) var h2 = document.getElementById("h1"); var childs = h2.childNodes; alert(childs[0].nodeValue); // 明天休息 </script> -------------------------------------- Node节点对象练习2： <body> <ul> <li id="bj" value="beijing">北京<p>海淀</p>奥运</li> <li id="sh" value="shanghai">上海</li> </ul> </body> <script type="text/javascript"> // 打印出 id="bj"该节点的所有子节点的(nodeName, nodeType, nodeValue) var node = document.getElementById("bj"); var subNodes = node.childNodes; for (var i = 0; i < subNodes.length; i++ ) { var subNode = subNodes[i]; alert(subNode.nodeName); alert(subNode.nodeType); alert(subNode.nodeValue); } // 同时打印文本值 北京 海淀 奥运 for (var i = 0; i < subNodes.length; i++ ) { var subNode = subNodes[i]; if (subNode.nodeType == "3") { alert(subNode.nodeValue); } if (subNode.nodeType == "1") { var textNode = subNode.firstChild; alert(textNode.nodeValue); } } </script> -------------------------------------- (6) 通过父节点替换子节点 <body> 您喜欢的城市: <br> <ul> <li id="bj" value="beijing">北京</li> <li id="sh" value="shanghai">上海</li> <li id="cq" value="chongqing">重庆</li> </ul> 您喜欢的游戏: <br> <ul> <li id="fk" value="fangkong">反恐 <p>精英</p> </li> <li id="ms" value="moshou">魔兽</li> <li id="cq" value="chuanqi">传奇</li> </ul> </body> <script type="text/javascript"> // 点击北京节点， 将被反恐节点替换 var bj = document.getElementById("bj"); // 旧节点对象 var fk = document.getElementById("fk"); // 新节点对象 bj.onclick = function() { var parentNode = this.parentNode; parentNode.replaceChild(fk, this); // 通过父节点对象才能来替换 }; </script> -------------------------------------- (7) 获取属性节点的值 <body> 您喜欢的城市: <br> <ul> <li id="bj" value="beijing">北京</li> <li id="sh" value="shanghai">上海</li> <li id="cq" value="chongqing">重庆</li> </ul> 您喜欢的游戏: <br> <ul> <li id="fk" value="fangkong">反恐</li> <li id="ms" value="moshou">魔兽</li> <li id="xj" value="xingji">星际争霸</li> </ul> </body> <script type="text/javascript"> // 获取 <li id="xj" value="xingji">星际争霸</li> 节点的value属性的值 var xj = document.getElementById("xj"); alert(xj.getAttribute("value")); // xingji </script> -------------------------------------- (8) 设置属性值（同上） <script type="text/javascript"> // 给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li> var xj = document.getElementById("xj"); xj.setAttribute("name", "xingjizhengba"); // 测试 alert(xj.getAttribute("name")); </script> -------------------------------------- (9) 创建节点（同上） <script type="text/javascript"> // 增加城市节点 <li id="tj" value="tianjin">天津</li>放置到city下 var li = document.createElement("li"); // 创建新儿子标签对象(元素对象) // 添加属性 li.setAttribute("id", "tj"); li.setAttribute("value", "tianjin"); // 添加文本 var txt = document.createTextNode("天津"); // 创建文本对象 li.appendChild(txt); // 把文本对象添加到标签对象的内部 // 把标签对象添加到ul对象中 var ul = document.getElementById("city"); ul.appendChild(li); // 用爸爸ul对象把新儿子标签对象添加进来 </script> -------------------------------------- (10) 将元素插入到元素前面 <body> <ul> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="cq" name="chongqing">重庆</li> </ul> </body> <script type="text/javascript"> // 创建新的节点 <li id="tj" name="tianjin">天津</li> var li = document.createElement("li"); li.setAttribute("id", "tj"); li.setAttribute("name", "tianjin"); var txt = document.createTextNode("天津"); li.appendChild(txt); // 在 <li id="cq" name="chongqing">重庆</li>的前面 var ul = document.getElementsByTagName("ul"); var cq = document.getElementById("cq"); ul[0].insertBefore(li, cq); </script> -------------------------------------- (11) 将新节点插入到某节点的后面（同上） <script type="text/javascript"> // 在 上海节点的后面 插入天津节点<li id="tj" name="tianjin">天津</li> var li = document.createElement("li"); li.setAttribute("id", "tj"); li.setAttribute("name", "tianjin"); var txt = document.createTextNode("天津"); li.appendChild(txt); var ul = document.getElementsByTagName("ul"); var sh = document.getElementById("sh"); var cq = sh.nextSibling; // 通过上海节点找到重庆节点(即下一个兄弟) ul[0].insertBefore(li,cq); </script> -------------------------------------- (12) 删除节点 <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="cq" name="chongqing">重庆</li> </ul> </body> <script type="text/javascript"> // 删除<ul id="city"> 下 <li id="bj" name="beijing">北京</li>这个节点</ul> var city = document.getElementById("city"); // 先获取爸爸节点对象 var bj = document.getElementById("bj"); // 再获取儿子节点对象 city.removeChild(bj); // 用爸爸干掉儿子 </script> -------------------------------------- (13) innerHTML属性 <body> <div id="subject">jquery</div> </body> <script type="text/javascript"> // 使用innerHTML读出id="subject"中的文本内容 var div = document.getElementById("subject"); // 原先的做法 // var textNode = div.firstChild; // alert(textNode.nodeValue); // 现在的做法 alert(div.innerHTML); // 将<h1>今天</h1>写到div的层中 var div = document.getElementById("subject"); div.innerHTML = "<h1>今天</h1>"; </script> =============================================================================
我的GitHub地址： https://github.com/heizemingjun
我的博客园地址： http://www.cnblogs.com/chenmingjun
我的蚂蚁笔记博客地址： http://blog.leanote.com/chenmingjun
Copyright ©2018 黑泽明军
【转载文章务必保留出处和署名，谢谢！】
