• 主页
  • 未分类
  • 历史记录_JS基础

历史记录_JS基础

日期：2020-5-18 鱼木 浏览：633次 评论：0条 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
    function displayDate(){
    document.getElementById("demo").innerHTML=Date();
    }
</script>
</head>
<body>
    <p id="demo">我的第一个JavaScript程序</p>
    <button type="button" onclick="displayDate()">显示日期</button>
</body>
</html>

直接写入HTML 输出流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <script>
    document.write("<h2>这是一个标题<h2>");
    </script>
</body>
</html>

对事件的反应
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
    <button type="button" onclick="alert('事件弹框')">点我</button>
</body>
</html>

改变HTML图像
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<script>    
function changeImage()
    {
        element=document.getElementById('myimage')
        if(element.src.match("bulbon"))
        {
            element.src="/images/pic_bulboff.gif";
        }else
        {
            element.src="/images/pic_bulbon.gif";
        }
    }
    function changeImage2(){
    var s = document.getElementById('myimage');
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="180" />
</body>
</html>

<script>
function changeImage(s){
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

改变 HTML 样式
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<script>
    function RedStyle(){
    x=document.getElementById("demo");
        x.style.color="#ff0000";
    }
</script>
<p id="demo">这是段落</p>
    <button type="button" onclick='RedStyle()' >点击变换</button>
</body>
</html>

验证输入
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<script>
    function CheckNumber(){
         var x=document.getElementById("MyTxt").value;
        if(x==""|isNaN(x))
        {
            alert("不是数字");
        }
        else
        {
            alert("是数字");
        }
    }
    function myFunction()
    {
        var x=document.getElementById("demo").value;
        if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
            alert("不是数字");
        }
    }
    </script>
    <p>输入验证是否是数字:</p>    
    <input type="text" id="MyTxt">
    <button type="button" onclick='CheckNumber()'>验证</button>
</body>
</html>

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部
也可以把脚本保存到外部文件中。外部 JavaScript 文件的文件扩展名是 .js。外部脚本不能包含 <script> 标签。

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

JavaScript 输出:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台

数组（Array）字面量 定义一个数组：
[40, 100, 1, 5, 25, 10]

对象（Object）字面量 定义一个对象：
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量 定义一个函数：
function myFunction(a, b) { return a * b;}

void((function(){
document.getElementById("email").value = "someone@example.com";
document.getElementById("password").value = "......";
document.getElementById("autoLogin").checked = 1;
document.getElementById("login").click();
})())

JavaScript 语句:
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<h1 id="MyHtml">我的网页</h1>
    <script>
    document.getElementById("MyHtml").innerHTML="现在是我的啦";
    </script>
</body>
</html>

分号 ;
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。

对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
document.write("你好\
世界!");

//JavaScript 注释
单行注释用双斜杠
多行注释以 /* 开始，以 */ 结尾。

声明变量:
var lastname="Doe", age=30, job="carpenter";
var lastname="Doe",
age=30,
job="carpenter";
var x,y,z=1;
x,y 为 undefined， z 为 1。

重新声明 JavaScript 变量
var carname="Volvo"; 
var carname;

JavScript字符串
var carname="Volvo XC60";
var carname='Volvo XC60';

JavaScript数字 
var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

JavaScript 数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];

JavaScript对象
var person={firstname:"John", lastname:"Doe", id:5566};
对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];

JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
function functionname()
{
    // 执行代码
}
function myFunction(var1,var2)
{
代码
}
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

function myFunction()
{
    var x=5;
    return x;
}

<body>
<p id="demo"></p>
<script>
function myFunction(a,b){
    return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</body>

JavaScript 事件
<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>

<body>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
</body>

常见的HTML事件
onchange    HTML 元素改变
onclick    用户点击 HTML 元素
onmouseover    用户在一个HTML元素上移动鼠标
onmouseout    用户从一个HTML元素上移开鼠标
onkeydown    用户按下键盘按键
onload    浏览器已完成页面的加载

var test = document.getElementById("test");
test.onclick = changeContent(){
    //......
}

JavaScript 字符串
var carname = "Volvo XC60";
var carname = 'Volvo XC60';
//你可以使用索引位置来访问字符串中的每个字符：
var character = carname[7];

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

var result1=5+5+"abc"; //结果将是"10abc"
var result2= ""+5+5+"abc"; //结果将是"55abc"

JavaScript typeof, null, 和 undefined
使用 typeof 操作符来检测变量的数据类型。
typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object,数组是一种特殊的对象类型
typeof {name:'John', age:34} // 返回 object

null
在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是object。
设置为 undefined 来清空对象:
var person = undefined;     // 值为 undefined, 类型为 undefined
var person;                  // 值为 undefined(空), 类型是undefined

undefined 和 null 的区别
null 和 undefined 的值相等，但类型不等：
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

constructor 属性返回所有 JavaScript 变量的构造函数。
可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):
function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
使用 constructor 属性来查看对象是否为日期 (包含字符串 "Date"):
function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

JavaScript 类型转换
将数字转换为字符串
String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回
x.toString()
(123).toString()
(100 + 23).toString()

将字符串转换为数字
Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0 
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

JavaScript 正则表达式
语法:
/正则表达式主体/修饰符(可选)
var patt = /runoob/i

<body>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);
    document.getElementById("demo").innerHTML = n;
}
</script>
</body>

search() 方法使用字符串
search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：
var str = "Visit Runoob!"; 
var n = str.search("Runoob");

replace() 方法使用字符串
replace() 方法将接收字符串作为参数：
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");

<body>
<p id = "demo">这是改变前</p>
    <button type="button" onclick="MyFunc()">点我</button>
    <script>
    function MyFunc(){
            x=document.getElementById("demo").innerHTML;
            y=x.replace("前","后");
            document.getElementById("demo").innerHTML=y;
        }
    </script>
</body>

JavaScript 调试
console.log() 方法
设置断点
debugger 关键字

JavaScript 严格模式(use strict)
"use strict" 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。
"use strict";
x = 3.14;       // 报错 (x 未定义)

JavaScript 表单

表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>

验证输入的数字
<body>
<h1>JavaScript 验证输入</h1>
<p>请输入 1 到 10 之间的数字：</p>
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x, text;
    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;

    // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "输入错误";
    } else {
        text = "输入正确";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>
</body>

表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：
<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>
Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。

JavaScript 表单验证 必填（或必选）项目
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>

E-mail 验证
<script>
function validateForm(){
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
        alert("不是一个有效的 e-mail 地址");
          return false;
    }
}
</script>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>

约束验证 DOM 方法
<body>
<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("demo").innerHTML = "输入正确";
    }
}
</script>
</body>

约束验证 DOM 属性...

JavaScript this 关键字
面向对象语言中 this 表示当前对象的一个引用
在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

JavaScript let 和 const
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
{ 
    var x = 2; 
}
// 这里可以使用 x 变量
{ 
    let x = 2;
}
// 这里不能使用 x 变量

变量提升
carName = "Volvo";    // 这里可以使用 carName 变量
var carName;

JSON相关函数
JSON.parse()    用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()    用于将 JavaScript 值转换为 JSON 字符串。

javascript:void(0) 含义
<a href="javascript:void(0)">单此处什么也不会发生</a>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>

href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

JavaScript 代码规范
变量名推荐使用驼峰法来命名(camelCase):
通常运算符 ( = + - * / ) 前后需要添加空格:
通常使用 4 个空格符号来缩进代码块：
一条语句通常以分号作为结束符。
将左花括号放在第一行的结尾。
左花括号前添加一空格。
将右花括号独立放在一行。
不要以分号结束一个复杂的声明。

对象定义的规则:
将左花括号与类名放在同一行。
冒号与属性值间有个空格。
字符串使用双引号，数字不需要。
最后一个属性-值对后面不要添加逗号。
将右花括号独立放在一行，并以分号作为结束符号。

每行代码字符小于 80
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE )

HTML 载入外部 JavaScript 文件
<script src="myscript.js">//H5支持
<script type="text/javascript" src="myscript.js">//旧代码

使用 JavaScript 访问 HTML 元素
var obj = getElementById("Demo")

函数表达式
var x = function (a, b) {return a * b};//匿名函数

<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>

Function() 构造函数
<script>
var myFunction = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

箭头函数
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

没有参数的函数应该写成一对圆括号:
() => {函数声明}

<p>IE11 及更早 IE 版本不支持箭头函数。</p>
<p id="demo"></p>
<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

JavaScript 函数参数
function myFunction(x, y) {
    y = y || 0;
}
如果y已经定义 ， y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false

ES6 支持函数带有默认参数，就判断 undefined 和 || 的操作
function myFunction(x, y = 10) {
    return x + y;
}

arguments 对象
JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

JavaScript 函数调用
作为一个函数调用
function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);   

myFunction() 和 window.myFunction() 是一样的：

函数作为方法调用
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

使用构造函数调用函数
// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;    

作为函数方法调用函数
在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。
function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）

JavaScript 闭包
JavaScript 变量可以是局部变量或全局变量。私有变量可以用到闭包。

变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

JavaScript 内嵌函数

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}
如果我们能在外部访问 plus() 函数，这样就能解决计数器的困境。
我们同样需要确保 counter = 0 只执行一次。

JavaScript 闭包
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();
// 计数器为 3

JavaScript HTML DOM
查找 HTML 元素
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

通过 id 查找 HTML 元素
var x=document.getElementById("intro");

通过标签名查找 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");

JavaScript HTML DOM - 改变 HTML
改变 HTML 输出流
<script>
document.write(Date());
</script>
绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

改变 HTML 属性
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>

JavaScript HTML DOM - 改变CSS
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>

使用事件
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>

JavaScript HTML DOM 事件
对事件做出反应
HTML 事件属性
使用 HTML DOM 来分配事件
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">
<script>
function checkCookies(){
    if (navigator.cookieEnabled==true){
        alert("Cookies 可用")
    }
    else{
        alert("Cookies 不可用")
    }
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
</body>

onchange 事件
onchange 事件常结合对输入字段的验证来使用。
<body>
<script>
function myFunction(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>
</body>

onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
<body>
<script>
function lighton(){
    document.getElementById('myimage').src="bulbon.gif";
}
function lightoff(){
    document.getElementById('myimage').src="bulboff.gif";
}
</script>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>

JavaScript HTML DOM EventListener

addEventListener() 方法
在用户点击按钮时触发监听事件：
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。

语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

<body>
<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}
</script>
</body>

<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>
</body>

向同一个元素中添加多个事件句柄
addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
你可以向同个元素添加不同类型的事件：
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
<body>
<p>实例在 window 对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>

传递参数
当传递参数值时，使用"匿名函数"调用带参数的函数：
<body>
<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>
</body>

事件冒泡或事件捕获？
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
<body>
<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
    <p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
    <p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>
</body>

removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
<body>
<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
</body>

浏览器支持
 IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function);
element.detachEvent(event, function);

跨浏览器解决方法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

JavaScript HTML DOM 元素 (节点)
创建新的 HTML 元素 (节点) - appendChild()
用于添加新元素到尾部。
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");//创建 <p> 元素:
var node = document.createTextNode("这是一个新的段落。");//为 <p> 元素创建一个新的文本节点：
para.appendChild(node);//将文本节点添加到 <p> 元素中：
var element = document.getElementById("div1");//查找已存在的元素：
element.appendChild(para);//添加到已存在的元素中:
</script>
</body>

创建新的 HTML 元素 (节点) - insertBefore()
将新元素添加到开始位置
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
</body>

移除已存在的元素
要移除一个元素，你需要知道该元素的父元素。
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
</body>

替换 HTML 元素 - replaceChild()
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

JavaScript HTML DOM 集合(Collection)
如何向文档中添加和移除元素(节点)。
HTMLCollection 对象
getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象类似包含 HTML 元素的一个数组。
var x = document.getElementsByTagName("p");
访问第二个 <p> 元素可以是以下代码:
y = x[1];//以 0 为起始位置)

HTMLCollection 对象 length 属性
HTMLCollection 对象的 length 属性定义了集合中元素的数量。
实例
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
实例
修改所有 <p> 元素的背景颜色:
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}
注意
HTMLCollection 不是一个数组！
HTMLCollection 看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

JavaScript HTML DOM 节点列表
NodeList 对象是一个从文档中获取的节点列表 (集合) 。
NodeList 对象类似 HTMLCollection 对象。
一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

以下代码选取了文档中所有的 <p> 节点：
实例
var myNodeList = document.querySelectorAll("p");
访问第二个 <p> 元素可以是以下代码:
y = myNodeList[1];

NodeList 对象 length 属性
NodeList 对象 length 属性定义了节点列表中元素的数量。
实例
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

length 属性常用于遍历节点列表。
实例
修改节点列表中所有 <p> 元素的背景颜色:
var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。
节点列表不是一个数组！
节点列表看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

pcoll=document.querySelectorAll("p")
plist=document.getElementsByTagName("p")
以上 pcoll 返回的就是固定的值。
而获取 plist 后, 若 html 页面有变化且刚好添加或移除了 p 标签, 此时plist也会跟着变。

JavaScript 对象
所有事物都是对象
对象只是一种特殊的数据。对象拥有属性和方法。
访问对象属性的语法是：
objectName.propertyName
var message="Hello World!";
var x=message.length;

访问对象的方法语法是:
objectName.methodName()
var message="Hello world!";
var x=message.toUpperCase();

创建 JavaScript 对象
有两种不同的方法：
定义并创建对象的实例
使用函数来定义对象，然后创建新的对象实例

创建直接的实例
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
替代语法（使用对象 literals）：
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用对象构造器
function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

创建 JavaScript 对象实例
一旦您有了对象构造器，就可以创建新的对象实例，就像这样：
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

把方法添加到 JavaScript 对象
function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;

    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}

myMother=new person("Sally","Rally",48,"green");
myMother.changeName("Doe");

JavaScript 类
JavaScript 是面向对象的语言，但 JavaScript 不使用类。
在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
JavaScript 基于 prototype，而不是基于类的。

JavaScript for...in 循环
JavaScript for...in 语句循环遍历对象的属性。
语法
for (variable in object)
{
    执行的代码……
}

循环遍历对象的属性：
实例
var person={fname:"John",lname:"Doe",age:25}; 
for (x in person)
{
    txt=txt + person[x];
}
//JohnDoe25

JavaScript prototype（原型对象）
所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。
在前面的章节中我们学会了如何使用对象的构造器（constructor）：
我们也知道在一个已存在的对象构造器中是不能添加新的属性的：
要添加一个新的属性需要在在构造器函数中添加：

prototype 继承
所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法：
Date 对象从 Date.prototype 继承。
Array 对象从 Array.prototype 继承。
Person 对象从 Person.prototype 继承。
所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

JavaScript Number 对象
JavaScript 只有一种数字类型。
可以使用也可以不使用小数点来书写数字。
所有 JavaScript 数字均为 64 位
JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。
精度
整数（不使用小数点或指数计数法）最多为 15 位。

八进制和十六进制
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。
实例
var y = 0377; 
var z = 0xFF;
绝不要在数字前面写零，除非您需要进行八进制转换。 
默认情况下，JavaScript 数字为十进制显示。

但是你可以使用 toString() 方法 输出16进制、8进制、2进制。

实例
var myNumber=128;
myNumber.toString(16);   // 返回 80
myNumber.toString(8);    // 返回 200
myNumber.toString(2);    // 返回 10000000

无穷大（Infinity）
当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。

myNumber=2;
while (myNumber!=Infinity)
{
    myNumber=myNumber*myNumber; // 重复计算直到 myNumber 等于 Infinity
}

<script>
var x = 2/0;
var y = -2/0;
document.write(x + "<br>");//Infinity
document.write(y + "<br>");//-Infinity
</script>

NaN - 非数字值
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。

数字可以是数字或者对象
数字可以私有数据进行初始化，就像 x = 123;
JavaScript 数字对象初始化数据， var y = new Number(123);

数字属性
...
数字方法
...

JavaScript 字符串（String） 对象
JavaScript 字符串
一个字符串用于存储一系列字符就像 "John Doe".
一个字符串可以使用单引号或双引号：
实例
var carname="Volvo XC60";
var carname='Volvo XC60';
你使用位置（索引）可以访问字符串中任何的字符：
实例
var character=carname[7];

在字符串中查找字符串
实例
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
如果没找到对应的字符函数返回-1
lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。

内容匹配
match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
实例
var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!"));

替换内容
replace() 方法在字符串中用某些字符替换另一些字符。
实例
str="Please visit Microsoft!"
var n=str.replace("Microsoft","Runoob");

字符串大小写转换
字符串大小写转换使用函数 toUpperCase() / toLowerCase():
实例
var txt="Hello World!";       // String
var txt1=txt.toUpperCase();   // txt1 文本会转换为大写
var txt2=txt.toLowerCase();   // txt2 文本会转换为小写

字符串转为数组
字符串使用split()函数转为数组:
实例
txt="a,b,c,d,e"   // String
txt.split(",");   // 使用逗号分隔
txt.split(" ");   // 使用空格分隔
txt.split("|");   // 使用竖线分隔 

特殊字符
Javascript 中可以使用反斜线（\）插入特殊符号，如：撇号,引号等其他特殊符号。

JavaScript Date（日期） 对象
getFullYear()
使用 getFullYear() 获取年份。
getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
setFullYear()
如何使用 setFullYear() 设置具体的日期。
toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
getDay()
如何使用 getDay() 和数组来显示星期，而不仅仅是数字。

创建日期
new Date() // 当前日期和时间
new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

设置日期
var myDate=new Date();
myDate.setFullYear(2010,0,14);
在下面的例子中，我们将日期对象设置为 5 天后的日期：
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

两个日期比较
var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
{
    alert("今天是2100年1月14日之前");
}
else
{
    alert("今天是2100年1月14日之后");
}

alert(new Date().format("yyyy年MM月dd日"));
alert(new Date().format("MM/dd/yyyy"));
alert(new Date().format("yyyyMMdd"));
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

JavaScript Array（数组） 对象
数组对象的作用是：使用单独的变量名来存储一系列的值。
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

什么是数组?
数组对象是使用单独的变量名来存储一系列的值。
var car1="Saab";
var car2="Volvo";
var car3="BMW";

创建一个数组
创建一个数组，有三种方法。
1: 常规方式:
var myCars=new Array(); 
myCars[0]="Saab";       
myCars[1]="Volvo";
myCars[2]="BMW";
2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
3: 字面:
var myCars=["Saab","Volvo","BMW"];

访问数组
通过指定数组名以及索引号码，你可以访问某个特定的元素。
以下实例可以访问myCars数组的第一个值：
var name=myCars[0];
以下实例修改了数组 myCars 的第一个元素:
myCars[0]="Opel";

在一个数组中你可以有不同的对象
所有的JavaScript变量都是对象。数组元素是对象。函数是对象。
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

数组方法和属性
使用数组对象预定义属性和方法：
var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值

创建新方法
原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。
实例：创建一个新的方法。
Array.prototype.myUcase=function(){
    for (i=0;i<this.length;i++){
        this[i]=this[i].toUpperCase();
    }
}

JavaScript Boolean（布尔） 对象
Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false）。

创建 Boolean 对象
Boolean 对象代表两个值:"true" 或者 "false"
var myBoolean=new Boolean();

JavaScript Math（算数） 对象
Math（算数）对象的作用是：执行常见的算数任务。

Math 对象
Math（算数）对象的作用是：执行普通的算数任务。
Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。
使用Math的属性/方法的语法：
var x=Math.PI;
var y=Math.sqrt(16);
注意： Math对象无需在使用这个对象之前对它进行定义。

算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值：
你可以参考如下Javascript常量使用方法：
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

算数方法
除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。
下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。
document.write(Math.round(4.7));
上面的代码输出为：5
下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：
document.write(Math.random());
上面的代码输出为：0.6939941809638104
下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数：
document.write(Math.floor(Math.random()*11));
上面的代码输出为：10

JavaScript RegExp 对象
RegExp：是正则表达式（regular expression）的简写。

语法
var patt=new RegExp(pattern,modifiers);
或更简单的方法
var patt=/pattern/modifiers;
模式描述了一个表达式模型。
修饰符(modifiers)描述了检索是否是全局，区分大小写等。
注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：
var re = new RegExp("\\w+");
var re = /\w+/;

RegExp 修饰符
修饰符用于执行不区分大小写和全文的搜索。
i - 修饰符是用来执行不区分大小写的匹配。
g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。
实例 1
在字符串中不区分大小写找"runoob"
var str = "Visit RUnoob";
var patt1 = /runoob/i;
以下标记的文本是获得的匹配的表达式：RUnoob
实例 2
全文查找 "is"
var str="Is this all there is?";
var patt1=/is/g;
实例 3
全文查找和不区分大小写搜索 "is"
var str="Is this all there is?";
var patt1=/is/gi;

test()
test()方法搜索字符串指定的值，根据结果并返回真或假。
实例
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
true
当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）
实例
var re = new RegExp("\\w+");

exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
下面的示例是从字符串中搜索字符 "e" ：
实例 1
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
e

JavaScript Window - 浏览器对象模型
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
与此相同：
document.getElementById("header");

Window 尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
实例
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

其他 Window 方法
一些其他方法：
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

全局变量不能通过 delete 操作符删除；而 window 属性上定义的变量可以通过 delete 删除
var num=123;
window.str="string";
delete num;
delete str;
console.log(num); //123

JavaScript Window Screen
window.screen 对象包含有关用户屏幕的信息。
Window Screen
window.screen对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

Window Screen 可用宽度
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
实例
返回您的屏幕的可用宽度：
<script>
document.write("可用宽度: " + screen.availWidth);
</script>
以上代码输出为：
可用宽度: 1920

Window Screen 可用高度
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
实例
返回您的屏幕的可用高度：
<script>
document.write("可用高度: " + screen.availHeight);
</script>
以上代码将输出：
可用高度: 999

JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

Window Location
window.location 对象在编写时可不使用 window 这个前缀。 一些例子：
一些实例:
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）

Window Location Href
location.href 属性返回当前页面的 URL。
document.write(location.href);

Window Location Pathname
location.pathname 属性返回 URL 的路径名。
document.write(location.pathname);

Window Location Assign
location.assign() 方法加载新的文档。
<script>
function newDoc(){
    window.location.assign("https://www.runoob.com")
}
</script>
</head>
<body>
<input type="button" value="加载新文档" onclick="newDoc()">
</body>

JavaScript Window History
window.history 对象包含浏览器的历史。
Window History
window.history对象在编写时可不使用 window 这个前缀。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
一些方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
window.history.forward()
除此之外可以用 history.go() 这个方法来实现向前，后退的功能。
history.go(1);//前进一个页面
history.go(-1);//后退一个页面
history.go(0);//刷新页面

JavaScript Window Navigator
window.navigator 对象包含有关访问者浏览器的信息。
实例
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script> 

警告!!!
来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统

JavaScript 弹窗
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框
警告框经常用于确保用户可以得到某些信息。
alert("你好，我是一个警告框！");

确认框
确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。
当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。
var r=confirm("按下按钮");
if (r==true)
{
    x="你按下了\"确定\"按钮!";
}
else
{
    x="你按下了\"取消\"按钮!";
}

提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!="")
{
    x="你好 " + person + "! 今天感觉如何?";
    document.getElementById("demo").innerHTML=x;
}

换行
弹窗使用 反斜杠 + "n"(\n) 来设置换行。
alert("Hello\nHow are you?");

JavaScript 计时事件
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

setInterval() 方法
实例
每三秒弹出 "hello" ：
setInterval(function(){alert("Hello")},3000);

实例
显示当前时间
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}

如何停止执行?
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
<body>
<p>页面上显示时钟：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(myVar);
}
</script>
</body>

setTimeout() 方法
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
实例
等待3秒，然后弹出 "Hello":
setTimeout(function(){alert("Hello")},3000);

如何停止执行?
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

var myVar;
function myFunction()
{
    myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
    clearTimeout(myVar);
}

JavaScript Cookie
Cookie 用于存储 web 页面的用户信息。

使用 JavaScript 创建Cookie
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
JavaScript 中，创建 cookie 如下所示：
document.cookie="username=John Doe";
您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

使用 JavaScript 读取 Cookie
在 JavaScript 中, 可以使用以下代码来读取 cookie：
var x = document.cookie;

使用 JavaScript 修改 Cookie
在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
旧的 cookie 将被覆盖。

使用 JavaScript 删除 Cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
注意，当您删除时不必指定 cookie 的值。

Cookie 字符串
document.cookie 属性看起来像一个普通的文本字符串，其实它不是。
即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。
如果您设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，

JavaScript Cookie 实例
在以下实例中，我们将创建 cookie 来存储访问者名称。

设置 cookie 值的函数
首先，我们创建一个函数用于存储访问者的名字：
function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

获取 cookie 值的函数
然后，我们创建一个函数用户返回指定 cookie 的值：
function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

检测 cookie 值的函数
如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：
function checkCookie()
{
  var username=getCookie("username");
  if (username!="")
  {
    alert("Welcome again " + username);
  }
  else 
  {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
    {
      setCookie("username",username,365);
    }
  }
}

引用 jQuery
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js">
</script>

jQuery 描述
主要的 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。
jQuery 允许您通过 CSS 选择器来选取元素。

JavaScript 方式：
function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
}
onload=myFunction;

等价的 jQuery 是不同的：

jQuery 方式：
function myFunction()
{
    $("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);//HTML DOM 文档对象被传递到 jQuery ：$(document)。
当您向 jQuery 传递 DOM 对象时，jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。
jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。

测试 jQuery
实例:
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
    $("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>

实例:
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
    $("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>

JavaScript - 测试 Prototype
测试 JavaScript 框架库 - Prototype
引用
<script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js"></script>

Prototype 描述
Prototype 提供的函数可使 HTML DOM 编程更容易。
与 jQuery 类似，Prototype 也有自己的 $() 函数。
$() 函数接受 HTML DOM 元素的 id 值（或 DOM 元素），并会向 DOM 对象添加新的功能。
与 jQuery 不同，Prototype 没有用以取代 window.onload() 的 ready() 方法。相反，Prototype 会向浏览器及 HTML DOM 添加扩展。

JavaScript 方式：
function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello Prototype";
}
onload=myFunction;
等价的 Prototype 是不同的：

Prototype 方式：
function myFunction()
{
    $("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);

Event.observe() 接受三个参数：
您希望处理的 HTML DOM 或 BOM（浏览器对象模型）对象
您希望处理的事件
您希望调用的函数

测试 Prototype
Example
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js">
</script>
<script>
function myFunction()
{
    $("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

Example
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js">
</script>
<script>
function myFunction()
{
    $("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
正如您在上面的例子中看到的，与 jQuery 相同，Prototype 允许链式语法。
链接（Chaining）是一种在同一对象上执行多个任务的便捷方法。

相关推荐

扫描二维码，在手机上阅读

网友评论（0）

站长资料

网站: 鱼木博客
联系: 点击这里给我发消息
如有问题请联系站长

最新微语

博客迁移完成

2022-07-01 14:48

分类