安小琪's blog

少年有梦，不应止于心动

JavaScript

Posted on In Valine:

以前学js时做的笔记,其实也没写什么

DOMO事件处理程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">
        <button type="submit" id="btn">提交</button>
    </div>
    <script>
    var dtn = document.getElementById("btn").onclick =  function demo(){alert("DOMO级事件处理程序");}     //会被覆盖
 
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">
        <button type="submit" id="btn">提交</button>
    </div>
    <script>
    var dtn = document.getElementById("btn").addEventListener("click",demo)
    var dtn = document.getElementById("btn").addEventListener("click",demo1)  //不会被覆盖
        function demo(){
            alert("DOMO2级事件处理程序");
        }
        function demo1(){
            alert("DOMO2事件处理程序");
        }
        document.getElementById("btn").removeEventListener("click",demo1)  //移去该事件处理程序
    </script>
</body>
</html>

事件对象

在触发DOM事件的时候都会产生一个对象

1
2
3
4
5
6
事件对象event：

1.type:获取事件类型
2.target:获取事件目标
3.stopPropagation():阻止事件冒泡
4.preventDefault():阻止事件默认行为

DATE对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="startTime()">
    <script type="text/javascript">
        function startTime(){
            var d = new Date();
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
            var t = setTimeout(function(){
               startTime(); 
            }, 500);
            m = checktime(m);
            s = checktime(s);
            document.getElementById("asd").innerHTML=h+":"+m+":"+s;
        }  
        function checktime(i){
            if(i<10){
                i = "0"+i;
            }
            return i;

        }    
        </script>
        <div id="asd"></div>
</body>
</html>

MATH对象

1
例： Math.round(2.5)    //得到3  把数四舍五入为最接近的整数。

DOM对象控制HTML

​ 1.方法：

​ getElementsByName() 获取name

​ getElementsByTagName() 获取元素

​ getAttribute() 获取元素属性

​ setAttribute() 设置元素属性

​ childNodes() 访问子节点

​ parentNode() 访问父节点

​ createElement() 创建元素节点

​ createTextNode() 创建文本节点

​ insertBefore() 插入节点

​ removeChild() 删除节点

​ offsetHeight() 网页尺寸

​ scrollHeight() 网页尺寸 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p name="pn">Hello</p>
		<p name="pn">Hello</p>
		<p name="pn">Hello</p>
		<p name="pn">Hello</p>
		<a id="aid" title="得到了A标签的属性">Hello</a>
		<a id="aid2">aid2</a>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<div id="div">
			<p id="pid">div的p元素</p>
		</div>
		<script>
			function getName(){
				var count = document.getElementsByTagName("p");
				alert(count.length);
				var p = count[0];
				p.innerHTML = "World";
			}
			
			function getAttr(){
				var anode = document.getElementById("aid");
				var attr = anode.getAttribute("title");
				alert(attr);
			}
			
			function setAttr(){
				var anode = document.getElementById("aid2");
				anode.setAttribute("title","动态设置a的title属性");
				var attr = anode.getAttribute("title");
				alert(attr);
			}
			
			function getChildNode(){
				var childnode = document.getElementsByTagName("ul")[0].childNodes;
				alert(childnode.length);	
				alert(childnode[0].nodeType);
				alert(childnode[1].nodeType);
			}
			
			function getParentNode(){
				var div = document.getElementById("pid");
				alert(div.parentNode.nodeName);
			}
			
			function createNode(){
				var body = document.body;
				var input = document.createElement("input");
				input.type = "button";
				input.value = "按钮";
				body.appendChild(input);
			}
			
			function addNode(){
				var div = document.getElementById("div");
				var node = document.getElementById("pid");
				var newNode = document.createElement("p");
				newNode.innerHTML = "动态添加第一个p元素";
				div.insertBefore(newNode,node);
			}
			
			function removeNode(){
				var div = document.getElementById("div");
				var p = div.removeChild(div.childNodes[1]);
			}
			
			function getSize(){
				var width = document.body.offsetWidth||document.documentElement.offsetWidth;
				var height = document.body.offsetHeight||document.documentElement.offsetHeight;
				alert(width+","+height);
			}
			getSize();
		</script>
	</body>
</html>