转载:菜鸟教程
JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
JavaScript 字面量
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
字符串（String）字面量 可以使用单引号或双引号:
数组（Array）字面量 定义一个数组：[40, 100, 1, 5, 25, 10]
对象（Object）字面量 定义一个对象：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数（Function）字面量 定义一个函数：function myFunction(a, b) { return a * b;}
JavaScript 语句
JavaScript 语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "你好 Dolly" ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的网页</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML = "你好 Dolly";
</script>
</body>
</html>
JavaScript 数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
var cars=new Array("Saab","Volvo","BMW");
JavaScript 对象
var person={firstname:"John", lastname:"Doe", id:5566};
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
访问对象属性
//对象定义
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
//访问对象属性
person.lastName;
person["lastName"];
JavaScript 事件
image.png
typeof 操作符
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
JavaScript try 和 catch
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}
JavaScript 调试
console.log() 方法
设置断点
JavaScript 表单
document.forms["myForm"]["fname"].value; //获取表单字段值
JavaScript 异步编程
回调函数
//案例一
function print() {
document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);
//案例二
setTimeout(function () {
document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
//案例三
setTimeout(function () {
console.log("1");
}, 1000);
console.log("2");
Promise 的使用
Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。
当 Promise 被构造时，起始函数会被异步执行：
改变 HTML 样式
document.getElementById(id).style.property=新样式
document.getElementById('id1').style.color='red'
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
</script>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<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>
onmousedown、onmouseup 以及 onclick 事件
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
创建新的 HTML 元素 (节点) - appendChild()
<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");
element.appendChild(para);
</script>
移除已存在的元素
<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>
替换 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>
prototype 继承
.prototype. 链接继承
Window 对象
window.document.getElementById("header");
与此相同：
document.getElementById("header");
其他 Window 方法
一些其他方法：
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
JavaScript Cookie
创建Cookie
document.cookie="key=value";
读取 Cookie
var x = document.cookie;
修改 Cookie
document.cookie="key=value2";
删除 Cookie
document.cookie = "key=";
网友评论