JS整理
JavaScript 是脚本语言
document.getElementById("some id")。这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)（文档对象模型）
变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。
外部的 JavaScript
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js">
</script>
</body>
</html>
JavaScript 数据类型
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe",id:12,fullName : function(){ }}; // Object 通过对象字面量赋值
对象属性有两种寻址方法：firstName = person.firstName firstName = person["firstName"]
var carname; //carname变量为undefine
JavaScript 对象
创建对象方法：
这个例子创建了对象的一个新实例，并向其添加了四个属性：
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
或者
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
JavaScript 字符串
字符串可以是插入到引号中的任何字符。可以使用单引号或双引号：
var carname = "Volvo XC60";
var carname = 'Volvo XC60';
可以使用索引位置来访问字符串中的每个字符：
var character = carname[7];
可以在字符串添加转义字符来使用引号：
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
var x = "John";
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象
=== 为绝对相等，即数据类型与值都必须相等。
字符串方法
For/In 循环
var carname = {age:12,name:"xhs",sex:"女"};
for(i in carname){
document.write(carname[i]+"<br>");
}
JavaScript typeof, null, 和 undefined,instanceof,constructor
typeof 操作符
typeof "John" // 返回 string
typeof 3.14 // 返回 number
(x instanceof String) //返回true
可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
undefined 和 null 的区别
null 和 undefined 的值相等，但类型不等：
typeof null // object
null === undefined // false
null == undefined // true
JavaScript 类型转换
将数字转换为字符串
String(123) // 将数字 123 转换为字符串并返回
将布尔值转换为字符串
String(false) // 返回 "false"
将日期转换为字符串
String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
将字符串转换为数字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("99 88") // 返回 NaN
HTML 约束验证
| disabled | 规定输入的元素不可用 |
| max | 规定输入元素的最大值 |
| min | 规定输入元素的最小值 |
| pattern | 规定输入元素值的模式 |
| required | 规定输入元素字段是必需的 |
| type | 规定输入元素的类型 |
JavaScript JSON
JSON 数据
JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。
"name":"Runoob"
JSON 对象
JSON 对象保存在大括号内
{"name":"Runoob", "url":"www.runoob.com"}
JSON 数组
JSON 数组保存在中括号内。
"sites":[ {"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]
JSON 字符串转换为 JavaScript 对象
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
JavaScript 函数定义
函数声明
function myFunction(a, b) {
return a * b;
}
函数表达式
在函数表达式存储在变量后，变量也可作为一个函数使用：
以下函数实际上是一个 匿名函数 (函数没有名称)。
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
函数可作为一个值使用
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3);
函数可作为表达式使用：
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3) * 2;
函数是对象
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
// arguments.length 属性返回函数接收到参数的个数：
// 输出2
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
// toString() 将函数作为一个字符串返回：
// 输出function myFunction(a, b) { return a * b; }
JS闭包
闭包要解决的问题是：一个函数可以拥有私有变量，并且外部可以通过闭包访问该私有变量。
闭包其实是利用了一个变量退出作用域的时候，暂时没有被销毁，它的值还在，如果后面有变量也叫这个名字，那这个数据会被重新利用起来。你会发现，后面你使用的这个名字一样的变量是有初值的。
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
HTML DOM (文档对象模型)
查找 HTML 元素
- 通过 id 找到 HTML 元素
var x=document.getElementById("intro"); - 通过标签名找到 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
//返回的是HTMLCollection对象 - 通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");
//返回的是 NodeList 对象
改变 HTML 内容
语法：document.getElementById(id).innerHTML=新的 HTML
document.getElementById(id).innerHTML=新的 HTML
改变 HTML 属性
语法：document.getElementById(id).attribute=新属性值
document.getElementById("image").src="landscape.jpg";
改变 HTML 样式
语法：document.getElementById(id).style.property=新样式
document.getElementById("p2").style.fontSize="larger";
JavaScript HTML DOM EventListener
addEventListener() 方法
语法：element.addEventListener(event, function, useCapture);
//可以向一个元素添加多个事件，也可以向同一个元素添加不同类型的事件
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
JavaScript HTML DOM 元素 (节点)
JavaScript 计时事件
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- setTimeout() - 在指定的毫秒数后执行指定代码。
setInterval() 方法
语法：window.setInterval(function,milliseconds);
setInterval(function(){alert("Hello")},3000);
停止执行的方法
clearInterval(myVar);
setTimeout() 方法
语法：myVar= window.setTimeout(function, milliseconds);
setTimeout(function(){alert("Hello")},3000);
停止执行的方法
clearTimeout(myVar);
JavaScript Cookie
Cookie 是一些数据, 存储于你电脑上的文本文件中。以键值对存储。
格式：username=John Doe
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";
在 JavaScript 中, 可以使用以下代码来读取 cookie：
JavaScript 框架（库）
JavaScript 库 - jQuery、Prototype、MooTools。
jQuery
它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。
jQuery 同时提供 companion UI（用户界面）和插件。
