JQuery

JQuery基础

搭建环境

下载JQuery：

> bower install jquery

引入JQuery包：

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"/>

使用：

jQuery构造函数：jQuery(...),可简写为$(...)，每次$(xxx)都是创建一个新的JQuery对象

<script type="text/javascript">
    //$(xxx)
</script>

文档加载

使用JS的onload加载文档（注意：若定义多个，执行时会使用后一个的定义）
```
window.onload=function(){
  //...
};
```
使用JQuery的$加载文档（注意：是一个方法，多个时都会被执行）
```
$(document).ready(function(){
  //...
});
```
注意：都是在页面DOM加载完成后执行

JQuery与DOM

Javascript操作DOM元素：

获取（一个或一组）

document.getElementById("xxx");
document.getElementByName("xxx");
document.getElementByTagName("xxx");

创建DOM元素
```
document.createElement("xxx");
```

JQuery操作DOM元素：
- 获取： $("xxx")，$(dom)（会筛选出页面中一组满足xxx的元素，用JQuery封装）
- 创建：$("<xxx/>")
- 注意：使用$(xxx)，返回的一定是一个集合，所以称为JQuery包装集
JQuery与DOM转换
- $(...)：DOM=>JQuery
- $(...)[index],$(...).get(index): JQuery=>DOM

举例：

//dom
var div=document.getElementById("testDiv");
div.innerHtml="Hello";

//dom=>jquery
var divJquery1=$(div);
divJquery1.html();            // Hello
divJquery1.html("Hello World");

//dom=>jquery
divJquery=$("#testDiv");
divJquery.html();            // Hello World

//jquery=>dom
var div=divJquery[0];
console.log(div.innerHtml);        // Hello World

//create element by javascript
var input=document.createElement("input");
input.type="text";
document.body.appendChild(input);

//create element by jquery
var inputJquery=$("<input/>");
inputJquery.appendTo($("body"));

选择器

将一个选择表达式xxx，放进构造函数$("xxx")，得到匹配的元素集合（即为一个包装集）

其中xxx可为（类似CSS选择器的格式）：

基础选择：
- #id
- tagName
- .styleClass
- *
层级选择
- ancestor descendent
- parent > child
- prev + next (相当于$("prev").next("next"))
- prev ~ siblings (相当于$("prev").nextAll("next"))
基本过滤
- :first
- :last
- :not(selector)
- :even
- :odd
- :eq(index)（index>=0）
- :gt(index)
- :lt(index)
子元素过滤
- :nth-child(index/even/odd/equation)
- :first-child
- :last-child
- :only-child
内容过滤
- :contains(text)
- :empty
- :has(selector)
- :parent (匹配含有子元素或者文本的元素)
可见性过滤
- :hidden
- :visible
属性过滤
- [attribute]
- [attribute=value]
- [attribute!=value]
- [attribute^=value]
- [attribute$=value]
- [attribute*=value]
表单对象
- :hidden
- :input,:text,:password,:radio,:checkbox
- :submit,:reset
表单属性过滤
- :enabled
- :checked
- :selected
- :disabled
混合
- selector1, selector2, selectorN：获取多个选择符的合集
- [selector1][selector2][selectorN]：匹配同时符合多个属性选择符的对象

包装集操作

改变结果集

过滤：对结果集进行筛选，缩小选择结果（返回原对象）
- not
- filter
- has
- eq(index),first,last
查找：从结果集出发，选择附近的元素（返回新对象）
- next,nextAll,prev,prevAll,siblings
- children,find
- parent,parents,closest
  - closest：从元素本身逐级向上匹配，返回可包含0或1个元素
  - parents：从根元素开始逐级向下匹配，返回可包含0或1或多个元素
- slice(start,[end])
- contents()：返回匹配元素内部所有子节点，包括文本节点（若是iframe，则查找文档内容）
串联
- add：添加匹配元素到包装集
- end()：返回前一个包装集
- addSelf()：筛选结果集添加到最初包装集

结果集检查

size()
index(obj)
is(expr)：判断，包装集中有一个匹配则返回true
hasClass：判断，包装集中有一个含有某特定类则返回true（= is("." + class)）

元素的操作：取值/赋值

使用同一个函数，来完成取值和赋值（由函数的参数决定是取值还是赋值）
- attr({...}),attr("...","..."),attr("...")
- prop({...}),prop("...","..."),prop("...")
- css({...}),css("...","..."),css("...")
- width,height
- html("xxx"),html()
- text("xxx"),text()
- val(xxx),val()
赋值，返回原包装集
- removeAttr
- removeProp
- addClass,removeClass,toggleClass
- empty() ：清空元素内容（但是不删除该元素）

元素的操作：替换

替换节点(是移动到目标位置来替换，而不是复制一份来替换)

replaceWith：某集合被某集合替换掉
replaceAll：使用某集合替换掉某集合

eg：

<b class="first">Hello1</b>
<b class="second">Hello2</b>
<b class="third">Hello3</b>
=>
<b class="second">Hello2</b>
<b class="first">Hello1</b>

$("b.third").replaceWith($("b.first"));

$("b.first").replaceAll($("b.third"));

$("b").replaceWith("<p>World</p>");
=>
<p>World</p>
<p>World</p>

元素的操作：创建/删除

创建：
- <Xxx/> 新元素标签直接传入jQuery的构造函数即可
- clone：复制，返回新包装集
删除
- remove：不保留被删除元素的事件（返回被移除的集合）
- detach：保留被删除元素的事件，有利于重新插入文档时使用

元素操作: 移动

操作元素在网页中的位置：移动直接移动该元素或移动其他元素（以下操作都返回原对象）

内部插入

append,prepend：在节点内部的后面/前面添加某元素
appendTo,prependTo：将节点添加到某元素内部的后面/前面

eg：

<p>Say</p>
<b>Hello</b>
<i>Tom<i>
=>
<p><i>Tom</i>Say<b>Hello</b></p>

$("p").append($("b").prepend($("i"));

$("b").appendTo("p");
$("i").prependTo("p");

外部插入

after,before：在节点前面/后面添加元素
insertAfter，insertBefore：将节点添加到某元素后面/前面

eg：

<a>Say</a>
<b>Hello</b>
<i>Tom<i>
=>
<i>Tom</i><a>Say</a><b>Hello</b>

$("a").after("b").before("i")

$("b").insertAfter("a");
$("i").insertBefore("a");

包裹

wrap：匹配的每个节点分别用某个元素包裹
wrapAll：整个包装集用某个元素包裹
wrapInner：匹配的每个节点的内容用某个元素包裹

eg：

<b>Hello1</b>
<b>Hello2</b>

$("b").wrap("<div/>");

<div><b>Hello1</b></div>
<div><b>Hello2</b></div>

$("b").wrapAll("<div/>");

<div>
  <b>Hello1</b>
  <b>Hello2</b>
</div>

$("b").wrapInner("<div/>");

<b><div>Hello1</div></b>
<b><div>Hello2</div></b>

unwrap：移除节点的父元素

<div>
  <b>Hello1</b>
  <b>Hello2</b>
</div>
=>
<b>Hello1</b>
<b>Hello2</b>

$("b").unwrap();

工具方法

数据缓存

$(xxx).data(key,value),$(xxx).data(key)
$(xxx).removeData(key)

判别

$.contains(container,contained) 一个DOM节点是否包含另一个DOM节点
$.type 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）
$.isNumeric 判断是否是一个数字
$.isArray 判断某个参数是否为数组
$.isEmptyObject 判断某个对象是否为空（不含有任何属性）
$.isFunction 判断某个参数是否为函数
$.isPlainObject 判断某个参数是否为用"{}"或"new Object"建立的对象

$.support 判断浏览器是否支持某个特性

  $.type(true) === "boolean"
  $.type(3) === "number"
  $.type("test") === "string"
  $.type(function(){}) === "function"
  $.type([]) === "array"
  $.type(new Date()) === "date"
  $.type(/test/) === "regexp"

  $.isNumeric("");     // false
  $.isNumeric({});     // false (empty object)
  $.isNumeric(NaN);    // false
  $.isNumeric(null);   // false
  $.isNumeric(true);   // false

  $.isNumeric("-10");  // true
  $.isNumeric(16);     // true
  $.isNumeric(0xFF);   // true
  $.isNumeric(3.1415); // true
  $.isNumeric(+10);    // true

  $.isFunction($.noop)    //true
  $.isFunction("Hello")    //false

  $.isEmptyObject(undefined)        //true
  $.isEmptyObject(null)        //true
  $.isEmptyObject({})        //true
  $.isEmptyObject( new Object() )  // true
  $.isEmptyObject([] )  // true
  $.isEmptyObject({ foo: "bar" }) // false
  $.isEmptyObject([1,2]) // false
  $.isEmptyObject("sdfe") // false
  $.isEmptyObject(function(){...}) // false

  $.isPlainObject({}) // true
  $.isPlainObject(new Object()) // true
  $s.isPlainObject("test") // false

数组和对象操作

$.merge(first,second) 合并数组
- 合并第二个数组到第一个数组上
- eg:
```
$.merge( [0,1,2], [2,3,4] )   //[0,1,2,2,3,4]
```
$.extend([d],tgt,obj1,[objN])
- $.extend(p1,p2)：p2覆盖p1，返回p1
- $.extend(p0,p1,p2)：p2与p1合并存储到p0，返回p0
$.makeArray(obj)
- 将类对象转换为数组对象
$.toArray()
- 把jQuery集合中所有DOM元素恢复成一个数组
- eg:
```
$('li').toArray();  // [<li id="foo">, <li id="bar">]
```
$.inArray(val,arr,[from])
- 返回value在arrayObj中下标的位置(从0开始计数)
- 如果value不在array中则返回-1
- eg:
```
$.inArray("Pete",[4, "Pete", 8, "John"],2) // -1
```
$.unique(array)
- 删除数组中重复元素
- 只处理删除DOM元素数组，不能处理字符串或者数字数组

$.each( collection, callback ) 遍历集合,返回原对象

$.each(jsonObj,function(key,value){...});
$.each(arrayObj,function(indexInArray,valueOfElement){...});
callback中
- return false ：将停止循环 (同 break)
- return true ：跳至下一个循环(同 continue)
注意：和$(selector).each(function(index,domEle){...});不一样
- function中使用this时， this 指代的是 DOM 对象而非 jQuery 对象

eg:

var arrayObj= ['a','b','c'];
var returnValue = $.each(arrayObj, function(index,value) {
  alert(index + " " + value);
});

var jsonObj= {one:1, two:2, three:3};
var returnValue=$.each(jsonObj,function(key,value) {
  alert(key+":"+value);
});

$("div").each(function(index, domEle) { 
    // domEle == this
    $(domEle).css("backgroundColor", "yellow");
    if ($(this).is("#stop")) {
         $("span").text("Stopped at div index #" + index);
         return false;
    }
});

$.map(array,callback) 转换数组，返回一个新的数组
- $.map( array, callback(elementOfArray, indexInArray){...} )
- callback中
  - 通过return返回新的值，不return就没有值了
  - 返回null在这里相当于不返回
- 注意：和 $(dom).map(callback(){...})不一样
- eg：
```
var arr = [ "a", "b", "c", "d", "e" ];
var arr2 = jQuery.map(arr, function(n, i){
  return (n.toUpperCase() + i);
});
alert(arr);        //a,b,c,d,e
alert(arr2);    //A0,B1,C2,D3,E4
```
$.grep(array,callback) 过滤数组
- $.grep( array, function(elementOfArray, indexInArray) [, invert] )
- 参数二：
  - 一个测试函数（注意：这里此函数参数和each,map的回调函数的参数顺序相反）
  - 字符串：正则表达式，相当于执行return elementOfArray.match(正则表达式) (a 代表数组元素，i 代表元素索引值)
- 参数三：
  - false：默认
  - true：回调函数的返回值的效果刚好相反，返回true的会被去掉
- eg：
```
var arrayObj = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
arr = jQuery.grep(arrayObj , function(n, i){
return (n != 5 && i > 4);
});
```
```
var bigNumbers = $.grep(arrayObj ,'a>5');
```

格式转化

$("form").serialize() 序列表格内容为字符串
$("form").serializearray() 序列表格内容为JSON数组
$.param(obj,[traditional]) 对象序列化为字符串（是.serialize()的核心方法）
$.parseXML(data) 解析一个字符串，返回XML文档
$.parseJSON(jsonString) 解析一个字符串，返回jsonObj
JSON.stringify(jsonObje) 将jsonObj转换为一个字符串

特效

animate(css,time,callbackFunc)

  $("#go").click(function(){
      $("#block").animate({
          width: "90%",
          height: "100%",
          fontSize: "10em",
          borderWidth: 10
      }, 1000 );
  })
  $("#right").click(function(){
      $(".block").animate({left: '+50px'}, "slow");
  });

  $("p").animate({
      left: 50, opacity: 'show'
  }, 500);

  $("p").animate({
      opacity: 'show'
  }, "slow", "easein");

  $('div').animate(
      {
        left : "+=50", //不断右移
        opacity : 0.25 //指定透明度
      },
      300, // 持续时间
      function() { alert('done!'); } //回调函数
  );

淡入淡出：fadeIn/fadeOut([speed],[easing],[fn]),fadeToggle

  $('h1').fadeIn(300); // 300毫秒内淡入
  $('h1').fadeOut('slow'); // 缓慢地淡出
  $('p').fadeOut(300, function() { $(this).remove(); });

滑入滑出：slideDown/slideUp([speed],[easing],[fn]),slideToggle
stop()和delay()停止或延缓特效的执行
$.fx.off,设置为true，则关闭所有网页特效

事件

支持事件

blur 表单元素失去焦点。
change 表单元素的值发生变化
click 鼠标单击
dblclick 鼠标双击
focus 表单元素获得焦点
focusin 子元素获得焦点
focusout 子元素失去焦点
hover 同时为mouseenter和mouseleave事件指定处理函数
keydown 按下键盘（长时间按键，只返回一个事件）
keypress 按下键盘（长时间按键，将返回多个事件）
keyup 松开键盘
load 元素加载完毕
mousedown 按下鼠标
mouseenter 鼠标进入（进入子元素不触发）
mouseleave 鼠标离开（离开子元素不触发）
mousemove 鼠标在元素内部移动
mouseout 鼠标离开（离开子元素也触发）
mouseover 鼠标进入（进入子元素也触发）
mouseup 松开鼠标
readyDOM加载完成
resize 浏览器窗口的大小发生改变
scroll 滚动条的位置发生变化
select 用户选中文本框中的内容
submit 用户递交表单
toggle 根据鼠标点击的次数，依次运行多个函数
unload 用户离开页面

事件对象

event.target
event.currentTarget
event.data
event.preventDefault() 阻止事件的默认行为（比如点击链接，会自动打开新页面）
event.stopPropagation() 停止事件向上层元素冒泡
event.pageX 事件发生时，鼠标距离网页左上角的水平距离
event.pageY 事件发生时，鼠标距离网页左上角的垂直距离
event.type 事件的类型（比如click）
event.which 按下了哪一个键

事件绑定

把事件直接绑定在网页元素
- Xxx([[data],fn])
绑定事件/解除事件绑定
- bind/unbind
- one: 一次性
- on/off ：代替bine,unbind
- hover(overFunc,outFunc)：绑定鼠标悬停事件（鼠标移动到一个对象上面及移出这个对象）
- toggle([speed],[easing],[fn]) ：绑定多个事件处理器函数，以响应被选元素的轮流的 click 事件
事件的委托处理
- on/off：代替live,delegate
- 子元素"委托"父元素处理事件：
  - 子元素的事件会逐级向上"冒泡"，成为父元素的事件
  - 利用这一点，可以大大简化事件的绑定

使用举例：

事件直接绑定

 $('p').click(function(){
     alert('Hello');
 });

使用bind绑定（on方法使用类似）

 //可同时绑定click和change事件
 $('input').bind('click change',function() {
   alert('Hello');
 });
 //可在事件名后面加命名空间
 $("#test").bind("mouseover.test mouseout.test",function(event){
     $(this).toggleClass("bgClass");
 })

使用unbind解绑（off方法使用类似）

 $("input").unbind();        //解绑所有事件
 $("#test").unbind(".test");    //解绑使用“test”命名空间的事件

 var foo=function(){...};
 $("input").bind("click",foo);
 $("input").unbind("click",foo);        //解绑特定函数的绑定

使用on/off进行事件的委托处理说明：相较与上面使用$("td").on("click",function(){...}) 这个事件只需要在父元素绑定1次即可而不需要在子元素上绑定n次大大提高了性能

 //方式一：
 $("table").on("click", "td", function(){
     $(this).toggleClass("click");
 });
 $("table").off("click", "td");

 //方式二（更好）：
 $(document).on("click", "td", function(){
     $(this).toggleClass("click");
 });
 $(document).off("click", "td");

使用hover绑定切换事件（鼠标移入移除时触发）

 $("td").hover(
   function () {
     $(this).addClass("hover");
   },
   function () {
     $(this).removeClass("hover");
   }
 );

使用toggle绑定切换事件（点击时触发）

 $('td').toggle();            //隐藏/显示
 $("p").toggle("slow");    //缓慢显示
 $("p").toggle("fast",function(){
    alert("Animation Done.");
  });
 $("td").toggle(
     function () { $(this).addClass("selected"); },
     function () { $(this).removeClass("selected"); }
 );

事件触发

xxx() : 直接调用事件
trigger(type,[data])：存在冒泡
triggerHandler(type,[data])：不冒泡

$("p").click();    
$("input").change();

$("#test").on("click",{name:"Tom"},function(event,a,b){
    console.log(event.target);
    console.log(event.currentTarget);
    console.log(a+","+b);            //1,2
    console.log(event.data)        //{name:"Tom"}
});
$("#test").trigger("click",[1,2]);

延迟

（参考 jQuery的deferred对象详解）

Deferred

【回调函数：异步/同步操作，一般不能立即返回结果，为它们指定回调函数（callback），一旦那些操作运行结束，就触发调用】

Deferred："延迟"到未来某个点再执行，作为回调函数解决方案，提供了更好的控制：

可以进行链式操作
允许自由添加多个回调函数
所有操作都可用（本地操作，ajax操作，同步，异步均可）

deferred对象

创建
- $.Deferred()
三种执行状态：
- 未完成：继续等待，或调用progress方法指定的回调函数
- 已完成：立刻调用done方法指定的回调函数
- 已失败：立刻调用fail方法指定的回调函数
改变执行状态：
- 自动修改
  - ajax操作时，deferred对象根据返回结果，自动改变自身的执行状态
- 手动修改：
  - resolve() ："未完成"=>"已完成"，触发done方法指定的function
  - reject() ："未完成"=>"已失败"，触发fail方法指定的function
绑定回调函数：
- progress(callback)
- done(callback)
- fail(callback)
- then(doneCallback,failCallback)
- always(callback)
注意：deferred对象是一个全局对象，执行状态可以从外部改变，防止执行状态被外部改变：
- 方式一：deferred.promise()：
  - 在原来的deferred对象上返回另一个deferred对象，屏蔽了与改变执行状态有关的方法（resolve,reject）
- 方式二：deffered.promise(func)：
  - 在func上部署Deferred接口
- 方式三：$.Deferred(func)：
  - 生成的deferred对象将作为这个函数的默认参数

使用示例1：$.Deferred

一个耗时的操作

var wait = function(){
    var tasks = function(){
      alert("执行完毕！");
    };
    setTimeout(tasks,5000);
};

为它指定回调函数

var wait=function(){
    var dtd = $.Deferred();     // 新建一个Deferred对象
    var tasks = function(){
        alert("执行完毕！");
        //dtd.reject();
        dtd.resolve();         // 改变Deferred对象的执行状态
    };
    setTimeout(tasks,5000);
    return dtd.promise();     // 返回promise对象
}

wait()
.done(function(){ alert("Success！"); })
.fail(function(){ alert("Fail！"); });

使用示例2：$.ajax

$.ajax("test.html")
    .done(function(){ alert("Success"); })
    .fail(function(){ alert("Fail"); });
    .done(function(){ alert("Success 2");} );

使用示例3：$.when

$.when($.ajax("test1.html"), $.ajax("test2.html"))
　　.done(function(){ alert("Success"); })    //都成功时执行
　　.fail(function(){ alert("Fail！"); });    //其中一个失败就执行

Ajax

以下操作返回一个Promise对象（屏蔽了修改执行状态方法的Deferred对象）

$.get(url,{...},successCallback,type);,$.post(url,{...},successCallback,type);
- 简单HTTP GET/POST请求
- successCallback：请求成功调用回调函数
- type：返回内容格式，例如 xml, html, script, json, text
```
$.get(url,{name:"tom"},function(data,status){
  console.log(data);
},"json");
$.post(url,{name:"tom"},function(data,status){
  console.log(data);
},"json");
```

$.getJSON(url, {...}, successCallback)

$.getJSON("test.json", { name: "John", time: "2pm" }, function(data){
    alert("JSON Data: " + data.users[3].name);
});

$.getScript(url,successCallback) 加载并执行脚本

$.getScript("test.js", function(){
    alert("Script loaded and executed.");
});

$(...).load(url,{...},successCallback)
- 返回内容成功加载到包装集后调用successCallback函数
- successCallback: function(data){...},data为DOM对象
$.ajax({...}); ,$.ajax(url,{...}); 返回一个promise对象
- type: 默认为GET，表请求方式（GET,POST,DELETE,PUT,...）
- async:默认为true，表异步
- contentType:默认为application/x-www-form-urlencoded; charset=UTF-8,发送服务器时内容编码类型
- data: 发送到服务器的数据，object或string类型
- processData：默认为true,会自动转换要发送的data为对象以配合contentType
- dataType: 预期服务器返回的数据类型（html,xml,json,script,jsonp），默认自动根据 HTTP 包 MIME 信息返回
- global：默认为true，允许触发 AJAX 全局事件
- ifModified：默认为false，表示仅在服务器数据改变时获取新数据（根据 HTTP 包 Last-Modified 头信息判断）
- headers：默认{},会被beforeSend 函数内的设置覆盖
- 局部事件触发方法（除了beforeSend外，其他在1.8后被弃用，推荐使用Promise对象的done,fail,always方法）：
  - beforeSend:function (XMLHttpRequest,settings) {}
  - success:function (data, textStatus,jqXHR) {...}
  - error:function (jqXHR, textStatus, errorThrown){...}
  - complete:function (jqXHR, textStatus){...}
- AJAX全局事件：通过事件绑定的方式绑定到元素上（可通过设置global:false来禁用）
  - ajaxStart
  - ajaxSend
  - ajaxSuccess
  - ajaxError
  - ajaxComplete
  - ajaxStop
- eg：
```
$.ajax({
  url:"/test",
  type:"get",
  data:{id:1},
  beforeSend:function(xhr,settings){
      $("#preLoading").show();
  }
}).then(function(data, textStatus, jqXHR){
  //success/done
},function(jqXHR, textStatus, errorThrown){
  //error/fail
});
```
```
$.ajax({
  url:"/test",
  type:"post",
  data:JSON.stringify({id:1}),
  processData:false,
  contentType:"application/json;charset=utf-8",
  dataType:"json",
  beforeSend:function(xhr,settings){...}
}).done(function(data, textStatus, jqXHR){
  //success
  ...
}).fail(function(jqXHR, textStatus, errorThrown){
  //error
  ...
}).always(function(data|jqXHR, textStatus, jqXHR|errorThrown) {
  //complete
  ...
})
```
```
$("#loading").bind("ajaxSend", function(){
  $(this).show();
}).bind("ajaxComplete", function(){
  $(this).hide();
});
```
```
// 禁用全局Ajax事件
$.ajax({
  url: "test.html",
  global: false
  ...
});
```

注意：

若返回完整html

<html>
    <head>
        <title>UserBlocks</title>
        <link rel="stylesheet" type="text/css"  href="resources/css/base/reset.css" media="screen"/> 
    </head>
    <body>
        <div>Hello</div>
        <div>World</div>
    </body>
</html>

$(data)=>包装集内容为：

<title>UserBlocks</title>
<link rel="stylesheet" type="text/css"  href="resources/css/base/reset.css" media="screen"/> 
<div>Hello</div>
<div>World</div>

若返回html片段

<div>Hello</div>
<div>World</div>

$(data)=>包装集内容为：

<div>Hello</div>
<div>World</div>

调用函数

不同作用域函数使用

call(context,param1,param2,...)，apply(context,[...])

  var sum=function(arg1,arg2){
      console.log(arg1+arg2);
  }
  sum.call(this,1,2);        //3
  sum.apply(this,[1,2]);    //3
  console.log(sum.length)    //2 表示sum函数的参数个数

  var showName=function(){
      console.log(this.name);
  }
  var c={
      name:"Tom"
  }
  function People(name){
      this.name=name;
  }

  //传入不同上下文作用域，结果不同
  sum.call(c);    //Tom
  sum.call(new People("Jerry"));    //Jerry

$.proxy(func,context)(args),$.proxy(context,funcName)(args)

  var obj = {
      name: "John",
      test: function() {
          alert( this.name );
          alert(arguments);
      }
  };

  //两种方式等效，返回代理函数
  var func=$.proxy( obj, "test" );
  func=$.proxy( obj.test, obj );

  func();            //执行：实则执行obj的test函数，能获取this.name
  obj.test();        //执行：无法获取this.name

  var obj={
      name:"John"
  };
  var fn=function(color){
      alert(this.name);
      alert(color);
  }

  //两种方式等效
  $.proxy(fn,obj)("red");        //John,red
  fn.call(obj,"red");            //John,red

插件

`$`符号冲突

使用jQuery.noConflict()

var $j=jQuery.noConflict();
$j("td").css("color","#f00");

使用闭包

(function($){
  $("td").css("color","#f00");
})(jQuery)

`$.fn`包装集插件

使用$.fn创建包装集插件（jQuery专门定义了jQuery.fn=jQuery.prototype）