说白了，JavaScript 对于实现网页中的各种效果都是通过控制 DOM 来实现的，这应该是这本书要讲的核心内容。

所谓 DOM，是英文 Document Object Model 的首字母缩写，中文可以译作“文档对象模型”。

Document ( 文档 ) 是一切开始的基本，没有 Document 也就无从谈起 DOM。

Object ( 对象 ) 所指的是 JavaScript 的对象，本书大部分只讨论 document 对象的属性和方法。

Model ( 模型 ) 就是网站内容的表现形式，网页当前代码的结构。

DOM 代表着被加载到浏览器窗口里的当前网页，浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过 JavaScript 去读取这张地图。

如何通过 JavaScript  控制 DOM 呢？

其实讲起来理论很简单

1. 查找网页中要修改的元素节点。

2. 然后能过各种方法进行操作（包括添加，修改，删除）

现在来说上面提到的第一点

查找网页中的目标元素

方法有 getElementById , getElementsByTagName , 这也是 DOM 操作中很重要的两个方法。这两个方法的具体使用方法请在 google 中自己搜索。（请注意 JavaScript  语言是区分大小写的，所以写成 GetElementById 或者 getElementbyid 是不行的。 ）

现在来说上面提到的第二点

操作网页中的 DOM 的元素，这个地方还是用实例的方法比较好说

例一：在页面中添加元素

var example = document.getElementById( “example ” ); // 查找页面中 id 为 example 的元素节点。

var p = document.createElement(“p”); // 创建一个 p 元素。

var text = document.createTextNode(“这里是要添加的文本”); // 创建添加文本

p.appendChild( text  );  // 将 text 文本添加到 p 元素里

example.appendChild( p ); // 将 p 元素添加到 id 为 example 的元素中

然后执行此函数就可以了。

 

例二：通过获取页面中目标元素的属性值并把该值赋予其它元素的方法来实现页面元素的修改

var example = document.getElementById( “example ” );

var example_a = example.document.getElementsByTagName( “a” ); // 获取页面中 id 为 example 的元素节点里的链接元素。

var link = example_a.getAttribute(“href”); // 获取目标元素的 href 值，也就是链接地址。

var holder = document.getElementById( “holder” ); // 获取页面中 id 为 holder 的元素节点

holder.setAttribute( “href”,link );  // 将 link 通过 setAttribute 方法赋予 holder 的 href 属性

 

更多 DOM 操作，请 点击 这里。

1.指定页面的宽度和其它参数，在meta定义可以使得页面宽度让iPhone知道限定屏幕宽度代码如下:

<meta name=”viewport” content=”width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/>

看字面理解就是：宽度320，默认比例1.0，最大放大比例1.0，用户不能放大，如果想实现缩放效果，可以细节调整比例，设置缩放比例即可。

把以上元素应用在页面就可以啦~~网页编码gbk和utf-8无所谓

2.设置页面加载完成的位置，safari浏览器上面有个搜索框，进入网站后就显示在那很不友好，你可以加上下面的代码，向下移动一下网页就好了，体验很好

实现的脚本

3.让用户访问www页面自动跳转到iPhone页面，php方式：$_SERVER[HTTP_USER_AGENT]的值是：
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; zh-cn) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3
确认一下有没有iPhone字样也许就可以了

js方式：

JavaScript是基于原型的编程语言，但也有完整的面向对象特性。同时其书写风格灵活多变，包括函数式编程、原型风格编程和面向对象风格编程。

从代码风格来看，封装类型分为类式的封装和原型式的封装。
这里我们使用“人”（Person）的例子，构造一个“人”的类，人有名字，人可以“吃饭”、“睡觉”、“走路”等等

1,类式封装

最直接最简单的封装方法是将人名,吃饭,睡觉等属性和动作封装在Person类中.
<script>
/*定义一个"人"的类,人有名字,人也可以吃饭,睡觉,走路
*我们用类式封装来实现
*但是所有成员都是公有的,任何人都能够在外部访问name,eat,sleep,walk
*/

//Person类
var Person = function(name){

//公有成员
this.name = name;

//公有方法
this.eat = function(){
alert(this.name+’ is eating sth’);
};
this.sleep = function(){
alert(this.name+’ is sleeping’);
};
this.walk = function(){
alert(this.name+’ is walking’);
};
};

var jay = new Person(’jay’);
</script>

可以通过firebug看到“jay”的成员和属性。

但这样的代码有一个问题：不安全，因为类成员在任意命名空间都可以访问到。我们需要做改进：增加私有成员和私有方法。

通常约定私有成员变量用"_"开始，比如_value表示这是一个私有变量。

<script>
/*定义一个"人"的类,人有名字,人也可以吃饭,睡觉,走路
 *针对类式封装，增加私有成员,私有方法
 *这里增加的_setNickName和_getNickName只是说明私有方法的用法,实际中可以完全省略
 */

var Person = function(name){

	//私有成员
	var _nickname = 'nothing';
	//公有成员
	this.name = name;

	//私有方法
	var _setNickName = function(nickname){
		_nickname = nickname;
	};
	var _getNickName = function(){
		return _nickname;
	};

	//公共方法
	this.eat = function(){
		alert(this.name+' is eating sth');
	};
	this.sleep = function(){
		alert(this.name+' is sleeping');
	};
	this.walk = function(){
		alert(this.name+' is walking');
	};
	this.setNickName = function(nickname){//接口
		_setNickName(nickname);
	};
	this.getNickName = function(){//接口
		return _getNickName();
	};
};

var jay = new Person('jay');
</script>

这样就可以通过Person提供的接口对私有成员进行访问。

类式封装的优点：思路很清晰，适合那些有c++或java编程经验的人。

类式封装的缺点：内存利用不科学，因为每个实例都拥有各自的成员方法，而各自的方法是一样的，我们希望每个实例都共享一个方法。而成员受运行时影响比较大，则希望每个实例的成员可以占据单独的内存。原型式封装弥补了这个缺陷，原型使得每个实例都共享一份原型方法。

2，原型式封装

<script>
/*定义一个"人"的类,人有名字,人也可以吃饭,睡觉,走路
 *
 *原型式封装，每个实例都共享一份原型,(jjb.eat == jay.eat) = true
 */

var Person = function(name){
	var _nickname = 'nothing';
	this.name = name;

	this.setNickName = function(nickname){//接口方法
		_nickname = nickname;
	};
	this.getNickName = function(){//接口方法
		return _nickname;
	};
};

//原型
Person.prototype = {
	eat:function(){
		alert(this.name+' is eating sth');
	},
	sleep:function(){
		alert(this.name+' is sleeping');
	},
	walk:function(){
		alert(this.name+' is walking');
	}
};

var jay = new Person('jay');
var jjb = new Person('jjb');
</script>

这样jjb.eat == jay.eat，说明实例的eat是到Person的prototype.eat的引用.

原型式封装的优点：内存利用合理，缺点：初学难理解。

这种编码风格要注意的：1，方法在原型中定义，成员在类中定义，2，私有变量和接口函数写在类定义中，因为接口通常使用到私有变量。

3，静态变量

在C++，JAVA和C#中有类静态变量，如何在js中实现?

<script>
/*
 * 给“人”中定义一个静态变量“人数”，这样每个“人”的实例都共享一个“人”的名为“人数”的成员
 */

var Person = (function(){

	//私有静态成员
	var numOfPersons = 0;

	return function(name){
		//公有成员
		this.name = name;
		//私有成员
		var _nickname = 'nothing';

		//接口方法
		this.setNickName = function(nickname){
			_nickname = nickname;
		};
		this.getNickName = function(){
			return _nickname;
		};
		this.setNum = function(num){
			numOfPersons = num;
		};
		this.getNum = function(){
			return numOfPersons;
		};
	};

})();

//原型
Person.prototype = {
	eat:function(){
		alert(this.name+' is eating sth');
	},
	sleep:function(){
		alert(this.name+' is sleeping');
	},
	walk:function(){
		alert(this.name+' is walking');
	}
};

var jay = new Person('jay');
var jjb = new Person('jjb');

</script>

在这个例子中，jjb.getNum() = 0;jjb.setNum(3);jay.getNum() = 3;

在JavaScript的帮助手册里查到的解释是这样的：

一种 JScript 函数，具有两个特殊的性质：

• 由 new 运算符来调用此函数。
• 通过 this 关键字将新创建对象的地址传递到此函数。

请使用构造函数来初始化新的对象。

在JS权威指南里看的解释是：

New创建了一个新的没有任何属性的对象，然后调用该函数，把新的对象作为this关键字的值传递。设计来和new运算符一起使用的函数叫做构造函数 ( constructor function 或 constructor )。

下面来创建一个构造函数然后使用 new 运算符调用它两次来创建两个新的对象：

function Rectangle ( w , y ){

this.widht = w;

this.height = h;

}

var rect1 = new Rectangle ( 2 , 4 );  // rect1 = { width = 2, heithg = 4 };

var rect2 = new Rectangle ( 8.5 , 11 );  // rect1 = { width = 8.4, heithg = 11 };

this 语句，来源 JavaScript 的帮助手册

this 语句@import url(../html-vss/msdnie4a.css);指当前对象。

this.property

必选的 property 参数指的是对象的属性。

说明

this 关键字通常在对象的 构造函数中使用，用来引用对象。

示例

在下面示例中，this 指的是新创建的 Car 对象，并给三个属性赋值。

function Car(color, make, model){
  this.color = color;
  this.make = make;
  this.model = model;
}