jQuery扩展

jQuery扩展

$.extend()方法

jQuery.extend([boolean],target [，object1] [，objectN])
[boolean] 表示是否深拷贝，默认false 浅拷贝
当提供两个或多个对象参数时，其他对象的属性将合并到目标对象。

var obj1 = {a: 1, b: 2, c: {d: 4, e: 5}};
var obj2 = {c: {g: 7}, d: 8};
$.extend(obj1,obj2); //浅拷贝
$.extend(true,obj1,obj2); //深拷贝

for (var key in obj2){ //浅拷贝
    obj1[key] = obj2[key];
}

var obj3 = JSON.stringify(obj2); //深拷贝

Object.assign(obj1,obj2); //浅拷贝

console.log( obj1.c === obj2.c );

如果只提供一个参数对象，则表示省略了target参数。在这种情况下，jQuery对象本身被假定为目标。
通过这样做，您可以向jQuery名称空间添加新功能。这对于希望向JQuery添加新方法的插件非常有用。
$.extend 扩展 jQuery 类的方法

$.extend({
    fly:function (){
        alert('I can fly');
    }
})
$.fly();

$.fn.extend()方法
jQuery源码如下:
jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    ......

jQuery.fn = jQuery.prototype  // 原型对象
jQuery.fn.extend = jQuery.prototype.extend
$.fn.extend 扩展 jQuery 实例对象的方法
$.fn.extend({
    rclick:function (fn){
        $(this).bind('contextmenu',function (e){
            fn(e);
        })
    }
})
$('#box').rclick(function (e){
    alert('右键点击');
})

jQuery AJAX

$.ajax( options ) 通过 HTTP 请求加载远程数据

url：请求的url地址

type：请求类型(get/post...)

cache：是否读取缓存，默认true

data：要发送给服务器的数据，示例：
"name=jack&age=19"
string或Object
{name:"jack",age:"19"}

async：默认true，为异步请求

dataType：服务器返回的数据类型
特殊的格式JQ会进行预解析和兼容性修复。
可选择的值："xml" , "html" , "script" , "json" , "text"，”jsonp”等

timeout：设置超时(毫秒)

success：请求成功的回调函数

error：请求失败的回调函数

complete：请求完成后的回调函数，无论成功与失败

beforeSend：发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义 HTTP头。
在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

$('#login').click(function (){
    $.ajax({
        type:'get',
        url:'test.php',
        dataType:'json',
        cache:false, //不使用缓存
        success:function (json){
            $('h1').html(json.name+json.sex+json.age);
        },
        error:function (){
            alert('请求失败');
        }
    });
})

serialize( )

将一个form表单内的所有数据转换为可以发送给服务器的字符串
示例：

$("form").serialize()
"name=小明&age=19&msg=abc"

$.get()

$.get( url [, data] [, callback] [, dataType]);
url : 请求的URL
data ： 可选，发送至服务器的数据
callback ： 可选，请求完成时的回调函数
dataType ： 可选，参照$.ajax参数中的dataType

$.get(“act.php”,{user:“cainiao”,pass:“123”},function (data){
    alert(data.msg);
},“json”);

$.post()

$.post 与 $.get 语法相同，唯一的不同就是请求是以post方式进行。
示例：

$.post(“act.php”,{user:“cainiao”,pass:“123”},function (data){
    alert(data.msg);
}, ”json”);

$.getJSON()

$.getJSON(url [, callback]);加载一段JSON并解析

$.getJSON('data/test2.json',function (json){
    $('.con').text(json.title[0]);
});

$.getScript()

getScript() 方法使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript

$.getScript(url,success(response,status))
$('.btn').click(function (){
    $.getScript('data/test.js');
})

load()

方法从服务器加载数据，并把返回的数据放置到指定的元素中

$(selector).load(url,data,function(response,status,xhr))
$('div').load('data/test.html')

jsonp：

ipt.onkeyup=function (){
    $.ajax({
        type:'get',
        url:'http://suggestion.baidu.com/su?wd='+$('#ipt').val(),
        dataType:'jsonp',
        jsonp:'cb',
        // jsonpCallback:'mycallback',
        success:function (json){
            // $('#list').empty();
            $('#list').html('');
            for (var i = 0; i < json.s.length; i++) {
                $('#list').append('<li>'+json.s[i]+'</li>');
            }
        }
    });
}

Q.E.D.