J2EE进阶之javascript 四
来源：互联网 发布：js 删除cookies 编辑：程序博客网 时间：2024/06/06 15:17
javascript
BOM 浏览器对象模型
window(*****) 窗口对象 navigater(**) 和浏览器版本相关 history(**) 和历史相关 location(***) 和地址相关 * history * forward() * back() * go(1获取-1) * location * href 获取和设置浏览器的地址栏的地址 * window对象 * alert() 弹出提示框 * confirm() 询问框 * 默认提供了2个按钮，一个确定和取消 * 点击确定，返回是true，点击取消，返回false * moveBy(20,20) * 窗口移动 * open() * URL 设置新窗口的地址 * name 名称 * features 设置窗口的特征 * close() * 关闭浏览器 * setInterval("函数名称",3000) 每隔3秒钟执行函数 * setTimeout("函数名称",3000) 3秒后执行该函数 * clearInterval() * clearTimeout() 示例代码1
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 <input type="button" value="下一页" onclick="run()" /> 9 <input type="button" value="上一页" onclick="run2()" /> 10 <input type="button" value="跳转" onclick="run3()" /> 11 </body> 12 <script type="text/javascript"> 13 /* 14 * history 15 * forward() 16 * back() 17 * go(1获取-1) 18 19 * location 20 * href 获取和设置浏览器的地址栏的地址 21 22 */ 23 24 function run() { 25 //下一页 26 window.history.forward(); 27 } 28 function run2() { 29 //上一页 30 //window.history.back(); 31 window.history.go(-1); 32 } 33 function run3() { 34 window.location.href = "http://www.baidu.com"; 35 } 36 </script> 37 38 39 </html> 示例代码window对象
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 9 <span id="spanid"> 10 我是文本 11 </span> 12 13 <input type="button" value="移动" onclick="run()"/> <br /> 14 15 <input type="button" value="新窗口" onclick="run2()"/><br /> 16 17 <input type="button" value="定时1" onclick="run3()"/><br /> 18 19 <input type="button" value="定时2" onclick="run4()"/><br /> 20 21 <input type="button" value="清除" onclick="run5()"/><br /> 22 23 </body> 24 25 <script type="text/javascript"> 26 /* 27 window对象 28 * alert() 弹出提示框 29 * confirm() 询问框 30 * 默认提供了2个按钮，一个确定和取消 31 * 点击确定，返回是true，点击取消，返回false 32 * moveBy(20,20) 33 * 窗口移动 34 * open() 35 * URL 设置新窗口的地址 36 * name 名称 37 * features 设置窗口的特征 38 39 * close() 40 * 关闭浏览器 41 42 * setInterval("函数名称",3000) 每隔3秒钟执行函数 43 * setTimeout("函数名称",3000) 3秒后执行该函数 44 45 * clearInterval() 46 * clearTimeout() 47 */ 48 49 //alert("hehe"); 50 51 /* if(window.confirm("确定删除吗??")){ 52 // 点击确定 53 alert("删除成功"); 54 }else{ 55 // 点击取消 56 alert("取消了"); 57 } */ 58 59 /* function run(){ 60 window.moveBy(20, 20); 61 } */ 62 63 // 弹出新窗口 64 /* function run2(){ 65 window.open("http://www.baidu.com", "", "width=400,height=200"); 66 } */ 67 68 function show(){ 69 alert("abc"); 70 } 71 var m; 72 function run3(){ 73 m = window.setInterval("show()", 3000); 74 } 75 function run4(){ 76 window.setTimeout("show()", 3000); 77 } 78 79 function run5(){ 80 window.clearInterval(m); 81 } 82 83 </script> 84 </html>DOM 文档对象模型
* DOM 文档对象模型 * 文档：标记型文档 （html、xml） * 对象：属性和行为（方法） * 模型：共性特征体现 * DOM的方式，会把标记型文档（标签、文本、属性）全部封装成对象 * 动态的HTML * HTML ：封装数据 * CSS ：设置样式 * DOM ：操作HTML * JAVASCRIPT ：提供语句DOM的解析方式
看图
Document对象
* 方法（*****） * getElementById("id的名称"); 通过id获取元素的名称 * getElementsByName("name的名称"); 通过name名称获取多个元素的对象（数组） * getElementsByTagName("标签的名称"); 通过标签的名称获取多个元素的对象（数组） * write("文本的内容");示例代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 9 <input type="text" name="username" id="nameId" value="zhangsan1" /> 10 <br /> 11 <input type="text" name="username" value="zhangsan2" /> 12 <br /> 13 <input type="text" name="username" value="zhangsan3" /> 14 <br /> 15 <input type="text" name="username" value="zhangsan4" /> 16 <br /> 17 18 <ul> 19 <li>1</li> 20 <li>2</li> 21 </ul> 22 </body> 23 24 <script type="text/javascript"> 25 /* 26 * getElementById("id的名称"); 通过id获取元素的名称 27 * getElementsByName("name的名称"); 通过name名称获取多个元素的对象（数组） 28 * getElementsByTagName("标签的名称"); 通过标签的名称获取多个元素的对象（数组） 29 */ 30 //通过ID获取 31 var input = document.getElementById("nameId"); 32 33 //alert(input.value); 34 35 //通过name获取 36 var inputs = document.getElementsByName("username"); 37 //alert(inputs.length); 38 39 /* for (var i = 0; i < inputs.length; i++) { 40 var input = inputs[i]; 41 alert(input.value); 42 } */ 43 44 // 通过标签名获取元素对象（返回是数组） 45 var inputs2 = document.getElementsByTagName("input"); 46 //alert(inputs2.length); 47 48 var ul = document.getElementsByTagName("ul")[0]; 49 </script> 50 </html> 51 在末尾添加节点
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 9 <ul id="ulId"> 10 <li>北京</li> 11 <li>上海</li> 12 <li>广州</li> 13 </ul> 14 15 <input type="button" value="生成" onclick="run()" /> 16 17 </body> 18 19 <script type="text/javascript"> 20 /* 21 * 需求：在ul列表下，添加子节点 <li>深圳</li> 22 23 * 向指定的位置添加子节点 24 insertBefore(new,old); 25 26 */ 27 function run(){ 28 // 创建文本对象 29 var text = document.createTextNode("深圳"); 30 // 创建元素对象 31 var li = document.createElement("li"); 32 // 把文本加入到li下 33 li.appendChild(text); 34 // 获取ul 35 var ul = document.getElementById("ulId"); 36 // 把li加入到ul下 37 ul.appendChild(li); 38 } 39 40 </script> 41 </html> 42 43 44 45 46 47 48 49 50 51 52 53 54 Element对象（先获取到元素的对象）
* Element对象（先获取到元素的对象） * getAttribute("属性名称"); * setAttribute("属性名称","属性值"); * 设置或者修改属性的值 * removeAttribute("属性名称"); * 获取ul下所有的li标签的节点（*****） * ul.getElementsByTagName("li");demo
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 9 <input type="text" name="username" id="nameId" value="zhangsan" /> 10 11 <ul id="ulId"> 12 <li>北京</li> 13 <li>上海</li> 14 <li>广州</li> 15 </ul> 16 17 </body> 18 19 <script type="text/javascript"> 20 /* 21 * Element对象（先获取到元素的对象） 22 * getAttribute("属性名称"); 23 * setAttribute("属性名称","属性值"); 24 * 设置或者修改属性的值 25 26 * removeAttribute("属性名称"); 27 28 * 获取ul下所有的li标签的节点 29 * ul.getElementsByTagName("li"); 30 */ 31 32 var input = document.getElementById("nameId"); 33 //alert(input.value); 34 //alert(input.getAttribute("value")); 35 36 37 // 获取ul下所有的li标签的节点 38 // 先获取ul的节点 39 var ul = document.getElementById("ulId"); 40 var lis = ul.childNodes; 41 // alert(lis.length); 42 43 var lis2 = ul.getElementsByTagName("li"); 44 alert(lis2.length); 45 46 </script> 47 </html>Node节点对象
* nodeName 节点名称 * nodeType 节点类型 * nodeValue 节点值 元素 属性 文本 nodeName 大写元素名称 属性名称 #text nodeType 1 2 3 nodeValue null 属性的值 文本的内容 IE6-8 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE9-11 Chrome FireFox firstChild 第一个节点 ? ? ? ? ? ? ? ? firstElementChild?第一个节点 lastChild最后一个节点、 ? ? ? ? ? ? ? lastElementChild 最后一个节点 nextSibling 下一同级节点 ? ? ? ? ? ? ?nextElementSibling?下一同级节点 previousSibling 上一同级节点 ? ? ? ? ?previousElementSibling?上一同级节点 例子： <ul> <li></li> </ul> * 通过ul获取第一个li的子节点，使用firstElementChild（条件：IE9-11 Chrome FireFox） * 如果不是该种浏览器，使用firstChild <span> 有文本内容 </span> * 通过span获取文本内容，使用firstChild * hasChildNodes() 检测是否包含子节点 * hasAttributes() 是否包含属性demo
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 9 <input type="text" name="username" id="nameId" value="zhangsan" /> 10 11 <span id="spanId"> 12 这是文本的内容 13 </span> 14 15 <ul id="ulId"> 16 <li>北京</li> 17 <li id="sh">上海</li> 18 <li>广州</li> 19 </ul> 20 21 </body> 22 23 <script type="text/javascript"> 24 /* 25 元素 属性 文本 26 nodeName 大写元素名称 属性名称 #text 27 nodeType 1 2 3 28 nodeValue null 属性的值 文本的内容 29 30 * parentNode 获取父节点 31 * firstChild firstElementChild 32 33 * hasChildNodes() 检测是否包含子节点 34 * hasAttributes() 是否包含属性 35 36 */ 37 var input = document.getElementById("nameId"); 38 //alert(input.nodeName); // INPUT 39 //alert(input.nodeType); // 1 40 //alert(input.nodeValue); // null 41 42 var attr = input.getAttributeNode("name"); 43 //alert(attr.nodeName); // name 44 //alert(attr.nodeType); // 2 45 //alert(attr.nodeValue); // username 46 47 var span = document.getElementById("spanId"); 48 var text = span.firstChild; 49 //alert(text.nodeName); // #text 50 //alert(text.nodeType); // 3 51 //alert(text.nodeValue); // 这是文本的内容 52 53 // 获取上海的节点 54 var sh = document.getElementById("sh"); 55 var ul = sh.parentNode; 56 // alert(ul.id); 57 58 // 元素对象 59 var bj = ul.firstElementChild; 60 //alert(bj.nodeType); 61 62 // 判断是否包含子节点 63 //alert(ul.hasChildNodes()); 64 //alert(ul.hasAttributes()); 65 66 </script> 67 </html>操作DOM树
* appendChild() 末尾添加子节点 * insertBefore(new,old) 在指定的位置之前添加 * removeChild(node) 删除节点 * replaceChild(new,old) 替换节点 * 父节点调用 * * cloneNode(boolean) * 默认是false，false不会复制子节点 * 设置true，复制子节点 * innerHTML可以获取和设置标签的文本内容demo
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 9 <ul> 10 <li>北京</li> 11 <li id="sh">上海</li> 12 <li>深圳</li> 13 </ul> 14 15 <ul> 16 <li>小时代1</li> 17 <li id="xsd2">小时代2</li> 18 <li>小时代3</li> 19 </ul> 20 21 <button id="btnId" onclick="run()"> 22 我是按钮 23 </button> 24 25 <span id="spanId"> 26 27 </span> 28 29 </body> 30 31 <script type="text/javascript"> 32 /* 33 父节点.replaceChild(new,old) 替换节点 34 父节点.removeChild(node); 35 36 * cloneNode(boolean) 37 * 默认是false，false不会复制子节点 38 * 设置true，复制子节点 39 */ 40 /* 41 // 替换节点 42 document.getElementById("sh").onclick = function(){ 43 var sh = document.getElementById("sh"); 44 // 获取上海的父节点 45 var ul = sh.parentNode; 46 // 获取小时代2的节点 47 var xsd2 = document.getElementById("xsd2"); 48 ul.replaceChild(xsd2, sh); 49 50 // this 当前对象 51 //var ul = this.parentNode; 52 var xsd2 = document.getElementById("xsd2"); 53 this.parentNode.replaceChild(xsd2,this); 54 }; 55 */ 56 57 // 删除节点 58 document.getElementById("sh").onclick = function(){ 59 // this.parentNode.removeChild(this); 60 var sh = document.getElementById("sh"); 61 // 获取上海的父节点 62 var ul = sh.parentNode; 63 // 删除 64 ul.removeChild(sh); 65 }; 66 67 // 复制button按钮，添加到span标签中 68 function run(){ 69 var btn = document.getElementById("btnId"); 70 // 复制按钮 71 var newbtn = btn.cloneNode(true); 72 // 获取span标签 73 var span = document.getElementById("spanId"); 74 // 添加子节点 75 span.appendChild(newbtn); 76 } 77 78 </script> 79 </html> 80 81 82 demo2
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 9 输入姓名：<input type="text" name="username" id="nameId" onfocus="run()" onblur="run2()"/><span id="spanId2" style="color: red" ></span><br/> 10 11 <span id="spanId"> 12 我是span的区域 13 </span> 14 15 </body> 16 17 <script type="text/javascript"> 18 /* 19 * innerHTML获取和设置标签的文本内容 20 * onfocus="run()" 21 * onblur="run2()" 22 */ 23 var span = document.getElementById("spanId"); 24 //alert(span.innerHTML); 25 26 // 输入提示 27 function run(){ 28 // 获取span的标签 29 var span2 = document.getElementById("spanId2"); 30 span2.innerHTML = "请您输入4-18个特殊字符"; 31 } 32 33 // 34 function run2(){ 35 // 获取用户输入的值 36 // ajax 37 var span2 = document.getElementById("spanId2"); 38 span2.innerHTML = "您输入的用户已存在ss"; 39 } 40 41 </script> 42 </html>demo全选练习
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 9 <input type="checkbox" id="boxId" onclick="selOrNo()"/>全选/全不选<br/> 10 11 <input type="checkbox" name="love" />篮球<br/> 12 <input type="checkbox" name="love" />足球<br/> 13 <input type="checkbox" name="love" />排球<br/> 14 <input type="checkbox" name="love" />冰球<br/> 15 16 <input type="button" value="全选" onclick="selAll()"/> 17 <input type="button" value="全不选" onclick="selNo()"/> 18 <input type="button" value="反选" onclick="selOth()"/> 19 20 </body> 21 22 <script type="text/javascript"> 23 /* 24 type="checkbox" 属性checked=true 25 * 设置标签的checked属性 26 * 获取name名称是love的所有的input标签，返回数组 27 * 循环遍历，拿到每一个input标签 28 * 设置属性 29 */ 30 // 全选 31 function selAll(){ 32 // 先获取name名称是love的所有的input标签 33 var inputs = document.getElementsByName("love"); 34 // 循环遍历，拿到每一个input 35 for(var i=0;i<inputs.length;i++){ 36 var input = inputs[i]; 37 // 设置属性 38 input.checked = true; 39 //input.setAttribute("checked","true"); 40 } 41 } 42 43 // 全不选 44 function selNo(){ 45 // 先获取name名称是love的所有的input标签 46 var inputs = document.getElementsByName("love"); 47 // 循环遍历，拿到每一个input 48 for(var i=0;i<inputs.length;i++){ 49 var input = inputs[i]; 50 // 设置属性 51 input.checked = false; 52 //input.removeAttribute("checked"); 53 } 54 } 55 56 57 // 反选 58 function selOth(){ 59 // 先获取name名称是love的所有的input标签 60 var inputs = document.getElementsByName("love"); 61 // 循环遍历，拿到每一个input 62 for(var i=0;i<inputs.length;i++){ 63 var input = inputs[i]; 64 // 判断，当前的input标签是否被选中，如果选中，设置false，相反。 65 /* if(input.checked == false){ 66 input.checked = true; 67 }else{ 68 input.checked = false; 69 } */ 70 71 input.checked = !input.checked; 72 } 73 } 74 75 function selOrNo(){ 76 var box = document.getElementById("boxId"); 77 if(box.checked == true){ 78 // 全选 79 selAll(); 80 }else{ 81 // 全不选 82 selNo(); 83 } 84 } 85 86 </script> 87 </html> 88 89 90 91 92 93 demo列表左右选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 * { margin:0; padding:0; } 8 div.centent { 9 float:left; 10 text-align: center; 11 margin: 10px; 12 } 13 span { 14 display:block; 15 margin:2px 2px; 16 padding:4px 10px; 17 background:#898989; 18 cursor:pointer; 19 font-size:12px; 20 color:white; 21 } 22 </style> 23 24 25 </head> 26 <body> 27 <div class="centent"> 28 <select multiple="multiple" id="select1" style="width:100px;height:160px;"> 29 <option value="1">选项1</option> 30 <option value="2">选项2</option> 31 <option value="3">选项3</option> 32 <option value="4">选项4</option> 33 <option value="5">选项5</option> 34 <option value="6">选项6</option> 35 <option value="7">选项7</option> 36 </select> 37 <div> 38 <span id="add" >选中添加到右边>></span> 39 <span id="add_all" >全部添加到右边>></span> 40 </div> 41 </div> 42 43 <div class="centent"> 44 <select multiple="multiple" id="select2" style="width: 100px;height:160px;"> 45 <option value="8">选项8</option> 46 </select> 47 <div> 48 <span id="remove"><<选中删除到左边</span> 49 <span id="remove_all"><<全部删除到左边</span> 50 </div> 51 </div> 52 53 </body> 54 <script type="text/javascript"> 55 /* 56 * 选中左边的数据的条目，把选中的添加到右边的选择框中 57 * select标签的属性 58 * selected 可以判断是否被选中（如果是true，说明被选中，如果是false，说明没有被选中） 59 * 先获取option的所有的标签，循环遍历，判断哪一个被选中 60 * 添加到select2标签下 61 */ 62 63 // 向右边添加条目 64 document.getElementById("add").onclick = turnRight; 65 66 // 全不添加到右边 67 document.getElementById("add_all").onclick = function(){ 68 // 获取select2 69 var select2 = document.getElementById("select2"); 70 // 先获取select1 71 var select1 = document.getElementById("select1"); 72 // 获取select1下的所有的子节点 73 var options = select1.getElementsByTagName("option"); 74 // 循环遍历，拿到每一个，加入到select2中 75 for(var i=0;i<options.length;i++){ 76 var option = options[i]; 77 select2.appendChild(option); 78 i--; 79 } 80 }; 81 82 // 从右边到左边 83 document.getElementById("remove").onclick = turnLeft; 84 85 // 全不添加到右边 86 document.getElementById("remove_all").onclick = function(){ 87 // 获取select2 88 var select2 = document.getElementById("select2"); 89 // 先获取select1 90 var select1 = document.getElementById("select1"); 91 // 获取select2下的所有的子节点 92 var options = select2.getElementsByTagName("option"); 93 // 循环遍历，拿到每一个，加入到select1中 94 for(var i=0;i<options.length;i++){ 95 var option = options[i]; 96 select1.appendChild(option); 97 i--; 98 } 99 };100 101 // 双击102 document.getElementById("select1").ondblclick = turnRight;103 104 // 向右边添加条目105 function turnRight(){106 // 先获取select2107 var select2 = document.getElementById("select2");108 // 先获取select1对象109 var select1 = document.getElementById("select1");110 // 需要获取所有的option元素对象111 var options = select1.getElementsByTagName("option");112 // 循环遍历，拿到每一个option对象，判断当前的option是否被选中113 for(var i=options.length-1;i>=0;i--){114 // 拿到每一个option对象115 var option = options[i];116 // 判断当前的option是否被选中，如果被选中了，添加在select2117 if(option.selected == true){118 // 添加到select2中119 select2.appendChild(option);120 //i--;121 }122 }123 }124 125 document.getElementById("select2").ondblclick = turnLeft;126 127 // 向左边添加128 function turnLeft(){129 // 先获取select2130 var select2 = document.getElementById("select2");131 // 先获取select1对象132 var select1 = document.getElementById("select1");133 // 需要获取所有的option元素对象134 var options = select2.getElementsByTagName("option");135 // 循环遍历，拿到每一个option对象，判断当前的option是否被选中136 for(var i=options.length-1;i>=0;i--){137 // 拿到每一个option对象138 var option = options[i];139 // 判断当前的option是否被选中，如果被选中了，添加在select1140 if(option.selected == true){141 // 添加到select1中142 select1.appendChild(option);143 //i--;144 }145 }146 }147 148 </script>149 </html>150 151 152 153 154 155 156 157 158 159 160 demo 省市选择器
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 9 <select id="select1" onchange="run(this.value)"> 10 <option>--请选择--</option> 11 <option value="北京">北京</option> 12 <option value="山西">山西</option> 13 <option value="河北">河北</option> 14 <option value="日本">日本</option> 15 </select> 16 17 <select id="select2"> 18 19 </select> 20 21 </body> 22 23 <script type="text/javascript"> 24 /* 25 * 通过传入过来的值，和数组进行对比，如果对比成功，获取数组后面的值，加入到select2 26 * 改变事件 27 * onchange 28 * 和数组的值进行对比 29 30 */ 31 var arr = []; 32 arr[0] = new Array("北京","海淀区","昌平区","朝阳区","顺义区","怀柔区","大兴区","东城区","西城区"); 33 arr[1] = new Array("山西","太原","大同","晋中","临汾","运城","吕梁"); 34 arr[2] = new Array("河北","石家庄","保定","邯郸","衡水","沧州","承德","张家口","秦皇岛","唐山"); 35 arr[3] = new Array("日本","东京","大阪","北海道","广岛","长崎","神户","横滨","神奈川"); 36 37 function run(val){ 38 // 获取select2 39 var select2 = document.getElementById("select2"); 40 // 清空select2（删除select2下所有的子节点） 41 // 获取所有的子节点 42 var options = select2.getElementsByTagName("option"); 43 // 循环遍历，拿到每一个option，通过select2删除 44 for(var i=options.length-1;i>=0;i--){ 45 var option = options[i]; 46 // 删除 47 select2.removeChild(option); 48 } 49 50 // alert("haha"); 51 // alert(val); 52 // 先遍历arr数组 53 for(var x=0;x<arr.length;x++){ 54 var inarr = arr[x]; 55 var inStr = inarr[0]; 56 // alert(inStr); 57 // 传过来的值和inStr进行判断，如果相等，获取数组后面的内容 58 if(inStr == val){ 59 // 循环遍历，获取数组除了第0个位置的元素，拿到后面所有的元素 60 for(var y=1;y<inarr.length;y++){ 61 // 获取文本内容 62 var str = inarr[y]; 63 // alert(str); 64 // 把文本内容加入到select2中 65 // 创建文本对象 66 var text = document.createTextNode(str); 67 // 创建元素对象 68 var option = document.createElement("option"); 69 // 把文本添加到元素下面 70 option.appendChild(text); 71 // 把元素添加到select2 72 select2.appendChild(option); 73 } 74 } 75 } 76 } 77 78 </script> 79 </html> 80 81 82 83 84 85 86 事件整理
* 鼠标移动 * onmousemove * onmouseout 从元素上移开 * onmouseover 移动到元素上、
1 <html> 2 <script language="JavaScript"> 3 function mouseovertest(){ 4 document.getElementById("info").value = "鼠标在输入框上";} 5 function mouseouttest(){ 6 document.getElementById("info").value= "鼠标在输入框外";} 7 </script> 8 <body> 9 <input type="text" id="info" onmouseover="mouseovertest();" 10 onmouseout="mouseouttest();"/> 11 </body> 12 </html>、
* 鼠标点击操作 * onclick 单击 * ondblclick 双击、
1 <html> 2 <script language="JavaScript"> 3 function addFile(){ 4 var file = document.createElement('input'); 5 file.setAttribute('id', 'temp_file'); 6 file.setAttribute('type', 'file'); 7 document.body.appendChild(file); 8 } 9 </script> 10 <body> 11 <form action="uploadFile" method="post"> 12 <input type="button" value="添加附件" onclick="addFile();"> 13 </form> 14 </body> 15 </html>、
* 加载与卸载事件 * onload 加载（一般作用body标签上） * onunload 卸载 * 聚焦和离焦 * onfocus * onblur * 键盘事件 * onkeydown * onkeyup * onkeypress * 改变事件 * onchange 值改变，触发事件 * 控制表单提交 * onsubmit 最后对BOM和DOM总结：
* BOM * window * alert() 提示框 * confirm() 询问框 * 确定和取消按钮 * open() 弹出新的窗口 * url * name * 特征 * close(); 关闭窗口 * setInterval("方法名称",毫秒值) 每隔多少毫秒执行方法，返回唯一的id值 * setTimeout("方法名称",毫秒值) 过多少毫秒执行方法，返回唯一的id值 * clearInterval(id); * clearTimeout(id); * history * back(); * forward(); * go(1或者-1) * location * href="" 获取和设置网页的链接* DOM * DOM Document Object Model 文档对象模型 * DOM解析HTML，把标记型文档全部都封装成对象 * 元素（标签） 属性 文本 * Document ：代表整个文档 * Element ：元素（标签）对象 * Attr ：属性对象 * Text ：文本对象 * Node ：节点对象 * document对象 * getElementById("id名称"); * getElementsByName("name名称"); 数组 * getElementsByTagName("标签名"); 数组 * write("文本内容"); * 在ul列表添加子节点 createTextNode("文本内容"); createElement("标签名称"); appendChild(node); * Element对象 * getAttribute("属性名称"); * setAttribute("属性名称","属性值"); * removeAttribute("属性名称"); * 获取指定元素下的所有子节点 ul.getElementsByTagName("子节点的标签名称"); * Node节点对象 * 操作DOM节点树 appendChild() insertBefore(new,old) 在指定的节点之前插入新的节点 removeChild(node) 删除节点 replaceChild(new,old) 替换节点 cloneNode(boolean) * innerHTML * 获取和设置文本内容阅读全文
1 0
- J2EE进阶之javascript 四
- J2EE进阶之javascript 三
- J2EE进阶之HTML 一
- J2EE进阶之CSS 二
- J2EE进阶之servlet 九
- J2EE进阶(四)Spring配置文件详解
- j2EE 之 javaScript
- JavaScript进阶之数组
- JavaScript进阶之函数
- JavaScript进阶之事件
- JavaScript进阶之this
- J2EE进阶(二)从零开始之Struts2
- J2EE进阶之onsubmit表单提交 五
- J2EE进阶之Response 和Request 十
- J2EE进阶之Cookie和Session 十一
- J2EE进阶之MySQL数据库 十五
- J2EE进阶之JDBC简介 十六
- J2EE进阶之JDBC数据库连接池 十九
- 有趣的border-radius
- spring data jpa mysql 乐观锁 与 AtomicInteger
- Tomcat源码下载地址
- DB2 错误码sqlcode对应表
- 链表的原理及java实现
- J2EE进阶之javascript 四
- java.lang.OutOfMemoryError: GC overhead limit exceeded解决办法
- 30分钟撸出一个线程安全的YYModel
- java通过ssl连接LDAP服务器（包括LDAP服务器搭建、openssl数字证书生成、openldap服务器配置启动）
- c++实现基数排序
- win+linux 搭建Maven环境
- C++ bitset对象
- 女性成为未来世界的主宰 需要做到雌雄同体、玩转黑科技？
- Windows 7 系统QT程序发布
