JavaScript基础知识
Posted gdwkong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript基础知识相关的知识，希望对你有一定的参考价值。
一、javascript事件详解
1、事件流：描述的是在页面中结束事件的顺序
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
2、事件的处理：
①html事件处理：直接添加到HTML结构中
<body>
<div id="div">
<button id="btn" onclick="demo()">按钮</button>
</div>
<script>
function demo() {
alert("Hello html事件处理");
}
</script>
</body>
②DOMO级事件处理：把一个函数赋值给一个事件处理程序属性
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){alert("Hello DOMO事件出现程序1")}//设置事件处理
btn1.onclick = function(){alert("Hello DOMO事件出现程序2")}//前一个被覆盖
btn1.onclich = null;//移除事件处理
</script>
</body>
③DOM2级事件处理：
addEventListener("事件名"，"事件处理函数"，"布尔值")；
true：事件捕获
false：事件冒泡<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",demo1);//不会被覆盖，依次执行
btn1.addEventListener("click",demo2);
function demo1(){
alert("Hello DOM2级事件出现程序1")
}
function demo2(){
alert("Hello DOM2级事件出现程序2")
}
btn1.removeEventListener("click",demo2);//移除事件2
</script>
</body>
removeEventListener();
④IE事件处理程序
attachEvent
datachEvent
1 <body>
2 <div id="div">
3 <button id="btn1">按钮</button>
4 </div>
5 <script>
6 var btn1 = document.getElementById("btn1");
7 if(btn1.addEventListener){
8 btn1.addEventListener("click",demo);
9 }else if(btn1.attachEvent){
10 btn1.attachEvent("onclick",demo);
11 }else{
12 btn1.onclick = demo();
13 }
14 function demo(){
15 alert("Hello DOM2级事件出现程序2")
16 }
17 </script>
18 </body>
3、事件对象：在触发DOM事件的时候都会产生一个对象
①事件对象event：
- type：获取事件类型
- target：获取事件目标
-
1 <body> 2 <div id="div"> 3 <button id="btn1">按钮</button> 4 </div> 5 <script> 6 var btn1 = document.getElementById("btn1"); 7 btn1.addEventListener("click",show); 8 function show(event) { 9 alert(event.type);//获取对象类型，如click 10 alert(event.target);//获取事件目标，如[object HTMLButtonElement] 11 } 12 </script> 13 </body> - stopPropagation（）：阻止事件冒泡
- preventDefault（）：阻止事件默认行为
-
1 <body> 2 <div id="div"> 3 <button id="btn1">按钮</button> 4 <a id="aid" href="http://www.hao123.com">好123</a> 5 </div> 6 <script> 7 document.getElementById("btn1").addEventListener("click",showTarget); 8 document.getElementById("div").addEventListener("click",showDiv); 9 document.getElementById("aid").addEventListener("click",showA); 10 function showTarget(event) { 11 alert(event.target); 12 event.stopPropagation();//阻止事件冒泡,即点击按钮时，阻止事件传递到div（阻止触发div） 13 } 14 function showDiv() { 15 alert("div") 16 } 17 function showA(event) { 18 event.stopPropagation();//跳转，但阻止向上传递（阻止触发div） 19 event.preventDefault();//阻止事件默认行为，如点击链接时跳转 20 } 21 </script> 22 </body>
二、JavaScript内置对象
1、对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
每个对象带有属性和方法的特殊数据类型。
JavaScript 允许自定义对象
2、创建 JavaScript 对象
通过 JavaScript，您能够定义并创建自己的对象。
创建新对象有两种不同的方法：
- 定义并创建对象的实例
- 使用函数来定义对象，然后创建新的对象实例
-
<body> <!--创建对象--> <script> // 创建对象方式一 // people = new Object(); // people.name = "lilei"; // people.age = "15"; // people ={name:"lilei",age:"15"};//上三行可合并写此方式 // document.write("name:"+people.name+" age:"+people.age); // 创建对象方式二 function people(name,age) { this.name=name;//this 指明对象 this.age = age; } son = new people("lilei",15); document.write("name:"+son.name+"age:"+son.age); </script> </body>
3、String字符串对象
字符串可以存储一系列字符，如 "John Doe"。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号；
①字符串属性
|
属性 |
描述 |
|---|---|
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
②字符串常见方法
| 方法 | 描述 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| toUpperCase() | 把字符串转换为大写 |
| toLowerCase() | 把字符串转换为小写 |
| split() | 把字符串分割为子字符串数组 |
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toString() | 返回字符串对象值 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
4、Date 对象
Date 对象用于处理日期与实际。
①Date 对象属性
|
属性 |
描述 |
|---|---|
| constructor | 返回对创建此对象的 Date 函数的引用。 |
| prototype | 使您有能力向对象添加属性和方法。 |
②常用方法：
-
- Date() ：获得当前的时间。
- getFullYear()：使用 getFullYear() 获取年份。
- getTime()：getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
- setFullYear()：如何使用 setFullYear() 设置具体的日期。
- toUTCString()：如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
- getDay()：如何使用 getDay() 和数组来显示星期，而不仅仅是数字。
- Display a clock：如何在网页上显示一个钟表。
-
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <script> 7 function startTime(){ 8 var today=new Date(); 9 var h=today.getHours(); 10 var m=today.getMinutes(); 11 var s=today.getSeconds();// 在小于10的数字前加一个‘0’ 12 m=checkTime(m); 13 s=checkTime(s);
document.getElementById(‘txt‘).innerHTML=h+":"+m+":"+s; 14 t=setTimeout(function(){startTime()},500); 15 } 16 function checkTime(i){ 17 if (i<10){ 18 i="0" + i; 19 } 20 return i; 21 } 22 </script> 23 </head> 24 <body onload="startTime()"> 25 <div id="txt"></div> 26 </body> 27 </html>
5、 Array（数组） 对象
数组对象是使用单独的变量名来存储一系列的值。
①创建数组方法：
- 常规方式:
var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW";
- 简洁方式:var myCars=new Array("Saab","Volvo","BMW");
- 字面:var myCars=["Saab","Volvo","BMW"];
②数组的属性
| 属性 | 描述 |
|---|---|
| constructor | 返回创建数组对象的原型函数。 |
| length | 设置或返回数组元素的个数。 |
| prototype | 允许你向数组对象添加属性或方法。 |
③常用方法
| 方法 | 描述 |
| concat() | 连接两个或更多的数组，并返回结果。 |
| sort() | 对数组的元素进行排序。 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reverse() | 反转数组的元素顺序。 |
//升序排列
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
//降序排列
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
6、Math对象
Math 对象用于执行数学任务。
使用Math的属性/方法的语法：
var x=Math.PI;
var y=Math.sqrt(16);
round():如何使用 round()。
random():使用 random() 来返回 0 到 1 之间的随机数。使用parstInt(Math.random()*10)产生0-10间的随机整数。
max(): max() 来返回两个给定的数中的较大的数。
min():使用 min() 来返回两个给定的数中的较小的数。
三、JavaScript DOM对象控制HTML元素详解
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
1、常用方法：
| 方法 | 描述 |
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByName() | 返回包含带有指定name名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| childNodes() | 访问子节点 |
| parentNode（） | 访问父节点 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
| offsetHeight | 返回，任何一个元素的高度包括边框和填充，但不是边距 |
| scrollHeight | 返回整个元素的高度（包括带滚动条的隐蔽的地方） |
示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <p name="pn">Hello</p>
9 <p name="pn">Hello</p>
10 <p name="pn">Hello</p>
11 <p name="pn">Hello</p>
12 <a id="aid" title="得到了a标签的属性"></a>
13 <a id="aid2"></a>
14 <ul><li>1</li><li>2</li><li>3</li></ul>
15 <div id="div">
16 <p id="pid">div的p元素</p>
17 </div>
18 <script>
19 //获取元素
20 function getName() {
21 var count = document.getElementsByName("pn");//以name方式获取获取该类集合
22 //var count = document.getElementsByTagName("p");//以元素名获取集合
23 alert(count.length);
24 var p = count[2];
25 p.innerHTML = "World";
26 }
27 //获取节点属性
28 function getAttr() {
29 var anode = document.getElementById("aid");
30 var attr = anode.getAttribute("title");
31 alert(attr);
32 }
33 //设置节点属性
34 function setAttr() {
35 var anode = document.getElementById("aid2");
36 anode.setAttribute("title","动态标签title属性");
37 var attr = anode.getAttribute("title");
38 alert(attr);
39 }
40 //获取子节点
41 function getChildNode() {
42 var childnode = document.getElementsByTagName("ul")[0].childNodes;
43 alert(childnode.length);
44 alert(childnode[0].nodeType);
45 }
46 //获取父节点
47 function getParentNode() {
48 var div = document.getElementById("pid");
49 alert(div.parentNode.nodeName);
50 }
51 //创建节点
52 function createNode() {
53 var body = document.body;
54 var input = document.createElement("input");
55 input.type="button";
56 input.value="按钮";
57 body.appendChild(input);//添加节点到body末尾
58 }
59 //指定位置添加节点
60 function addNode() {
61 var div = document.getElementById("div");
62 var node = document.getElementById("pid");
63 var newnode = document.createElement("p");
64 newnode.innerHTML = "动态添加一个p元素";
65 div.insertBefore(newnode,node);
66 }
67 //删除节点
68 function removeNode() {
69 var div = document.getElementById("div");
70 var p