jquery

1、jquery代码风格

1、**的重要∗∗在jQuery程序中。不管是页面元素的选择、内置的功能函数，都是美元符号“”来起
始的。

而这个“$”就是jQuery其中最重要且独有的对象：jQuery对象。所以我们在页面元
素选择或运行功能函数的时候能够这么写：
2、容错性好

$().css(‘color’, ’red’); //理论上合法。但实际上缺少元素而报错

3、连缀功能
值得一提的是。运行了.css()这个功能函数后，终于返回的还是jQuery对象。那么也就是说。jQuery的代码模式是採用的连缀方式，能够不停的连续调用功能函数。

2、使用$(function(){})的载入方式

3、jquery支持的选择器

简单选择器
支持后代 、群组、多类、统配、指明元素前缀

  //$('.box>p').css('color','white');   //事实上css样式也是同意这样写的可是ie6不支持   box类下的p标签
   // console.log($('.box>p')[0].innerHTML);    //后代选择器   将这个jquery对象转化为js原生对象
   //console.log($('.box.pox').html()) ;    //jquery选择多类的方法  选择的这个对象及有box类。也有pox类
    $('.box,.pox').css('color','pink');     //jquery的群组选择器
    $('div.box'); //限定必须是.box 元素获取必须是 div   类为box的div
    $('p#box div.side'); //同上

高级选择器
1、find(‘p’)方法 寻找后代 后代选择器包括 子 孙 从孙等
2、chidren(‘p’)方法 子选择器 仅仅能选择到子 不能选择 孙
3、$(‘#box+p’)方法 div节点的同级的后一个节点==next方法

$('#box').next('p').css('color', 'red'); //和 next 选择器等价

4、(‘#box ~p’)方法 ==nextAll 选择器(后面全部同级节点)  
5、prev  和  prevAll(‘#box’).prev(‘p’).css(‘color’, ‘red’); //同级上一个元素
$(‘#box’).prevAll(‘p’).css(‘color’, ‘red’); //同级全部上面的元素
属性选择器

4、jquery过滤选择器

过滤选择器简称：过滤器。

它事实上也是一种选择器。而这样的选择器相似与 CSS3(http://t.mb5u.com/css3/)里的伪类
1.基本过滤器
first last focus even odd eq gt header not
2.内容过滤器
内容过滤器的过滤规则主要是包括的子元素或文本内容上

3.可见性过滤器
：hidden ：visible
4.子元素过滤器

5、jquery操作DOM

1、设置元素及内容

2、元素属性操作

注意：最后一个value指的是这个节点原来就存在attr的属性。也能够通过json(里边带着函数)来这是属性
3、元素样式操作
.css () .css（參数) 这些获取的都是计算后的样式，并非仅仅是行内样式
这里的參数能够为对象和函数(index,value)
注意：$(‘.box’).css([‘background’,’width’])这种方法返回的是原生的js对象数组

 var bb=$('.box').css(['background','width'])
    for(var i in bb){
        console.log(bb[i]);
    }

所以jquery提供了工具集 $.each()这种方法能够轻松地遍历原生态的js数组

   var bb=$('.box').css(['background','width'])
    $.each(bb,function(attr,value){
        console.log(attr+":"+value);
    })

使用$.each()能够遍历原生的 JavaScript 对象数组。假设是 jQuery 对象的数组怎么使用.each()方法呢？

$('div').each(function (index, element) { //index 为索引，element 为元素 DOM
alert(index + ':' + element);
});

addClass removeClass
toggleClass(‘类名’)，两个类的切换 有和没有这个类名的效果
toggleClass(‘类名’,动产生true或者false的 函数)
4、CSS 方法
width() 这种方法同上能够没有參数，能够传递一个宽度，能够传递一个函数
height() 方法
获取元素的边框+内外边距的方法

获取对象的偏移

6、DOM 节点操作

1.创建节点

$('<div class="small"></div>')

2.插入节点
内部插入

外部插入

3.包裹节点

4.节点操作
除了创建、插入和包裹节点，jQuery 还提供了一些常规的节点操作方法：复制、替换、删除节点
复制节点 clone()
注意：clone(true)參数能够为空，表示仅仅复制元素和内容。不复制事件行为。而加上 true參数的话。这个元素附带的事件处理行为也复制出来。

删除节点 remove();
注意：.remove()不带參数时，删除前面对象选择器指定的元素。而.remove()本事也能够带选择符參数的，比方：(‘div’).remove(‘#box’);仅仅删除 id=box 的 div。

(‘div’).detach(); //保留事件行为的删除
上面的两个方法都是返回被删除的节点
清空节点 empty()
替换节点 replaceWith()

7、基础事件

一．绑定事件
jQuery 通过.bind()方法来为元素绑定这些事件。 能够传递三个參数： bind(type, [data], fn)，
type 表示一个或多个类型的事件名字符串；
[data]是可选的。作为 event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；
fn 表示绑定到指定元素的处理函数。
//使用 unbind 删除绑定的事件
$(‘input’).unbind(); //删除全部当前元素的事件
二．简写事件
为了使开发人员更加方便的绑定事件。jQuery 封装了经常使用的事件以便节约很多其它的代码。

我
们称它为简写事件。
使用鼠标移入移出的时候建议使用hover
键盘事件的charCode(字符的ASCII编码)和keyCode(键盘码)的

8、高级事件

jQuery 不但封装了大量经常使用的事件处理，还提供了不少高级事件方便开发人员使用。比方模拟用户触发事件、事件托付事件、和统一整合的 on 和 off，以及仅运行一次的 one 方法。

这些方法大大减少了开发人员难度，提升了开发人员的开发体验。
模拟用户操作 trigger triggerHandler
在事件触发的时候，有时我们须要一些模拟用户行为的操作。比如：当网页载入完毕后自行点击一个按钮触发一个事件，而不是用户去点击。
$(‘input’).trigger(‘click’);

    $('div').bind('click','bind',function (e,data1) {
        alert('我的第一次点击来自模拟！'+ e.type+'|'+ data1+'|'+ e.data);   //click+saa+bind
    }).trigger('click',['sas']);

这两个函数的差别
在常规的使用情况下，两者差点儿没有差别，都是模拟用户行为，也能够能够传递额外參数。但在某些特殊情况下。就产生了差异：
1、triggerHandler()方法并不会触发事件的默认行为。而.trigger()会
2..triggerHandler()方法仅仅会影响第一个匹配到的元素，而.trigger()会影响全部。
3..triggerHandler()方法会返回当前事件运行的返回值，假设没有返回值，则返回undefined。而.trigger()则返回当前包括事件触发元素的 jQuery 对象(方便链式连缀调用)
4..trigger()在创建事件的时候，会冒泡。但这样的冒泡是自己定义事件才干体现出来，是jQuery 扩展于 DOM 的机制。并非 DOM 特性。

而.triggerHandler()不会冒泡。
命名空间
有时。我们想对事件进行移除。

但对于同名同元素绑定的事件移除往往比較麻烦，这个
时候。能够使用事件的命名空间解决。

$('div').bind('click.abc', function () {
        console.log('abc');
    });
    $('div').bind('click.xyz', function () {
        console.log('xyz');
    });
    $('div').unbind('click.xyz');

事件托付 live die 已经废除
已经废除的一个方法：.live()原理就是把 click 事件绑定到祖先元素(document)上，而仅仅需要给(document)绑定一次就可以，而非 2000 次。然后就能够处理兴许动态载入的按钮的单击事件。在接受不论什么事件时。$(document)对象都会检查事件类型(event.type)和事件目标(event.target)，这种方法不能够连缀
使用die来取消这个事件托付。
delegrate 和undelegrate

//绑定谁，谁就在开头   就是点击谁
    $('.big_test').delegate($('.test'),'click',function(e){
       $('<p style="width:100px;height:100px;background:red;" class="test"></p>').appendTo($(this));
    })

新版本号的on和off建议使用

  /*var test=$('.test');
     var big=$('.big_test');
    test.on('click',{user:'sasa'},function(e){
        console.log('test');
    },false)   //最后传递一个false表示取消了默认行为和冒泡行为
    big.on('click',{user:'sasa'},function(e){
        console.log('big');
    })
    test.off('click');*/
    //使用on来模拟事件托付
    var test=$('.test');   //子
    var big=$('.big_test');   //父
    big.on('click','.test',function(){
        console.log(this);  //子
        $(this).clone(true).appendTo(big);
    })
    big.off('click','.test')

9、事件对象

事件对象的属性
使用js的事件对象会存在非常多兼容性的问题。可是使用jquery的事件对象就不会
能够使用事件对象能够得到的信息
type 得到事件的类型
target 获取绑定事件的元素(触发事件的DOM)
data 函数传递过来的额外的数据
注意：获取事件对象的额外数据（这些数据是通过bind函数的第二个參数得到的）
relatedTarget
currentTarget 得到的是监听元素的DOM（绑定的那个）这个也能够用this来代替
relatedTarget 从哪移入、移出最邻近的 使用mouseover，mouseout来演示
pageX /pageY 相对于页面原点的横/纵坐标（缩放）
screenX/screenY
clientX/clientY
在没有滚动栏的时候1和3 的值是一样的，有滚动栏的时候1和3 的值是不一样的 2的值会受到缩放的影响
timeStamp 获取事件发生的时间戳
which 鼠标的左、中、右 键盘的按键
演示target和currentTarget的差别
html代码

<div style="width:200px;height:200px;background:green;">
    <p style="width:100px;height:100px;background:red;"></p>
</div>

js代码

 var wai=$('div');
    wai.click(function(e){
        console.log(e.target);      //p或者div
        console.log(e.currentTarget);   //输出的始终是div
        console.log(this);   //输出的始终是div
    }) 

事件对象的冒泡和默认行为
冒泡
假设在页面中重叠了多个元素。而且重叠的这些元素都绑定了同一个事件。那么就会出现冒泡问题。

jQuery 提供了一个事件对象的方法：event.stopPropagation()；这种方法设置到须要触发的事件上时。全部上层的冒泡行为都将被取消。

$('input').click(function (e) {
alert('按钮被触发了！
');
e.stopPropagation();
});

默认
网页中的元素。在操作的时候会有自己的默认行为。比方：右击文本框输入区域。会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据

注意：这些方法都是由事件对象来调用

10、动画效果

show hide 自己主动切换 toggle
同步动画:一起显示
异步动画：逐个显示

   $('.show').click(function(){
        $('span').first().show('slow',function aa(){
            $(this).next().show('slow',aa);
        })
    })
    $('.hidden').click(function(){
        $('span').last().hide('slow',function aa(){
            $(this).prev().hide('slow',arguments.callee);
        })
    })

滑动、卷动 slideDown slideUp

 $('.show').click(function(){
        $('.box').slideDown('slow');
    })
    $('.hidden').click(function(){
        $('.box').slideUp('slow');
    })
});

淡入、淡出 fadeIn fadeOut fadeTo
animate函数

$('.show').click(function(){
        $('.box').animate({
            'height':'400px',
            'backgroundColor':'red',
            'fontSize':'30px'，
            'left':'+=100px'
        },function(){
            console.log('动画运行完了');
        });
    })

可是假设仅仅是单独的调用这种方法。实现的是同步动画
队列动画：自己定义实现列队动画的方式。有两种：1.在回调函数中再运行一个动画；2.通过连缀或
顺序来实现列队动画。
1、连缀实现队列动画

 $('.show').click(function() {
        $('.box')
            .animate({'height': '400px'})
            .animate({'left': '+=100px'})
    })

2、回调函数实现队列动画

   $('.show').click(function() {
        $('.box')
            .animate({'height': '400px'},function(){
                $(this).animate({'left': '+=100px'})
            })
    })

使用queue来模拟队列动画

 $('.show').click(function() {
        $('.box')
            .animate({'height': '400px'},function(){
                $(this).animate({'left': '+=100px'})
            }).queue(function(next){
                $(this).css('background','red')
                next();
            });
    })

动画方法
非常多时候须要停止正在运行中的动画，jQuery 为此提供了一个.stop()方法。

它有两个可
选參数：.stop(clearQueue, gotoEnd)。clearQueue 传递一个布尔值，代表是否清空未运行完的
动画列队。gotoEnd 代表是否直接将正在运行的动画跳转到末状态
使用无參数的stop()方法的时候。停止的时候仅仅是停止掉当前的这个列队动画，然后继续运行后面的列队动画
第一个參数为true 停止当前的动画而且清除后面的列队动画，默认值是false
第二个參数是false 会停止跳转到目标的位置上，而且不会运行后边的。默认值为false
delay()方法
有时在运行动画或列队动画时。须要在运动之前有延迟运行。jQuery 为此提供了.delay()方法。这种方法能够在动画之前设置延迟，也能够在列队动画中间加上。
动画属性
jQuery 提供了两种全局设置的属性。 分别为： .fx.interval，设置每秒运行的帧数；.fx.off。关闭页面上全部的动画

11、AJAX

概述
Ajax 这个概念是由 Jesse James Garrett 在 2005 年发明的。

它本身不是单一技术，是一串
技术的集合，主要有：
1.JavaScript，通过用户或其它与浏览器相关事件捕获交互行为。
2.XMLHttpRequest 对象，通过这个对象能够在不中断其它浏览器任务的情况下向server发送请求。
3.server上的文件，以 XML、HTML 或 JSON 格式保存文本数据；
4.其它 JavaScript，解释来自server的数据（比方 PHP 从 MySQL 获取的数据）并将其呈现到页面上。

由于 Ajax 包括众多特性，优势与不足也非常明显。优势主要下面几点：
1.不须要插件支持（一般浏览器且默认开启 JavaScript 就可以） ；
2.用户体验极佳（不刷新页面就可以获取可更新的数据） ；
3.提升 Web 程序的性能（在传递数据方面做到按需放松，不必总体提交） ；
4.减轻server和带宽的负担（将server的一些操作转移到客户端） ；
而 Ajax 的不足由下面几点：
1.不同版本号的浏览器度 XMLHttpRequest 对象支持度不足(比方 IE5 之前)；
2.前进、后退的功能被破坏（由于 Ajax 永远在当前页，不会几率前后页面） ；
3.搜索引擎的支持度不够（由于搜索引擎爬虫还不能理解 JS 引起变化数据的内容） 。
4.开发调试工具缺乏（相对于其它语言的工具集来说，JS 或 Ajax 调试开发少的可怜） 。
使用 Ajax 最关键的地方。就是实现异步请求、接受响应及运行回调
．load()方法
对于封装的方式，jQuery 採用了三层封装：
最底层的封装方法为：.ajax()，而通过这层封装了第二层有三种方法：.load()、.get()和.post()，.load()局部方法带着是全局方法
默认的get提交方法

   $('input').click(function(){
         $('.box').load('test.html .test1');   //load起到了筛选的功能，仅仅选出了class为test1的显示
     })

post
提交方式

 $('input').click(function(){
         $('.box').load('test',{user:'saa'},function(response,status,xhr){
             console.log('返回的值为：' + response + '，状态为：' + status + '，状态是：' + xhr.statusText);
             $('.test2').animate({'fontSize':'30px'},2000)
         });   
     })

注意回调函数里边的第三个參数是封装了前两个属性和其它属性的一个对象
其中status有例如以下几种情况

局部方法和全局方法的差别：
.load()方法是局部方法，由于他须要一个包括元素的 jQuery 对象作为前缀。
对于用途而言，.load()适合做静态文件的异步获取，而对于须要传递參数到server页面的，.get()和.post()更加合适
而.get()和.post()是全局方法，无须指定某个元素。

这两个方法能够传递4个參数 url(必选) [传递的參数] [回调函数(3个參数)] [type]
type是指定server返回的类型，通常是通过仅仅能识别，不须要程序猿来指定
使用get方式向服务起传递数据的2种方式
1、键值对的对象

     $('input').click(function(){
         $.get('test',{user:'sa',pass:'212'},function(response, status, xhr){
             console.log(response);
         })
     })

2、url中的？而且通过&来连接多个參数

 $('input').click(function(){
         $.get('test?name=123&user="sasa"',function(response, status, xhr){
             console.log(response);
         })
     })

在控制层直接通过req.query来得到传递的对象
可是post不支持第一种。仅仅支持第2种

    $('input').click(function(){
         $.post('test?
',{user:'saa',sa:'saaa'},function(response, status, xhr){
             $('.box').html(response);
         })
     })

在控制层直接通过req.body来得到传递的对象
异步获取server的xml文件

    $('input').click(function(){
         $.get('test.xml',function(response, status, xhr){
             var ss=$(response).find('root').find('user').text()
             $('.box').html(ss);
         })
     })

异步获取server端的json文件

     $('input').click(function(){
         $.get('test.json',function(response, status, xhr){
             console.log(response[0].user);
         })
     })

server端的json文件例如以下（注意：尽量使用双引號）

[
  {
    "user":"saa",
    "name":"sasa"
  }
]

.post()和.get()
.post()方法的使用和.get()基本上一致。他们之间的差别也比較隐晦，基本都是背后的
不同，在用户使用上体现不出。详细差别例如以下：
1.GET 请求是通过 URL 提交的，而 POST 请求则是 HTTP 消息实体提交的；
2.GET 提交有限制大小（2KB） 。而 POST 方式不受限制；
3.GET 方式会被缓存下来，可能有安全性问题，而 POST 没有这个问题。
4.GET 方式通过GET[]获取，POST方式通过_POST[]获取。

最高层是.getScript()和.getJSON()方法。

动态载入js（当鼠标滚动到一定的位置才载入某个js文件）

   $(document).scroll(function(){
        var top=$(window).scrollTop();
        if(top>100){
            $.getScript('javascripts/test.js')
        }
    })

$.ajax()方法
.ajax()是所有ajax方法中最底层的方法，所有其他方法都是基于.ajax()方法的封装。

这种方法仅仅有一个參数，传递一个各个功能键值对的对象。
使用ajax实现了向server传递一个表单

 $('input[type=button]').click(function(){
        $.ajax(
            {
                type:'post',
                url:'test',
                data:{      
                    user:$('input[name=user]').val(),
                    pass:$('input[name=pass]').val()
                },
                success:function(response,status,xhr){
                    $('.box').html(response)
                }
            }
        )
    })

表单序列化
serialize
Ajax 用的最多的地方莫过于表单操作。而传统的表单操作是通过 submit 提交将传输数据到server端。假设使用 Ajax 异步处理的话。我们须要将每一个表单元素逐个获取才方能提交。

这样工作效率就大大减少。

  $('input[type=button]').click(function(){
        $.ajax(
            {
                type:'post',
                url:'test',
                data:$('form').serialize(),
                success:function(response,status,xhr){
                    $('.box').html(response)
                }
            }
        )
    })

使用表单序列化方法.serialize()，会智能的获取指定表单内的全部元素。

这样，在面对大量表单元素时。会把表单元素内容序列化为字符串。然后再使用 Ajax 请求。.serialize()方法不但能够序列化表单内的元素。还能够直接获取单选框、复选框和下拉列表框等选中的内容。

serializeArray()

    $('input[type=button]').click(function(){
        $.ajax(
            {
                type:'post',
                url:'test',
                data:$('form').serializeArray(),
                success:function(response,status,xhr){
                    $('.box').html(response)
                }
            }
        )
    })

12、AJAX进阶

ajax全局事件
jQuery 提供了两个全局事件。.ajaxStart()和.ajaxStop()。这两个全局事件。仅仅要用户触发了 Ajax，请求開始时（未完毕其它请求）激活.ajaxStart()。请求结束时（全部请求都结束了）激活.ajaxStop()。

 $(document).ajaxStart(function(){
        console.log($('.ajax'));
        $('.ajax').css('display','block');
        console.log(221212);
    })
    $(document).ajaxStop(function(){
        $('.ajax').hide();
    })

ajax的错误处理
实现对错误的处理能够通过下面3中方式来实现
1、ajax函数里边的error

 $('input[type=button]').click(function(){
        $.ajax(
            {
                type:'post',
                url:'http://www.google/test',
                data:$('form').serializeArray(),
                success:function(response,status,xhr){
                    $('.box').html(response)
                },
                error:function(xhr, errorText, errorStatus){
                   console.log(xhr.status);
                }
            }
        )
    })

2、通过全局.ajaxError()事件方法来返回错误信息

    $(document).ajaxError(function(event, xhr, settings, infoError){
        console.log(xhr.status + ':' +xhr.statusText);
        console.log(settings.url);
    })

3、连缀实现

    $(document).ajaxError(function(event, xhr, settings, infoError){
        console.log(xhr.status + ':' +xhr.statusText);
        console.log(settings.url);
    })

请求全局事件
jQuery 对于 Ajax 操作提供了非常多全局事件方法。.ajaxStart()、.ajaxStop()、.ajaxError()等事件方法。他们都属于请求时触发的全局事件，除了这些。另一些其它全局事件：

    $(document).ajaxSend(function(){
        console.log('ajax请求发送之前');
    }).ajaxComplete(function(){
        console.log('ajax请求发送完毕，不论对与错都会运行');
    }).ajaxSuccess(function(){
        console.log('ajax请求被成功处理')
    }).ajaxError(function(){
        console.log('ajax请求被错误处理')
    })

当然ajaxComplete ajaxSuccess ajaxError相应于ajax中的complete success error
注意：在 jQuery1.5 版本号以后，使用.success()、.error()和.complete()连缀的方法。能够用.done()、.fail()和.always()代替
使用$ajax()訪问json文件
仅仅需加一句dataType：json

13、jquery中的工具函数

字符串操作
$.trim()

   var aa='   dsdsadv    ';
   console.log(aa);
    console.log($.trim(aa))

数组和对象操作
$.each()循环

 var arr=[1,2,3,4,5];
    $.each(arr,function(index,value){
        $('.box').html($('.box').html()+index+'  '+value);
        console.log(+index+''+value);
    })

$.grep() 筛选数据

    var arr=[1,2,3,4,5];
   var ww=$.grep(arr,function(element,index){
        return index<3;
    })
    console.log(ww);  //[1, 2, 3]

$.map() 改动数据

 var arr = [5,2,9,4,11,57,89,1,23,8];
    var arrMap = $.map(arr, function (element, index) {
        if (element < 6 && index < 5) {
            return element + 1;
        }
    }); 
    console.log(arrMap);    //[6, 3, 5]

$.inArray() 获取查找到元素的下标

   var arr = [5,2,9,4,11,57,89,1,23,8];
    var arrInArray = $.inArray(1, arr);
    console.log(arrInArray);  //7

$.merge() 合并两个数组

    var arr = [5,2,9,4,11];
    var arr2 = [23,2,89,3,6,7];
    console.log($.merge(arr, arr2));   //[5, 2, 9, 4, 11, 23, 2, 89, 3, 6, 7]

測试操作

注意：
1、纯粹对象：由{}或 new Object()创造出的对象 比方window就不是纯粹对象
2、contains这种方法穿的两个參数（父，子）都必须是js的原生对象
3、isWindow的使用alert($.isWindow(window));

14、URL 操作

URL 地址操作，在之前的 Ajax 章节事实上已经讲到过。仅仅有一个方法：$.param()，将对象的键值对转化为 URL 键值对字符串形式

   var obj = {
        name : 'Lee',
        age : 100
    };
    console.log($.param(obj));  //name=Lee&age=100

15、插件

插件(Plugin)也成为 jQuery 扩展(Extension)。是一种遵循一定规范的应用程序接口编写出来的程序。

眼下 jQuery 插件已超过几千种。由来自世界各地的开发人员共同编写、验证和完好。而对于 jQuery 开发人员而言。直接使用这些插件将高速稳定架构系统，节约项目成本。
jquery这个文件一定要放在最前边

16、$.extend()

Jquery的扩展方法extend是我们在写插件的过程中经常使用的方法，该方法有一些重载原型，在此。我们一起去了解了解。
1、extend(dest,src1,src2,src3…);起到一个合并的作用

 $(function(){
        var test={
            cc:{}
        }
        test.cc= $.extend(test.cc,{name:"Tom",age:21},{name:"Jerry",sex:"Boy"});
        console.log(test.cc)  //{name: "Jerry", age: 21, sex: "Boy"}
    })

2、省略dest參数
　1、$.extend(src)
　　该方法就是将src合并到jquery的全局对象中去。如：
　　

 $.extend({
            hello:function(){alert('hello');}
        });
        $.hello();

　2、$.fn.extend(src)
　　该方法将src合并到jquery的实例对象中去，如:
　　

 var test={
            cc:{}
        }
        $.extend(test,{
            hello:function(){alert('hello');}
        })
        test.hello();

3、Jquery的extend方法另一个重载原型：
extend(boolean,dest,src1,src2,src3…)
第一个參数boolean代表是否进行深度拷贝。其余參数和前面介绍的一致，什么叫深层拷贝，我们看一个样例：

var result1=$.extend( true,  {},
                { name: "John", location: {city: "Boston",county:"USA"} },
                { last: "Resig", location: {state: "MA",county:"China"} } );
        console.log(result1);
      /*  运行之后的结果是result={name:"John",last:"Resig",
            location:{city:"Boston",state:"MA",county:"China"}}*/
        var result2=$.extend( false, {},
                { name: "John", location:{city: "Boston",county:"USA"} },
                { last: "Resig", location: {state: "MA",county:"China"} }
        );
        console.log(result2)  //  result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

17$.parseJSON()

将字符串转化为json对象

      var ss='{"width":1000,"height":270,"posterWidth":640,"posterHeight":270,"vertical":"middle","scale":0.9,"speed":500}';
        console.log(typeof ss);   //string 
        console.log(typeof $.parseJSON(ss));   //object