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.