JS整理

最新推荐文章于 2022-11-23 23:01:54 发布

weixin_34356138

最新推荐文章于 2022-11-23 23:01:54 发布

阅读量498

点赞数 4

文章标签： json javascript ui ViewUI

原文链接：http://www.cnblogs.com/eggtomcato/p/10369618.html

版权

JavaScript 是脚本语言

document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)（文档对象模型）

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

外部的 JavaScript

<!DOCTYPE html>

<html>

<body>

</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 undefined             // 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);