读《从零开始学习jQuery》要点摘要供复习记忆

注意jQuery是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System程序集"是类库,而"ASP.NET MVC"是框架. jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事。

 

1.下载jQuery类库

jQuery的项目下载放在了Google Code上, 下载地址:http://code.google.com/p/jqueryjs/downloads/list

 

上面的地址是总下载列表, 里面有很多版本和类型的jQuery库, 主要分为如下几类:

min: 压缩后的jQuery类库,  在正式环境上使用.如:jquery-1.3.2.min.js

vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如：jquery-1.3.2-vsdoc2.js

release包: 里面有没有压缩的jquery代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip

 

五.启用Visual Studio 对jQuery的智能感知

首先看一下Visual Studio带给我们的智能感知惊喜. 要让Visual Studio支持智能感知, 需要下列条件:

• 安装 VS2008 SP1
  下载地址: http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx
• 安装VS 2008 Patch KB958502以支持"-vsdoc.js"Intellisense文件.
  该补丁会导致VisualStudio在一个JavaScript库被引用时，查找是否存在一个可选的"-vsdoc.js"文件，如果存在的话，就用它来驱动JavaScriptintellisense引擎。这些加了注释的"-vsdoc.js"文件可以包含对JavaScript方法提供了帮助文档的XML注释，以及对无法自动推断出的动态JavaScript签名的另外的代码intellisense提示。你可以在"这里"了解该补丁的详情。你可以在"这里"免费下载该补丁。
• 必须要引用vsdoc版本的jquery库 

注意,如果我们更新了脚本, 可以通过"Ctrl+Shift+J"快捷方式更新Visual Studio的智能感知,或者单击 编辑->IntelliSense->更新JScript Intellisense.

 

为了即能在Visual Studio中增加脚本提示, 又能在上线的时候使用min版本的脚本库, 我们一般是用如下方式引入jQuery库:

<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<%if (false){%>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js">  </script>   
<%}%>

 

在独立的.js文件中我们同样可以启用脚本的智能感知, 在IntellisenseDemo.js文件中,添加如下语句:
/// <reference path="jquery-1.3.2-vsdoc2.js" />

 

1.Dom对象

在传统的javascript开发中,我们都是首先获取Dom对象,比如:
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

我们经常使用 document.getElementById 方法根据id获取单个Dom对象, 或者使用 document.getElementsByTagName 方法根据HTML标签名称获取Dom对象集合.

另外在事件函数中, 可以通过在方法函数中使用this引用事件触发对象(但是在多播事件函数中IE6存在问题), 或者使用event对象的target(FF)或srcElement(iIE6)获取到引发事件的Dom对象.
注意我们这里获取到的都是Dom对象, Dom对象也有不同的类型比如input, div, span等. Dom对象只有有限的属性和方法。

2.jQuery包装集

jQuery包装集可以说是Dom对象的扩充.在jQuery的世界中将所有的对象, 无论是一个还是一组, 都封装成一个jQuery包装集,比如获取包含一个元素的jQuery包装集:
var jQueryObject = $("#testDiv");
jQuery包装集都是作为一个对象一起调用的. jQuery包装集拥有丰富的属性和方法, 这些都是jQuery特有的。

3.Dom对象与jQuery对象的转换

(1) Dom转jQuery包装集
var div = document.getElementById("testDiv");
上面的代码中div是一个Dom元素, 我们可以将Dom元素转换成jQuery包装集:
var domToJQueryObject = $(div);

(2) jQuery包装集转Dom对象
jQuery包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素:
var domObject = $("#testDiv")[0];
注意, 通过索引器返回的不再是jQuery包装集, 而是一个Dom对象!

jQuery包装集的某些遍历方法,比如each()中, 可以传递遍历函数, 在遍历函数中的this也是Dom元素,比如:
$("#testDiv").each(function() { alert(this) })

如果我们要使用jQuery的方法操作Dom对象,怎么办? 用上面介绍过的转换方法即可:
$("#testDiv").each(function() { $(this).html("修改内容") })

"$"符号在jQuery中代表对jQuery对象的引用, "jQuery"是核心对象。
jQuery( expression, context ) 这个函数接收一个CSS选择器的字符串，然后用这个字符串去匹配一组元素。
jQuery( html, ownerDocument ) 根据HTML原始字符串动态创建Dom元素.
jQuery( elements ) 将一个或多个Dom对象封装jQuery函数功能(即封装为jQuery包装集)
jQuery( callback )是$(document).ready()的简写方式

jQuery选择器按照功能主要分为"选择"和"过滤". 并且是配合使用的. 可以同时使用组合成一个选择器字符串. 主要的区别是"过滤"作用的选择器是指定条件从前面匹配的内容中筛选, "过滤"选择器也可以单独使用, 表示从全部"*"中筛选. 比如:
$(":[title]") 等同于：$("*:[title]")
而"选择"功能的选择器则不会有默认的范围, 因为作用是"选择"而不是"过滤".
过滤器前面带冒号，如：:first
属性过滤器用方括号包括起来，如：[attribute!=value]

永远不要在页面加载时改变页面的Dom模型，如下：
<script type="text/javascript">
    document.getElementById("testDiv").innerHTML = "动态创建的div";
</script>
正确的做法是在页面加载完毕后添加或删除元素：
//DOM加载完毕后添加元素
//传统方法
window.onload = function() { testDiv.innerHTML = "动态创建的div"; }
不幸的是浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后.
解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行:
//jQuery 使用动态创建的$(document).ready(function)方法
$(document).ready(
    function() { testDiv.innerHTML = "使用动态创建的$(document).ready(function)方法"; }
);
或者使用简便语法:
//jQuery 使用$(function)方法
$(
    function() { testDiv.innerHTML += "使用$(function)方法"; }
);
使用$()将我们的函数包装起来即可，而且可以在一个页面绑定多个函数。如果使用传统的window.onload则只能调用一个函数.

下面介绍两种正确的创建元素的方式.
(1)使用HTML DOM创建元素
通过使用 document.createElement 方法我们可以创建Dom元素, 然后通过appendChild方法为添加到指定对象上.
//使用Dom标准创建元素
var select = document.createElement("select");
select.options[0] = new Option("加载项1", "value1");
select.options[1] = new Option("加载项2", "value2");
select.size = "2";
var object = testDiv.appendChild(select);

(2) 使用jQuery函数创建元素
$("
动态创建的div
")

区分DOM属性和元素属性
一个img标签:<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />
通常开发人员习惯将id, src, alt等叫做这个元素的"属性". 我将其称为"元素属性". 但是在解析成DOM对象时, 实际浏览器最后会将标签元素解析成"DOM对象", 并且将元素的"元素属性"存储为"DOM属性"。两者是有区别的：
虽然我们设置了元素的src是相对路径:images/image.1.jpg
但是在"DOM属性"中都会转换成绝对路径:http://localhost/images/image.1.jpg.
甚至有些"元素属性"和"DOM属性"的名称都不一样,比如上面的元素属性class, 转换为DOM属性后对应className.

操作"DOM属性"
牢记, 在javascript中我们可以直接获取或设置"DOM属性"。
在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. 在jQuery提供了each()函数用于遍历Query
包装集, 其中的this指针是一个DOM对象, 所以我们可以应用这一点配合原生javascript来操作元素的DOM属性。
$("img").each(function(index) {
    alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
    this.alt = "changed";
    alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
});

操作"元素属性"
我们可以使用javascript中的getAttribute和setAttribute来操作元素的"元素属性"。
在jQuery中给你提供了attr()包装集函数, 能够同时操作包装集中所有元素的属性。
另外虽然我们可以使用 removeAttr( name ) 删除元素属性, 但是对应的DOM属性是不会被删除的, 只会影响DOM属性的值.
比如将一个input元素的readonly元素属性去掉,会导致对应的DOM属性变成false(即input变成可编辑状态):
$("#inputTest").removeAttr("readonly");

虽然我们可以通过获取属性,特性以及CSS样式来取得元素的几乎所有信息,  但是注意下面的实验:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
l1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>获取对象宽度</title>
    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript">
        $(function()
        {
            alert("attr(/"width/"):" + $("#testDiv").attr("width")); //undifined
            alert("css(/"width/"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff)
            alert("width():" + $("#testDiv").width()); //正确的数值1264
            alert("style.width:" +  $("#testDiv")[0].style.width ); //空值
        })
    </script>
</head>
<body>
    <div id="testDiv">
        测试文本</div>
</body>
</html>

 

我们常用的修改元素属性添加事件的方式, 实际上是建立了一个匿名函数:
document.getElementById("testDiv1").onclick = function(event)
{
    alert("!!!");
};
这种方式的弊端是:
1. 只能为一个事件绑定一个事件处理函数.  使用"="赋值会把前面为此时间绑定的所有事件处理函数冲掉。
2. 在事件函数(无论是匿名函数还是绑定的函数)中获取事件对象的方式在不同浏览器中要特殊处理。

3. 添加多播委托的函数在不同浏览器中是不一样的.
//统一的为对象添加多播事件委托的方法
/* 
    参数说明:
    oTarget     : 要添加事件的对象.比如"document".
    sEventType  : 事件类型.比如单击事件"click".
    fnHandler   : 发生事件时调用的方法. 比如一个静态函数"hideCalendar"
   
    使用举例:
    //单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件
    var cf = document.getElementById("CalFrame");
    if( cf != null && hideCalendar != null )
    {
        ScriptHelper.addEventListener( document, "click", hideCalendar );
    }
*/
scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler)
{
    if( oTarget.addEventListener )//for dom
    {
        oTarget.addEventListener( sEventType, fnHandler, false )
    }
    else if( oTarget.attachEvent )//for ie
    {
        oTarget.attachEvent( "on" + sEventType, fnHandler);
    }
}
所以我们首先应该摒弃<div onclick="..."></div>这种通过修改元素属性添加事件的方式. 尽量使用添加多播事件委托的方式为一个事件绑定多个事件处理函数, 比如为document对象的单击事件添加一个关闭弹出层的方法, 使用多播就不会影响document对象原有的事件处理函数.

 

使用jQuery事件处理函数的好处:
1. 添加的是多播事件委托.  也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数.
2. 统一了事件名称. 
3. 可以将对象行为全部用脚本控制.

虽然我们可以使用事件处理函数完成对象事件的几乎所有操作, 但是jQuery提供了对常用事件的封装. 比如单击事件对应的两个方法click()和click(fn)分别用来触发单击事件和设置单击事件.

jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入:
$("#testDiv").bind("click", function(event) {  });//event是事件对象
jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement).

事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.