在开发web应用前端的时候，需要明白以下的原理。
我们在浏览器里面看到的内容，其实是这样来的。在web服务器端，不管是什么也没文件，jsp也好asp也好，经过web server的解析以后都会生成标准的html文档，这个html文档就是我们要展现的内容的基本结构框架。其次，还有对该结构进行修饰和渲染的css样式文件和控制页面动作的js文件。我们的web root下面一般有3个目录，一个目录用来存放页面结构文件，一个目录用来存放页面样式的css文件，另一个目录用来存放控制页面行为的js文件，这也就是所谓的样式，行为和页面结构的分离原则。
这样我们就有3类文件被传送到浏览器客户端，html，css和js。浏览器负责将这3类文件组合然后显示出来。
这里要说明的是js文件。html本身只是一个遵循一定规范的文本文件，我们要对该文件的内容进行动作控制就必须要能够得到该文件中的各个元素，而且要能够对各个元素调用方法进行控制。dom规范就是解决这一个问题的。 dom规范定义了有哪些对象可以用来操作html文档中的元素，这些对象有哪些方法和属性。 浏览器实现了dom规范，但是不同的浏览器对dom规范的实现也是存在差异的。
也就是说，dom规范的实现实际上是实现了很多的用来操作dom元素的对象，我们通常称这些对象是dom对象或者js对象或者dom元素对象，总而言之，是对象（包括window和document对象）， 窗口对象（window对象）只是一个具体的dom对象或者说js对象。 dom规范的实现其实是实现了这些js类来操作html文档的api方法。 例如：我们调用document.getElementById('id')其实得到的就是一个js
dom元素对象，这个是浏览器帮我们返回的一个对象句柄，浏览器在解析完一个html文档后会创建很多的dom js对象的，我们可以通过调用这些js对象的方法来操作这些对象对应的html元素。 jquery则在原生js dom对象的基础上做了很多的封装，而且juery对象几乎能更加方便的进行所有js dom对象所能够进行的操作，其它的所有js框架也是一个道理，对原生的js dom对象进行封装以简化对html元素的操作。
具体细节参考以下内容：
javascript进阶之对象篇(7)网页中的javascript对象
1、废话
这部分将要描述浏览器为我们创建的对象。就是大家熟悉的window,document
等。一般书上都叫对象层次和文档对象模型。用dom标准来说，一般浏览器都实现
了0级DOM，关于DOM标准我感觉知道0级就可以了。对于DOM标准W3C早已定义了1级
，2级，三级也在标准化，问题是各个浏览器不完全实现，尤其是IE的事件模型，
完全不和DOM一致。（不过prototype.js已经做了很好的封装）
我这里不会讲dom接口，更不会讲各个浏览器的如何实现这些接口及区别。（
我也没这能力）。而是要猜测一下浏览器是怎么用javascript定义这些接口或类
的。（注意是猜测，个人理解）
2、引子
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(document);
alert(typeof(document));
//alert(Document);//出错
function desc(obj){
var ret='';
for(var key in obj){
ret+=key+':'+obj[key]+'</br>';
}
return ret;
}
document.writeln(desc(document));
//-->
</SCRIPT>
以上简单的javascript代码，不知大家提出过疑问没有。
首先，document是个javascript对象，谁创建了它。；document的类是什么
(function Document(){....} 可能是new Document()创建了它)；document有些
什么属性或方法。这些对象与html关系是什么。这些对象与dom标准有什么关系。
接下来将试着回答这些问题。我会侧重讲述我的理解思路，而不是具体哪个方法
，接口。
3、一个简单的例子的深入理解
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(document);//存在
alert(this.document==window.document);//true
//-->
</SCRIPT>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
alert(document.getElementById('xm'));//null
</SCRIPT>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
alert(document.getElementById('xm'));//null
</SCRIPT>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
alert(document.getElementById('xm'));//null
</SCRIPT>
<input type="text" id="xm">
<SCRIPT LANGUAGE="JavaScript">
alert(document.getElementById('xm'));//存在
</SCRIPT>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
alert(document.getElementById('xm'));//存在
</SCRIPT>
</HTML>
上面代码说明几个问题：
a、window\this就是我在变量篇里面提到过的窗体的全局对象，document是它的
一个属性，也叫全局属性。
b、window,document在html最前面已经存在了。我们可以随处使用document对象
。
c、对于输入框按钮这类html标记的javascript对象只有在解释过以后才能访问到
。当然我们编码用到这些对象时，都在body.onload或鼠标触发，一般不会出错。
d、例子中的document.getElementById('xm')javascript对象和我们自己创建的
javascript对象有什么区别呢？从应用角度看没有区别，只是自己定义的对象由
自己new来初始化，而document.getElementById('xm')有浏览器为我们初始化对
象，我们直接用方法得到句柄就可以了（有多种方法）。
e、我们怎么知道这些对象的用法呢？查看w3c DOM参考吗？我认为不用。
4、浏览器为我们创建的对象与我们自己定义的对象的区别。
<input type="text" id="xm" value="aaa">
<INPUT TYPE="button" value='click me' onclick="alert
(document.getElementById('xm').value);
alert(document.getElementById('myxm').value);">
<br>
<SCRIPT LANGUAGE="JavaScript">
<!--
function desc(obj){
var ret='';
for(var key in obj){
ret+=key+':'+obj[key]+'</br>';
}
return ret;
}
function MyText(id,value){
this.id=id;
this.outHtml='<input type=text id='+id+' value='+value+'>';
this.toString=function(){
return this.outHtml;
}
//...
//...
//...
}
//document.writeln(desc(document.getElementById('xm')));
var myText=new MyText('myxm','zkj');
document.writeln(myText);
//-->
</SCRIPT>
希望你仔细的看看上面代码的执行结果。可能你会得到更震撼的想法来。暂时我
有以下几个感想：
a、我们自己也可以写一个界面控件，如果把属性建立全的话，完全可以复原浏览
器的内建类。
b、反过来，对于浏览器为我们创建的对象，我们可以当成自己的对象一样使用。
看看prototype.js中，使用了内建对象的方法。
escapeHTML: function() {
var div = document.createElement('div');
var text = document.createTextNode(this);
div.appendChild(text);
return div.innerHTML;
},
unescapeHTML: function() {
var div = document.createElement('div');
div.innerHTML = this.stripTags();
return div.childNodes[0] ? div.childNodes[0].nodeValue : '';
},
c、大家可以打开描述注释，看看<input >到底包含哪些属性和方法。注意
outerHTML属性的值是什么,在网页上表示什么。可以看出javascript对象的
outerHTML属性就是html(xhtml)规范中的标签。这样给了我们写javascriptUI控
件的新思路，一个控件就是一个javascript对象（其实很多人都这样做了，但好
象都是innerHtml等等）。可以象asp.net或jsf那样编写组合控件。
大家可以看一下ActiveWidgets代码（与我的思路有些差别），我认为这种基于
html标签的UI控件无论性能、开发人员使用难度上都不错。
对于dojo的widget这种做UI做法我个人不很赞同，完全用div，图片实现了一便
html的UI标签。性能不好，开发人员上手不容易，美工更不能修改，另外图片都
是定死的，界面也比较单调，也不好修改。
对于自己实现javascript控件，我认为在htmlUI基础上就可以了，毕竟自己实现
存在的UI难度不小。把html的标准UI组合成新的控件。例如，我们可以很容易的
实现一个包括 （登陆 密码 验证码 确认） 的组合javascript控件
d、dom标准与浏览器对象
打开document.writeln(desc(document.getElementById('xm')));，你可以看到<
input type="text">的所有属性。这些属性 ”dom标准“，之所以加引号，DOM标
准我们有很多误解，认为DOM标准是个什么高不可及、不可违抗的、复杂的东西。
首先：我们接触了静态HTML,xml，有了DOM对象模型（熟悉java的都知道java的实
现），但javascript语言的特点使不能象java,c++那样来实现DOM对象模型。例如
input 继承了 HTMLElement，HTMLElement定义的一堆属性。按照dom标准,所有浏
览器实现 input javascript对象时都必须把这些属性加上，这就叫符合标准。其
实说白了：DOM标准就是浏览器为我们实现的javascript代码的总和。（可以浏览
器厂商不完全实现）
看protorype.js的代码
为了支持多了浏览器，定义下面代码。说明有的浏览器网页全局变量里有Element
，Event，有些浏览器没给我们定义。所以只能这样了。
if (!window.Element) {
var Element = new Object();
}
if (!window.Event) {
var Event = new Object();
}
还有用AJAX技术时
'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'， 其实很简
单，就是浏览器中有没有这些javascript实现了。所有大家在DWR框架中用iframe
实现了一个javascript XMLHTTP类。
e、与xhtml标准的矛盾
在xhtml中，<input type="button"> 双引号是必须的，但outerHTML属性中却没
双引号。还没想明白。
5、浏览器为我们创建了几类对象
a、全局对象window或this。其实javascript的全局变量、全局方法（如
Math,setTimeout()）都可以由window对象访问。另外浏览器的特殊函数或属性。
（如window.status,window.alert()）
b、document对象。包括图片，applet,form等属性，可能我们用的最多。也是访
问我们可见的元素的入口（document.getElementById）,也提供了动态创建html
标签的方法。如var t=new Text("test");没有这样方法，只能 var
t=document.creatTextNode("test");都由document提供的工厂方法来创建。
c、页面中的html标签，当解释执行过，浏览器会为你初始化对象，放到document
对象中去。
6、对DOM标准的认识
DOM标准定义了接口，没有定义类。浏览器为我们实现了这些接口，实现这些接口
的类我们也看不见。所以这里接口的含义和java中接口的含义不同。
例如我们常用的document对象
DOM标准中定义了个Document接口，实现HTMLElemnt接口。
Document接口和HTMLElemnt接口在DOM标准中定义了很多属性和方法。
注意我们使用的document对象是浏览器为我们创建的javascript对象，到底
document对象有哪些属性和方法是有浏览器决定的，而不是由DOM标准决定的。
在这里javascript世界里没有继承概念，所以DOM标准定义的接口，对于我们开发
人员来说只能当成一个参考手册，象javadoc。
7、如何写出跨浏览器的javascript代码
这难度大了点.但说穿了，只要我们用javascript代码把浏览器没符合DOM标准
的代码补全就好了。但DOM标准之大不是一般人能全部搞清楚的，浏览器厂商也使
坏，让这个工作更难了。 现在好象有个误区，人们写javascript都喜欢按照
DOM标准来写。如果我们按照各个浏览器实现DOM标准的交集写代码的话，可能会
更好点。
jQuery对象与dom对象的联系、区别和转换
1 、关于页面元素的引用
通过jquery 的$() 引用元素包括通过id 、class 、元素名以及元素的层级关系及dom 或者xpath 条件等方法，且返回的对象为jquery 对象（集合对象），不能直接调用dom 定义的方法。
2 、jQuery 对象与dom 对象的转换
只有jquery 对象才能使用jquery 定义的方法。注意dom 对象和jquery 对象是有区别的，调用方法时要注意操作的是dom 对象还是jquery对象。
普通的dom 对象一般可以通过$() 转换成jquery 对象。
如：$(document.getElementById("msg")) 则为jquery 对象，可以使用jquery 的方法。
由于jquery 对象本身是一个集合。所以如果jquery 对象要转换为dom 对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0] ，$("div").eq(1)[0] ，$("div").get()[1] ，$("td")[5] 这些都是dom 对象，可以使用dom 中的方法，但不能再使用Jquery 的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3 、如何获取jQuery 集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq 或get(n) 方法或者索引号获取，要注意，eq 返回的是jquery 对象，而get(n) 和索引返回的是dom 元素对象 。对于jquery 对象只能使用jquery 的方法，而dom 对象只能使用dom 的方法，如要获取第三个<div> 元素的内容。有如下两种方法：
$("div").eq(2).html(); // 调用jquery 对象的方法
$("div").get(2).innerHTML; // 调用dom 的方法属性
4 、同一函数实现set 和get
Jquery 中的很多方法都是如此，主要包括如下几个：
$("#msg").html(); // 返回id 为msg 的元素节点的html 内容。
$("#msg").html("<b>new content</b>");
// 将“<b>new content</b>” 作为html 串写入id 为msg 的元素节点内容中, 页面显示粗体的new content
$("#msg").text(); // 返回id 为msg 的元素节点的文本内容。
$("#msg").text("<b>new content</b>");
// 将“<b>new content</b>” 作为普通文本串写入id 为msg 的元素节点内容中, 页面显示<b>new content</b>
$("#msg").height(); // 返回id 为msg 的元素的高度
$("#msg").height("300"); // 将id 为msg 的元素的高度设为300
$("#msg").width(); // 返回id 为msg 的元素的宽度
$("#msg").width("300"); // 将id 为msg 的元素的宽度设为300
$("input").val("); // 返回表单输入框的value 值
$("input").val("test"); // 将表单输入框的value 值设为test
$("#msg").click(); // 触发id 为msg 的元素的单击事件
$("#msg").click(fn); // 为id 为msg 的元素单击事件添加函数
同样blur,focus,select,submit 事件都可以有着两种调用方法
5 、集合处理功能
对于jquery 返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery 已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
// 为索引分别为0 ，1 ，2 的p 元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
// 实现表格的隔行换色效果
$("p").click(function(){alert($(this).html())})
// 为每个p 元素增加了click 事件，单击某个p 元素则弹出其内容
6 、扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); // 为jquery 扩展了min,max 两个方法
使用扩展的方法（通过“$. 方法名” 调用）：
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
7 、支持方法的连写
所谓连写，即可以对一个jquery 对象连续调用各种不同的方法。
例如：
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
8 、操作元素的样式
主要包括以下几种方式：
$("#msg").css("background"); // 返回元素的背景颜色
$("#msg").css("background","#ccc") // 设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); // 设定宽高
$("#msg").css({ color: "red", background: "blue" });// 以名值对的形式设定样式
$("#msg").addClass("select"); // 为元素增加名称为select 的class
$("#msg").removeClass("select"); // 删除元素名称为select 的class
$("#msg").toggleClass("select"); // 如果存在（不存在）就删除（添加）名称为select 的class
9 、完善的事件处理功能
Jquery 已经为我们提供了各种事件处理方法，我们无需在html 元素上直接写事件，而可以直接为通过jquery 获取的对象添加事件。
如：
$("#msg").click(function(){alert("good")}) // 为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
// 为三个不同的p 元素单击事件分别设定不同的处理
jQuery 中几个自定义的事件 ：
（1 ）hover(fn1,fn2) ： 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
// 当鼠标放在表格的某行上时将class 置为over ，离开时置为out 。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});
（2 ）ready(fn): 当DOM 载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("Load Success")})
// 页面加载完毕提示“Load Success”, 相当于onload 事件。与$(fn) 等价
（3 ）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
// 每次点击时轮换添加和删除名为selected 的class 。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
（4 ）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
$("p").trigger("click"); // 触发所有p 元素的click 事件
（5 ）bind(eventtype,fn) ，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$("p").bind("click", function(){alert($(this).text());}); // 为每个p 元素添加单击事件
$("p").unbind(); // 删除所有p 元素上的所有事件
$("p").unbind("click") // 删除所有p 元素上的单击事件
10 、几个实用特效功能
其中toggle() 和slidetoggle() 方法提供了状态切换功能。
如toggle() 方法包括了hide() 和show() 方法。
slideToggle() 方法包括了slideDown() 和slideUp 方法。
11 、几个有用的jQuery 方法
$.browser. 浏览器类型： 检测浏览器类型。有效参数：safari, opera, msie, mozilla 。如检测是否ie ：$.browser.isie ，是ie 浏览器则返回true 。
$.each(obj, fn) ： 通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert("Item #"+i+": "+tempArr[i]);
}
也可以处理json 数据，如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN) ： 用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery 实现的继承方式。
如：
$.extend(settings, options);
// 合并settings 和options ，并将合并结果返回settings 中，相当于options 继承setting 并将继承结果保存在setting 中。
var settings = $.extend({}, defaults, options);
// 合并defaults 和options ，并将合并结果返回到setting 中而不覆盖default 内容。
可以有多个参数（合并多项并返回）
$.map(array, fn) ： 数组映射。把一个数组中的项目( 处理转换后) 保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr 内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr 内容为：[2,3]
$.merge(arr1,arr2): 合并两个数组并删除其中重复的项目。
如：$.merge( [0,1,2], [2,3,4] ) // 返回[0,1,2,3,4]
$.trim(str) ： 删除字符串两端的空白字符。
如：$.trim(" hello, how are you? "); // 返回"hello,how are you? "
12 、解决自定义方法或其他类库与jQuery 的冲突
很多时候我们自己定义了$(id) 方法来获取一个元素，或者其他的一些js 类库如prototype 也都定义了$ 方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery 对此专门提供了方法用于解决此问题。
使用jquery 中的jQuery.noConflict(); 方法即可把变量$ 的控制权让渡给第一个实现它的那个库或之前自定义的$ 方法。之后应用Jquery 的时候只要将所有的$ 换成jQuery 即可，如原来引用对象方法$("#msg") 改为jQuery("#msg") 。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';
1 、DOM 对象转jQuery 对象
普通的Dom 对象一般可以通过$() 转换成jQuery 对象。
如：$(document.getElementById("msg"))
返回的就是jQuery 对象，可以使用jQuery 的方法。
2 、jQuery 对象转DOM 对象
由于jQuery 对象本身是一个集合。所以如果jQuery 对象要转换为Dom 对象则必须取出其中的某一项，一般可通过索引取出。
如： $("#msg")[0] ，$("div").eq(1)[0] ，$("div").get()[1] ，$("td")[5]
这些都是Dom 对象，可以使用Dom 中的方法，但不能再使用jQuery 的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
1 、关于页面元素的引用
通过jquery 的$() 引用元素包括通过id 、class 、元素名以及元素的层级关系及dom 或者xpath 条件等方法，且返回的对象为jquery 对象（集合对象），不能直接调用dom 定义的方法。
2 、jQuery 对象与dom 对象的转换
只有jquery 对象才能使用jquery 定义的方法。注意dom 对象和jquery 对象是有区别的，调用方法时要注意操作的是dom 对象还是jquery对象。
普通的dom 对象一般可以通过$() 转换成jquery 对象。
如：$(document.getElementById("msg")) 则为jquery 对象，可以使用jquery 的方法。
由于jquery 对象本身是一个集合。所以如果jquery 对象要转换为dom 对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0] ，$("div").eq(1)[0] ，$("div").get()[1] ，$("td")[5] 这些都是dom 对象，可以使用dom 中的方法，但不能再使用Jquery 的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3 、如何获取jQuery 集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq 或get(n) 方法或者索引号获取，要注意，eq 返回的是jquery 对象，而get(n) 和索引返回的是dom 元素对象 。对于jquery 对象只能使用jquery 的方法，而dom 对象只能使用dom 的方法，如要获取第三个<div> 元素的内容。有如下两种方法：
$("div").eq(2).html(); // 调用jquery 对象的方法
$("div").get(2).innerHTML; // 调用dom 的方法属性
4 、同一函数实现set 和get
Jquery 中的很多方法都是如此，主要包括如下几个：
$("#msg").html(); // 返回id 为msg 的元素节点的html 内容。
$("#msg").html("<b>new content</b>");
// 将“<b>new content</b>” 作为html 串写入id 为msg 的元素节点内容中, 页面显示粗体的new content
$("#msg").text(); // 返回id 为msg 的元素节点的文本内容。
$("#msg").text("<b>new content</b>");
// 将“<b>new content</b>” 作为普通文本串写入id 为msg 的元素节点内容中, 页面显示<b>new content</b>
$("#msg").height(); // 返回id 为msg 的元素的高度
$("#msg").height("300"); // 将id 为msg 的元素的高度设为300
$("#msg").width(); // 返回id 为msg 的元素的宽度
$("#msg").width("300"); // 将id 为msg 的元素的宽度设为300
$("input").val("); // 返回表单输入框的value 值
$("input").val("test"); // 将表单输入框的value 值设为test
$("#msg").click(); // 触发id 为msg 的元素的单击事件
$("#msg").click(fn); // 为id 为msg 的元素单击事件添加函数
同样blur,focus,select,submit 事件都可以有着两种调用方法
5 、集合处理功能
对于jquery 返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery 已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
// 为索引分别为0 ，1 ，2 的p 元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
// 实现表格的隔行换色效果
$("p").click(function(){alert($(this).html())})
// 为每个p 元素增加了click 事件，单击某个p 元素则弹出其内容
6 、扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); // 为jquery 扩展了min,max 两个方法
使用扩展的方法（通过“$. 方法名” 调用）：
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
7 、支持方法的连写
所谓连写，即可以对一个jquery 对象连续调用各种不同的方法。
例如：
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
8 、操作元素的样式
主要包括以下几种方式：
$("#msg").css("background"); // 返回元素的背景颜色
$("#msg").css("background","#ccc") // 设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); // 设定宽高
$("#msg").css({ color: "red", background: "blue" });// 以名值对的形式设定样式
$("#msg").addClass("select"); // 为元素增加名称为select 的class
$("#msg").removeClass("select"); // 删除元素名称为select 的class
$("#msg").toggleClass("select"); // 如果存在（不存在）就删除（添加）名称为select 的class
9 、完善的事件处理功能
Jquery 已经为我们提供了各种事件处理方法，我们无需在html 元素上直接写事件，而可以直接为通过jquery 获取的对象添加事件。
如：
$("#msg").click(function(){alert("good")}) // 为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
// 为三个不同的p 元素单击事件分别设定不同的处理
jQuery 中几个自定义的事件 ：
（1 ）hover(fn1,fn2) ： 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
// 当鼠标放在表格的某行上时将class 置为over ，离开时置为out 。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});
（2 ）ready(fn): 当DOM 载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("Load Success")})
// 页面加载完毕提示“Load Success”, 相当于onload 事件。与$(fn) 等价
（3 ）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
// 每次点击时轮换添加和删除名为selected 的class 。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
（4 ）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
$("p").trigger("click"); // 触发所有p 元素的click 事件
（5 ）bind(eventtype,fn) ，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$("p").bind("click", function(){alert($(this).text());}); // 为每个p 元素添加单击事件
$("p").unbind(); // 删除所有p 元素上的所有事件
$("p").unbind("click") // 删除所有p 元素上的单击事件
10 、几个实用特效功能
其中toggle() 和slidetoggle() 方法提供了状态切换功能。
如toggle() 方法包括了hide() 和show() 方法。
slideToggle() 方法包括了slideDown() 和slideUp 方法。
11 、几个有用的jQuery 方法
$.browser. 浏览器类型： 检测浏览器类型。有效参数：safari, opera, msie, mozilla 。如检测是否ie ：$.browser.isie ，是ie 浏览器则返回true 。
$.each(obj, fn) ： 通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert("Item #"+i+": "+tempArr[i]);
}
也可以处理json 数据，如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN) ： 用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery 实现的继承方式。
如：
$.extend(settings, options);
// 合并settings 和options ，并将合并结果返回settings 中，相当于options 继承setting 并将继承结果保存在setting 中。
var settings = $.extend({}, defaults, options);
// 合并defaults 和options ，并将合并结果返回到setting 中而不覆盖default 内容。
可以有多个参数（合并多项并返回）
$.map(array, fn) ： 数组映射。把一个数组中的项目( 处理转换后) 保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr 内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr 内容为：[2,3]
$.merge(arr1,arr2): 合并两个数组并删除其中重复的项目。
如：$.merge( [0,1,2], [2,3,4] ) // 返回[0,1,2,3,4]
$.trim(str) ： 删除字符串两端的空白字符。
如：$.trim(" hello, how are you? "); // 返回"hello,how are you? "
12 、解决自定义方法或其他类库与jQuery 的冲突
很多时候我们自己定义了$(id) 方法来获取一个元素，或者其他的一些js 类库如prototype 也都定义了$ 方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery 对此专门提供了方法用于解决此问题。
使用jquery 中的jQuery.noConflict(); 方法即可把变量$ 的控制权让渡给第一个实现它的那个库或之前自定义的$ 方法。之后应用Jquery 的时候只要将所有的$ 换成jQuery 即可，如原来引用对象方法$("#msg") 改为jQuery("#msg") 。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';
1 、DOM 对象转jQuery 对象
普通的Dom 对象一般可以通过$() 转换成jQuery 对象。
如：$(document.getElementById("msg"))
返回的就是jQuery 对象，可以使用jQuery 的方法。
2 、jQuery 对象转DOM 对象
由于jQuery 对象本身是一个集合。所以如果jQuery 对象要转换为Dom 对象则必须取出其中的某一项，一般可通过索引取出。
如： $("#msg")[0] ，$("div").eq(1)[0] ，$("div").get()[1] ，$("td")[5]
这些都是Dom 对象，可以使用Dom 中的方法，但不能再使用jQuery 的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
DOM对象（一）.先从WINDOWS对象开始
一、DOM简述
DOM
（1）打开网页后，首先看到的是浏览器窗口，即顶层的window对象。
（2）其次，看到的是网页文档的内容，即document文档。
（3）定位对象：
(4)地址对象location和历史对象history，它他对应IE浏览器中的地址栏和前进/后退按钮。
常用属性：
1 window.clesed：指明窗口是否关闭。
2 window.defaultValue：窗口状态栏的默认信息。
3 window.docement：表示浏览器窗口中的HTML文档。
4 window.location：表示有关当前URL的信息。
5 window.history：表示有关当前访问过的RUL的信息。
6 window.name：设置或检索窗口或框架的名称。
7 window.screen：包含有关客户的屏幕和显示性能的信息。
8 window.screenX：窗口X坐标
9 window.screenY：窗口Y坐标
10 window.status：设置或检索窗口状态栏中的信息。
11 window.title：设置或检索窗口顶部标题栏中的信息。
12 window.self：当前窗口。
13 window.parent：当前窗口的最上层窗口。
14 window.top：当前显示的窗口的最上层窗口。
15 window.opener：所打开“子窗口”的“父窗口”的名称。
常用方法：
1 window.alert(“
2 window.blur()：使对象失去焦点并激发onblur事件。
3 window.close()：关闭窗口。
4 window.open(“打开窗口的url”,”窗口名”,”窗口特征”)：按指定特征打开窗口。
窗口特征参数如下:
height：窗口高度
width：窗口宽度
top：窗口距屏幕上方的象素值
left：窗口跟屏幕左侧的象素值
toolbar：是否显示工具栏，yes或1表示显示，no或0表示不显示。
menubar：是否显示菜单栏，yes或1表示显示，no或0表示不显示。
scrollbars：是否显示滚动栏，yes或1表示显示，no或0表示不显示。
resizable：是否允许改变窗口大小，yes或1表示否允，no或0表示不否允示。
location：是否显示地址栏，yes或1表示显示，no或0表示不显示。
status：是否显示状态栏，yes或1表示显示，no或0表示不显示。
5 window.confirm(“提示信息”)：显示一个确认对话框，包括确定和取消按钮。当点确定按钮时返回的是true,点取消按钮时返回的是false。
6 window.prompt(“提示信息”,显示在text中的默认值)：显示带输入框提示对话框，主要用来收集信息。当点确定按钮时返回的是true,点取消按钮时返回的是false。
（1） window.moveBy(x,y)：实现窗口的定向、定量移动。两个参数分别表示x方向移动的距离和y方向移动的距离。
（2） window.moveTo(x,y)：把窗口移动到指定坐标位置。两个参数分别表示横坐标、纵坐标。
8 窗口大小控制的两个方法：
（2）resizeTo(x,y)：把窗口调整到指定尺寸。两个参数分别表示浏览器窗口的宽和高。
（1）setTimeout(“函数’,毫秒数)：设置定时器，经过指定毫秒值后执行某个函数。
（2）clearTimeout(定时器对象)：取消某个定时器。