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 // 先获取select2
107 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是否被选中，如果被选中了，添加在select2
117 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 // 先获取select2
130 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是否被选中，如果被选中了，添加在select1
140 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
* 获取和设置文本内容
4219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
