iLeichun

随着DOM结构的复杂化和Ajax等动态脚本技术的运用，事件委托自然浮出了水面。jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现的基础上，展示它们的优劣势及适用场合。

事件委托

事件委托的事例在现实当中比比皆是。比如，有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

我们知道，DOM在为页面中的每个元素分派事件时，相应的元素一般都在事件冒泡阶段处理事件。在类似 body > div > a 这样的结构中，如果单击a元素，click事件会从a一直冒泡到div和body（即document对象）。因此，发生在a上面的单击事件，div和body元素同样可以处理。而利用事件传播（这里是冒泡）这个机制，就可以实现事件委托。具体来说，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。

.bind()

假设有一个多行多列的表格，我们想让用户单击每个单元格都能看到与其中内容相关的更多信息（比如，通过提示条）。为此，可以为每个单元格都绑定click事件：

$("info_table td").bind("click", function(){/*显示更多信息*/});

问题是，如果表格中要绑定单击事件的有10列500行，那么查找和遍历5000个单元格会导致脚本执行速度明显变慢，而保存5000个td元素和相应的事件处理程序也会占用大量内存（类似于让每个人亲自站在门口等快递）。

在前面这个例子的基础上，如果我们想实现一个简单的相册应用，每页只显示50张照片的缩略图（50个单元格），用户点击“第x页”（或“下一页”）链接可以通过Ajax从服务器动态加载另外50张照片。在这种情况下，似乎使用.bind()方法为50个单元格绑定事件又可以接受了。

事实却不然。使用.bind()方法只会给第一页中的50个单元格绑定单击事件，动态加载的后续页面中的单元格都不会有这个单击事件。换句话说，.bind()只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件（类似于新来的员工收不到快递）。

事件委托可以解决上述两个问题。具体到代码上，只要用jQuery 1.3新增的.live()方法代替.bind()方法即可：

$("#info_table td").live("click",function(){/*显示更多信息*/});

这里的.live()方法会把click事件绑定到$(document)对象（但这一点从代码中体现不出来，这也是.live()方法饱受诟病的一个重要原因，稍后再详细讨论），而且只需要给$(document)绑定一次（不是50次，更不是5000次），然后就能够处理后续动态加载的照片单元格的单击事件。在接收到任何事件时，$(document)对象都会检查事件类型和事件目标，如果是click事件且事件目标是td，那么就执行委托给它的处理程序。

.live()

到目前为止，一切似乎很完美。可惜，事实并非如此。因为.live()方法并不完美，它有如下几个主要缺点：

• $()函数会找到当前页面中的所有td元素并创建jQuery对象，但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，因而生成这个jQuery对象会造成不必要的开销；
• 默认把事件绑定到$(document)元素，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失；
• 只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#infotable td").live...可以，但$("#infotable").find("td").live...不行；
• 收集td元素并创建jQuery对象，但实际操作的却是$(document)对象，令人费解。

解决之道

为了避免生成不必要的jQuery对象，可以使用一种叫做“早委托”的hack，即在$(document).ready()方法外部调用.live()：

(function($){
    $("#info_table td").live("click",function(){/*显示更多信息*/});})(jQuery);

在此，(function($){...})(jQuery)是一个“立即执行的匿名函数”，构成了一个闭包，可以防止命名冲突。在匿名函数内部，$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意，使用这个hack时，脚本必须是在页面的head元素中链接和(或)执行的。之所以选择这个时机，因为这时候刚好document元素可用，而整个DOM还远未生成；如果把脚本放在结束的body标签前面，就没有意义了，因为那时候DOM已经完全可用了。

为了避免事件冒泡造成的性能损失，jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：

$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});

这样，“受托方”就从默认的$(document)变成了$("#infotable")[0]，节省了冒泡的旅程。不过，与.live()共同使用的上下文参数必须是一个单独的DOM元素，所以这里指定上下文对象时使用的是$("#infotable")[0]，即使用数组的索引操作符来取得的一个DOM元素。

.delegate()

如前所述，为了突破单一.bind()方法的局限性，实现事件委托，jQuery 1.3引入了.live()方法。后来，为解决“事件传播链”过长的问题，jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题，jQuery 1.4.2干脆直接引入了一个新方法.delegate()。

使用.delegate()，前面的例子可以这样写：

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

使用.delegate()有如下优点（或者说解决了.live()方法的如下问题）：

• 直接将目标元素选择符（"td"）、事件（"click"）及处理程序与“受拖方”$("#info_table")绑定，不额外收集元素、事件传播路径缩短、语义明确；
• 支持在连缀的DOM遍历方法后面调用，即支持$("table").find("#info").delegate...，支持精确控制；

可见，.delegate()方法是一个相对完美的解决方案。但在DOM结构简单的情况下，也可以使用.live()。

提示：使用事件委托时，如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效。

结论

在下列情况下，应该使用.live()或.delegate()，而不能使用.bind()：

• 为DOM中的很多元素绑定相同事件；
• 为DOM中尚不存在的元素绑定事件；

PS：根据jQuery 1.7 Beta 1的发版说明，jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题，将会增加一对新的事件方法：.on()和.off()：
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);
如果指定selector，则为事件委托；否则，就是常规绑定。新旧API对应如下：

（注：本文基于《jQuery基础教程（第3版）》相关章节内容编撰而成

使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题，不论插件简单还是复杂。我在这里分享10条我总结的经验。

1. 把你的代码全部放在闭包里面

这是我用的最多的一条。但是有时候在闭包外面的方法会不能调用。不过你的插件的代码只为你自己的插件服务，所以不存在这个问题，你可以把所有的代码都放在闭包里面。而方法可能应该放在Prototype方法内部，我们后面会讲到这一点。

2. 提供插件的默认选项

你的插件应该会有一些选项是可以让开发者设置的，所以提供恢复默认选项是以有必要的。你可以通过jQuery的extend功能来设置这些选项：

3. 使用返回一个元素

JavaScript/jQuery有一个很好的特点就是可以进行方法级联，所以我们不应该破坏这个特性，始终在方法中返回一个元素。我在我的每一个jQuery插件中都遵守这一条。

4. 一次性代码放在主循环以外

这一条很重要，但是常常被忽略。简单的讲，如果你有一段代码是一堆默认值，只需要被实例化一次，而不是每次调用你插件功能的时候都实例化，你应该把这段代码放在插件方法的外面。这样可以让你的插件运行的更高效，节省内存。我们将会在后面讨论prototype的时候，看这个方法在实际中的运用。

你可以注意到，上面代码中的“defaultSettings”是完全在插件方法外面的，由于这些代码是在闭包里面，我们不用担心这些变量被重写。

5. 为什么要设置 Class Prototyping

作为你代码的血与肉，方法和函数应该放在prototype函数内。有两个原因：

▲它可以节省很多内存，因为可以不用重复创建这些方法。

▲引用一个现成的方法比重新创建一个好快很多。

简单的说，prototype就是扩展了一个对象，为它提供方法，而不用在每一个对象中实例化这些方法。这也让你的代码更有条理和高效。一旦你习惯这种开发方式，你会发现它在你将来的项目中为你节省了很多时间。

6. 如何设置 Class Prototyping

设置一个 prototype 方法有两个部分。首先我们需要创建我们最初的类定义，在多数情况下这就意味着创建一个对象。这个定义包含了每一个对象实例都不同的部分。在我的 Paint jQuery Plugin 插件中，我是这么写的：

下面来添加全局的方法：

这里的关键是要让prototype的方法是通用的，但是数据是每个实例自己的，可以用“this”引用。

7. 使用 “this” 对象

通过使用“$this”，我们可以向别的闭包传递正确的引用。我们也可能需要向别的方法传入 $this 引用。需要注意的是， $this 这个名字是可以改的，任意的变量名都可以。

8. 在每一个对象中保存设置

我一直在每一个对象中保存自己的设置，然后操作它自己的设置。这样你就不用在不同的方法中传递很多参数。把这些变量放在对象中，也方便你在其他地方调用这些变量。

9. 分离你的Prototype方法逻辑

这可能是一个基本的原则。当你在犹豫是否需要提供一个方法的时候，你可以问你自己 “如果其他人要重写这个方法的话，你的代码是否能满足他的需求？”或者“别人来写这个方法有多困难？”。当然这是一个灵活性拿捏的问题。这里列出了我的 Color Picker jQuery Plugin  的方法，你可以参考一下：

10. 提供 Setter/Getter 选项

这一条不是必须的，但是我发现我所有的插件都包用到了这一条。因为它只需要一点点代码，就能为别人提供一个他可能需要的功能。

基本上，我们只要让开发者能够设置或者获取元素已经存在的值：

首先我们要把元素和对象关联起来，然后我们就可以引用它。我们在返回元素之前做如下操作：

以上十条基本上覆盖了jQuery插件开发的核心，并且可以作为开发的模板。有一套基本的代码可以极大的缩短你的开发时间，并且能够让你设计插件架构的时候更自信。

用JQuery操作DOM确实很方便，并且JQuery提供了非常人性化的API应付我们的各种需求，其中选择器在此示例-“JQuery实现图片 轮播效果”上体现的尤为出色。大大简化了js的代码。

【原理简述】

这里大概说一下整个流程：

1，将除了第一张以外的图片全部隐藏，

2，获取第一张图片的alt信息显示在信息栏，并添加点击事件

3，为4个按钮添加点击侦听，点击相应的按钮，用fadeOut，fadeIn方法显示图片

4，设置setInterval，定时执行切换函数

【代码说明】

filter(":visible") :获取所有可见的元素

unbind()：从匹配的元素中删除绑定的事件

siblings：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

例：找到每个div的所有同辈元素中带有类名为selected的元素。

执行 $("div").siblings()，结果

[ <p>Hello</p>, <p>And Again</p> ] 

【程序源码】

HTML部分：

<div id="banner">    
    <div id="banner_bg"></div>  <!--标题背景-->
    <div id="banner_info"></div> <!--标题-->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
   <div id="banner_list">
        <a href="#" target="_blank"><img src="imgs/p1.jpg" title="雷纯的blog" alt="雷纯的blog" /></a>
        <a href="#" target="_blank"><img src="imgs/p5.jpg" title="雷纯的blog" alt="雷纯的blog" /></a>
        <a href="#" target="_blank"><img src="imgs/p3.jpg" title="雷纯的blog" alt="雷纯的blog" /></a>
        <a href="#" target="_blank"><img src="imgs/p4.jpg" title="雷纯的blog" alt="雷纯的blog" /></a>
    </div>
</div>

CSS部分：

<style type="text/css">

#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;cursor:pointer; width:478px; }
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
            margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background-color:#6f4f67;cursor:pointer}
#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
</style>

JS部分:

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
    var t = n = 0, count;
    $(document).ready(function(){    
        count=$("#banner_list a").length;  
        $("#banner_list a:not(:first-child)").hide();
        $("#banner_info").html($("#banner_list a:first-child").find("img").attr(¹alt¹));
        $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr(¹href¹), "_blank")});
        $("#banner li").click(function() {
            var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
            n = i;
            if (i >= count) return;
            $("#banner_info").html($("#banner_list a").eq(i).find("img").attr(¹alt¹));
            $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr(¹href¹), "_blank")})
            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
            $(this).css({"background":"#be2424",¹color¹:¹#000¹}).siblings().css({"background":"#6f4f67",¹color¹:¹#fff¹});
        });
        t = setInterval("showAuto()", 4000);
        $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
    })
    
    function showAuto()
    {
        n = n >=(count - 1) ? 0 : ++n;
        $("#banner li").eq(n).trigger(¹click¹);
    }
</script>

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

<?php

/**

* @PHP分页类

*/

class page{

var $page_name=¹page¹; //数据名称

var $page_size; //每页显示条数

var $db;//数据库

var $page_num;//总页数

var $page=0; //当前页码

var $num; //数据总条数

/**

/**

* Enter 取得分页数据

* @param unknown_type $sql

* @param unknown_type $db

* @param unknown_type $page_size

* @return array;

*/

function getData($sql,$db,$page_size=20){

   $this->page_size=$page_size;

   if(strripos($sql,¹limit¹) != false)die(¹SQL中不可出现limit¹);

   if($page_size<=0)die(¹$page_size设置错误¹);

   $sql=trim($sql);

   $this->num=$db->getnum($sql);

   if($this->num<=$page_size){

    $this->page_num=0;

   }else{

    $this->page_num=ceil($this->num/$page_size)-1;

   }

   if(empty($_GET[$this->page_name]) || $_GET[$this->page_name] <0 ){

    $this->page=0;

   }elseif($_GET[$this->page_name] > $this->page_num){

    $this->page=$this->page_num;

   }else{

    $this->page=$_GET[$this->page_name];

   }

   $sql.=¹ limit ¹.($this->page*$page_size).¹,¹.$page_size;

   $row=$db->getall($sql);

   //echo $sql;

   return $row;  

}

/**

* 输出分页链接

* @return unknown

*/

function pagelist(){

   $query=$this->getquery();

   if(empty($query)){

    $query=¹¹;

   }else{

    $query=$query.¹&¹;

   }

   $total=¹总共¹.$this->num.¹条 每页¹.$this->page_size.¹条¹;

   $startpage=¹<a href="?¹.$query.$this->page_name.¹=0">首页</a>¹;

   $endpage=¹<a href="?¹.$query.$this->page_name.¹=¹.$this->page_num.¹">尾页</a>¹;

   if($this->page==0){

    $prepage=¹上一页¹;

   }else{

    $prepage=¹<a href="?¹.$query.$this->page_name.¹=¹.($this->page-1).¹">上一页</a>¹;

   }

   if($this->page==$this->page_num){

    $nextpage=¹下一页¹;

   }else{

    $nextpage=¹<a href="?¹.$query.$this->page_name.¹=¹.($this->page+1).¹">下一页</a>¹;

   }

   return $total.¹ ¹.$startpage.¹ ¹.$prepage.¹ ¹.$nextpage.¹ ¹.$endpage;

}

} 

?>

1、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;

2、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

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、操作元素的样式
主要包括以下几种方式：
$("#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

7、扩展我们需要的功能
$.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));

8、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert(¹mouse over event¹)})
.each(function(i){this.style.color=[¹#f00¹,¹#0f0¹,¹#00f¹][ i ]});

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、几个有用的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? "

11、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

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. //全选
    
2. $("input:checkbox").attr("checked", "true");
    
3. //反选
    
4. $("input:checkbox").each(function() {
    
5.         this.checked = !this.checked;
    
6. });