③其他 Window 方法
-
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
标签：class owa cloc end cin not attach run demo
一、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：
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>
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 | 使您有能力向对象添加属性和方法。 |
②常用方法：
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";
②数组的属性
| 属性 | 描述 |
|---|---|
| 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 = div.removeChild(div.childNodes[1]);
71 }
72 //获取页面尺寸
73 function getSize() {
74 var width = document.body.offsetWidth || document.documentElement.offsetWidth;
75 //前半句兼容性较好
76 var height = document.documentElement.offsetHeight;
77 alert(width+","+height);
78 }
79 getSize();
80 </script>
81 </body>
82 </html>
四、JavaScript浏览器对象
1、window对象
①window对象
②Window 尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
对于 Internet Explorer 8、7、6、5：
或者
③其他 Window 方法
①计时事件
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
②计时方法
window.setInterval("javascript function",milliseconds);
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
window.clearInterval(intervalVariable)
1 <body>
2 <button id="btn" onclick="stopTime()">按钮</button>
3 <p id="ptime"></p>
4 <script>
5 var mytime = setInterval(function () {
6 getTime();
7 },1000);
8 function getTime() {
9 var d = new Date();
10 var t = d.toLocaleTimeString();
11 document.getElementById("ptime").innerHTML=t;
12 }
13 function stopTime() {
14 //停止执行
15 clearInterval(mytime);
16 }
17 </script>
18 </body>
window.setTimeout("javascript 函数",毫秒数);
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
window.clearTimeout(timeoutVariable)
1 <body onload="myWin()">
2 <button id="btn" onclick="stopWin()">按钮</button>
3 <script>
4 var win;
5 function myWin(){
6 alert("hello")
7 //延迟3秒弹出,自调自，形成死循环
8 win = setTimeout(function(){myWin()},3000);
9 }
10 //停止执行
11 function stopWin() {
12 clearTimeout(win);
13 }
14 </script>
15 </body>
Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法，调用时可直接写该方法，省略window
3、History对象
①History对象
window.history 对象包含浏览器的历史（url）的集合。
②History方法：
1 <html>
2 <head>
3 <script>
4 function goBack(){
5 window.history.back()
6 }
7 </script>
8 </head>
9 <body>
10 <input type="button" value="Back" onclick="goBack()">
11 </body>
12 </html>
模拟跳转到登录界面再返回原先界面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="obindex.html">跳转</a> 9 </body> 10 </html>
//obindex.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 function safe() { 8 var name = document.getElementById("username").value; 9 if (name=="hello"){ 10 // 跳转到前一个页面 11 history.go(-1); 12 }else{ 13 alert("输入错误"); 14 } 15 } 16 </script> 17 </head> 18 <body> 19 <form> 20 <input type="text" id="username"> 21 <button id="btn" onclick="safe()">按钮</button> 22 </form> 23 </body> 24 </html>
4、JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
Location对象的属性：
<script>
document.write(location.pathname);
</script>
window.location.assign("http://www.w3cschool.cc")
5、JavaScript Window Screen
window.screen 对象包含有关用户屏幕的信息。
一些属性：
<script>
document.write("可用宽度: " + screen.availWidth);
</script>
五、面向对象
1、对象的创建
①创建一个没有任何属性的对象：
var obj = {};
②创建一个对象并设置属性及初始值：
var person = {name:"Angel",age:18,married:false};
③创建一个对象并设置属性和方法：
var speaker = {text:"Hello World",say:function(){aler(this.text)}};
④创建一个复杂的对象，嵌套其他对象和对象数组等：
var company =
{ name: "Microsoft", product: "softwares", chairman: {name: "Bill Gates", age: 53, Married: true}, employees: [{name: "Angel", age: 26, Married: false}, {name: "Hanson", age: 32, Marred: true}], readme: function() {document.write(this.name + " product " + this.product);} };
2、对象的另外一种创建方法（函数构造器）
使用new操作符结合一个函数的形式来创建对象。
function MyFunc() {}; //定义一个空函数
var anObj = new MyFunc(); //使用new操作符，借助MyFun函数，就创建了一个对象
上述创建方法等价于：
function MyFunc(){};
var anObj = {}; //创建一个对象
MyFunc.call(anObj); //将anObj对象作为this指针调用MyFunc函数
继承的体现：
1 function Person(name) { //带参数的构造函数
2 this.name = name; //将参数值赋给给this对象的属性
3 this.SayHello = function() {alert("Hello, I‘m " + this.name);}; //给this对象定义一个SayHello方法。
4 };
5
6 function Employee(name, salary){ //子构造函数
7 Person.call(this, name); //将this传给父构造函数
8 this.salary = salary; //设置一个this的salary属性
9 this.ShowMeTheMoney = function() {alert(this.name + " $" + this.salary);}; //添加ShowMeTheMoney方法。
10 };
11
12 var BillGates = new Person("Bill Gates"); //用Person构造函数创建BillGates对象
13 var SteveJobs = new Employee("Steve Jobs", 1234); //用Empolyee构造函数创建SteveJobs对象
14
15 BillGates.SayHello(); //显示：I‘m Bill Gates
16 SteveJobs.SayHello(); //显示：I‘m Steve Jobs
17 SteveJobs.ShowMeTheMoney(); //显示：Steve Jobs $1234
18
19 alert(BillGates.constructor == Person); //显示：true
20 alert(SteveJobs.constructor == Employee); //显示：true
21
22 alert(BillGates.SayHello == SteveJobs.SayHello); //显示：false
这段代码表明，函数不但可以当作构造函数，而且还可以带参数，还可以为对象添加成员和方法。其中的第9行，Employee构造函数又将自己接收的 this作为参数调用Person构造函数，这就是相当于调用基类的构造函数。第21、22行还表明这样一个意思：BillGates是由Person构造的，而SteveJobs是由Employee构造的。对象内置的constructor属性还指明了构造对象所用的具体函数！
3、原型
① JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对 象，因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”，那么由该函数构造出来的对象应该都会具 有这个“原型”的特性。事实上，在构造函数的prototype上定义的所有属性和方法，都是可以通过其构造的对象直接访问和调用的。也可以这么 说，prototype提供了一群同类对象共享属性和方法的机制。(类似于Java 中的继承)
function Person(name){
this.name = name; //设置对象属性，每个对象各自一份属性数据
};
Person.prototype.SayHello = function(){ //给Person函数的prototype添加SayHello方法。
alert("Hello, I‘m " + this.name);
}
var BillGates = new Person("Bill Gates"); //创建BillGates对象
var SteveJobs = new Person("Steve Jobs"); //创建SteveJobs对象
BillGates.SayHello(); //通过BillGates对象直接调用到SayHello方法
SteveJobs.SayHello(); //通过SteveJobs对象直接调用到SayHello方法
alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello，所以显示：true
程序运行的结果表明，构造函数的prototype上定义的方法确实可以通过对象直接调用到，而且代码是共享的。
②用这简单的掩盖机制实现了对象的“多态”性（类似于Java中的overrid）：
function Person(name){
this.name = name;
};
Person.prototype.company = "Microsoft"; //原型的属性
Person.prototype.SayHello = function(){ //原型的方法
alert("Hello, I‘m " + this.name + " of " + this.company);
};
var BillGates = new Person("Bill Gates");
BillGates.SayHello(); //由于继承了原型的东西，规规矩矩输出：Hello, I‘m Bill Gates
var SteveJobs = new Person("Steve Jobs");
SteveJobs.company = "Apple"; //设置自己的company属性，掩盖了原型的company属性
SteveJobs.SayHello = function(){ //实现了自己的SayHello方法，掩盖了原型的SayHello方法
alert("Hi, " + this.name + " like " + this.company + ", ha ha ha ");
};
SteveJobs.SayHello(); //都是自己覆盖的属性和方法，输出：Hi, Steve Jobs like Apple, ha ha ha
BillGates.SayHello(); //SteveJobs的覆盖没有影响原型对象，BillGates还是按老样子输出
③动态扩展性
function Person(name){
this.name = name;
};
Person.prototype.SayHello = function(){ //建立对象前定义的方法
alert("Hello, I‘m " + this.name);
};
var BillGates = new Person("Bill Gates"); //建立对象
BillGates.SayHello();
Person.prototype.Retire = function(){ //建立对象后再动态扩展原型的方法
alert("Poor " + this.name + ", bye bye!");
};
BillGates.Retire(); //动态扩展的方法即可被先前建立的对象立即调用
④信息的隐藏（类似于Java中的封装）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>菜鸟教程(runoob.com)</title>
6 </head>
7 <body>
8
9 <p>局部变量计数。</p>
10 <button type="button" onclick="myFunction()">计数!</button>
11 <p id="demo">0</p>
12 <script>
13 var add = (function () {
14 var counter = 0;
15 return function () {return counter += 1;}
16 })();
17 function myFunction(){
18 document.getElementById("demo").innerHTML = add();
19 }
20 </script>
21 </body>
22 </html>
⑤原型模型大致写法
//定义构造函数
function Person(name){
this.name = name; //在构造函数中定义成员
};
//方法定义到构造函数的prototype上
Person.prototype.SayHello = function(){
alert("Hello, I‘m " + this.name);
};
//子类构造函数
function Employee(name, salary){
Person.call(this, name); //调用上层构造函数
this.salary = salary; //扩展的成员
};
//子类构造函数首先需要用上层构造函数来建立prototype对象，实现继承的概念
Employee.prototype = new Person() //只需要其prototype的方法，此对象的成员没有任何意义！
//子类方法也定义到构造函数之上
Employee.prototype.ShowMeTheMoney = function(){
alert(this.name + " $" + this.salary);
};
var BillGates = new Person("Bill Gates");
BillGates.SayHello();
var SteveJobs = new Employee("Steve Jobs", 1234);
SteveJobs.SayHello();
SteveJobs.ShowMeTheMoney();
标签：class owa cloc end cin not attach run demo
原文地址：http://www.cnblogs.com/gdwkong/p/7381748.html
