>> $ele.load(url, data, callback); //带data参数时为POST请求,否则为GET请求

  // $('#testload').load('data.html', {"name": "peter"}, function(r){console.log(r);}); //POST 全部html添加到容器中

  // $('#testload').load('data.html h1', {"name": "peter"}, function(r){console.log(r);});//POST 部分html添加到容器中

  $('#testload').load('data.html h1', function(r){console.log(r);});//GET 部分html添加到容器中

>> $.get(url,data, callback);

  $.get('test.php', {name:'kk', age:'a little old'}, function(r){ console.log('get:' + r); $('#testget').html(r); });

>> $.post(url, data, callback); //和$.get()一样，只是请求的方式不同

  $.post('test2.php',{title:'tower', des:'it is very tall'}, function(r){ console.log('post:' + r); $('#testpost').html(r); });

>> $.getJSON(url, data, callback); //当url为非同源的，则会用jsonp的方式工作

 1.  $.getJSON('test.js',{name: 'windy', age: 18}, function(json){ //json为对象，经过JSON.parse()

    console.log(json); $('#testgetjson').html( JSON.stringify(json) );

  });

  //当url为非同源的，则会用JSONP的方式请求

  //$.getJSON(crossUrl, data, callback);

  JSONP的工作方式: 回调函数callback 复制给临时全局函数jquery164509.., 临时全局函数传递给php页面，

  php页面组装函数调用表达式，然后作为<script>的内容返回给script, 解析执行后，删除临时的<script>标签

 2.  $.getJSON('http://localhost:800/jsonp.php?callback=?', {name:'windy', age:20}, jsonpback);

  function jsonpback(data){ $('#testjsonp').html('jsonp data:' + JSON.stringify(data) );}

>>  $.getScript(url, callback)

  $.getScript('sayhi.js', function(r){ //加载并执行脚本文件

    console.log('getScript:' +r, +' script has been loaded and executed.');

    sayhi('summer');

  });

>>------------------------  $.ajax(options) ---------------------------

// $.ajax(options)  //底层实现， 以上$.get(), $.post(), $.getJSON(), $.getScript() 内部都是调用$.ajax()的

 其他API

$.fn.map(function(index, ele))
$.fn.each(function(index, ele)) //迭代函数 return false 终止遍历
$.map(arr, function(ele, i))
// 隐式迭代

$(window).resize() -> $(window).trigger('resize')
$('body').click({hi:'hello'}, function(e){ console.log(e.data, 'clicked..');});

$.holdReady(true);
$.getScript('myplugin.js', function(){ $.holdReady(false); });

// load事件,url关联的元素： img, script, link, frames, iframes, window
$('form').bind('submit', false) => $('form').bind('submit', function(){ return false; }); //取消默认事件 和 事件冒泡
event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation();
$('a.disabled').on('click', false); //取消点击a的默认行为和事件冒泡

// trigger(), triggerHandler()触发事件时，传递数据
$('body').bind('myevent', function(evt, extraParams){ console.log(extraParams); });
$('body').trigger('myevent', 'hello');
$('body').on('myevent', function(evt, var1, var2){ console.log(var1, var2); });
$('body').trigger('myevent', ['hi', 'idle']);

$ele.delegate(selector, eventType, [eventData], handler);
$ele.delegate(selector, events);

// 自定义事件，事件命名空间， 解除绑定
$('div.test').off('click', '**');//移除所有代理事件
$('form').on('click.validator', 'button', validate);
$('form').on('keypress.validator', 'input', validate);
$('form').off('.validator');

event.originalEvent
event.target //触发事件的最深层元素
event.relatedTarget //mouseover mouseout
event.result //上一个事件处理函数的返回值
$('body').on('click', function(ev){ return 'good'; });
$('body').on('click', function(ev){ console.log(ev.result); });
event.which //按键对应的keyCode

// 避免在大文档中，过多的在document/body上代理事件 因为冒泡的路径比较长

// 创建事件
ev = $.Event('submit');
$form.trigger(ev);
ev.isDefaultPrevented();

event.target, event.currentTarget, this , (event.currentTarget==this)
// event.nameSpace
$('body').on('test.ns', function(ev){ console.log(ev.nameSpace);});
$('body').trigger('test.ns');

//动画
$ele.hide([duration],[easing],[complete] ); //slow normal fast 300, 500
$ele.hide(options);
options = {
duration: 'normal',
easing: 'linear', //默认支持 swing or linear
queue: true, //是否将动画放入队列中
specialEasing: {},
step: function(){}, //每个动画属性的每次变化
progress: function(){}, //每一步动画完成后执行
complete: function(){},
done: function(){},
fail: function(){},
always: function(){}
}

$.fx.off = true; //关闭动画效果 直接设置为最终值
$ele.hide('normal'); //无动画效果了

$ele.animate(properties, duration, easing, complete);
//数值型属性 properties: width height margin padding left top scrollLeft scrollTop border-width font-size opacity
//相对值 +=10 -=4
$ele.animate({left: '+=200'}, 400).queue(function(){//效果加入队列
$(this).toggleClass('red');
$(this).dequeue();//取出队列下一个效果并执行
});
$.dequeue(ele,[queueName]); //队列名queueName默认为 fx
$ele.finish([queueName]);//结束正在进行的动画，清除队列，所有动画的css属性设置为最终值
$ele.stop(true, true); //类似finish(), 结束当前动画，当前动画的css属性设置为最终值，清除队列
$ele.stop(isClearQueue, isToTargetVal);
$.fx.interval; // 13 多少毫秒渲染1帧
$ele.queue([queueName]); //返回已执行的函数队列数
$ele.queue([queueName], newqueue);
$ele.queue([queueName], callback);//将函数加入到动画队列中，callback中需要执行$ele.dequeue()来让后续动画继续
$ele.queue(function(next){
//do sth..
next();//同 $ele.dequeue();
});
$.queue(ele,[queueName]);
$.queue(ele,[queueName],callback);
$ele.stop(clearqueue, jumpToEnd);
$ele.fadeIn(duration,[easing],[complete]);
$ele.fadeIn(options);
$ele.fadeOut(..);
$ele.fadeTo(duration, opacity, [easing], [complete]);
$ele.fadeToggle(duration, [easing], [complete]);
$ele.slideDown(...);
$ele.slideUp(...);
$ele.slideToggle(..);

$ele.load(url, data, callback);// dataType:'html'
$.get(url, data, callback, dataType);
$.post(url, data, callback, dataType);
$.getJSON(url, data, callback); //get post or jsonp , set dataType:'json'
$.getScript(url, callback); //加载并执行脚本文件, 添加 <script>标签 并在onload时执行回调

$.ajaxSetup(options);
$ele.ajaxSuccess(function(event, xhr, settings){ .. });
$ele.ajaxError();
$ele.ajaxComplete();
$ele.ajaxStart();
$ele.ajaxStop();
$ele.ajaxSend();

$.param(obj); //对象 对象数组 或jq对象(包含input元素的)
myobj = { a:{one:1, two:2, three:3}, b:[1,2,3]};
decodeURIComponent( $.param(myobj) );
obj = {width:100, height:400};
$.param(obj);
objArr = [{name:'foo', value:'fooval'}, {name:'bar', value:'barVal'}];
$.param(objArr);

$form.serialize();//表单序列化 name1=val1&name2=val2
$('input, textarea, select').serialize();//对包含表单元素的jq对象序列化
$form.serializeArray();//表单序列化为对象数组 [{name:.., value:..}, {name:.., value:...}]
$('input, textarea, select').serializeArray();//包含表单元素的jq对象序列化

$.ajax(url, [settings]);//返回jqxhr对象，jqxhr实现了 Promise 接口
$.ajax([settings]);
settings = {
accepts: {}, //请求头的content-type
async: true, //是否异步 注意跨域和jsop不支持异步
beforeSend: function(xhr, settings){}, //请求发送前的回调，若返回false将取消请求
cache: false, //是否缓存请求结果 script和jsonp默认不缓存
complete: function(){},
contents:{}, //根据给定的内容类型，解析结果
contentType: 'application/x-www-form-urlencoded; charset=utf8',
context: obj, //设置相关回调函数的上下文, 回调中this默认指向settings ~~很有用的说
converters: {
"* text": window.String,
"text html": true,
"text json": jQuery.parseJSON,
"text xml": jQuery.parseXML
},
crossDomain: false, //若要在同域中强制跨域调用 设为true
data:{}, //object, string, array
dataFilter: function(data, type){}, //过滤返回的数据
dataType: 'json', //json, jsonp, script, text, html, xml, 
error: function(xhr, status, err){},
global: false, //是否触发全局的ajax事件
headers:{}, //额外设置的请求头数据
ifModified: false, //是否检查http头信息if-modify以决定是否成功
isLocal: false,
jsonp:'myjsonp', // myjsonp=? 而不是默认的callback=?
jsonpCallback: 'okcallback', //全局的函数名或匿名函数， ?myjsonp=okcallback
method: 'get', //get post.. jquery1.9添加 同旧参数 type
type:'get',
mimeType:'',
username:'',
password:'',
processData: true, //默认data为对象，则会转换为url参数形式发送
scriptCharset: 'utf-8',
statusCode:{}, //状态码对应的回调 {404: 404callback, 200: 200callback},
success: function(data, status, xhr){},
timeout: 3000,
traditional: false, //是否用传统方式序列化数据
url:''

}

//jqXhr对象是对原生xhr对象的封装，可通过jqxhr.getResponseHeader()获取响应头信息
//jqxhr.setRequestHeader(name, value);
//jqxhr.getAllResponseHeaders();
//jqxhr.getResponseHeader();
//jqxhr.abort();
//jquery1.5开始 jqxhr对象实现 Promise 接口, jqxhr提供了和回调函数名一致的方法 jqxhr.success(), jqxhr.error(), jqxhr.complete()

jqxhr.done(function(data, status, xhr){ }); //替代过时的 jqxhr.success()
jqxhr.fail(function(xhr, status, err){ }); //替代过时的 jqxhr.error()
jqxhr.always(function(data/xhr, status, xhr/err){ });//替代 jaxhr.complete()
jqxhr.then(doneCallback, failCallback);

$.ajaxSetup(options);//设置默认值

$(selector, [context]);
$(domElement);
$(domEles);
$(obj);
$(jqObj);
$(html, owndoc);
$(html, attrs);

$.parseHTML();
$.parseJSON();
$.parseXML();

$.noConflict();

$.sub();//创建jquery副本，其属性和方法修改不影响原来jquery, (过时方法，用插件替代)

$.when(deferreds); //可以传入一个或多个延迟对象,或普通的对象(done回调会被立即执行)
$.when($.get(url1), $.get(url2)).then(function(data1, data2){ });//当传递多个延迟对象给when时，实际上会被看做一个新的延迟对象(包含2个延迟)
$.when($.ajax(settings)).then(function(data, status, xhr){ });
$.when({'name':'idle', 'age': 22}).then(function(data){ console.log(data);});//立即resolve,执行doneCallback
$.when().then(function(){ console.log('fire at once');});

var df1 = $.Deferred();
var df2 = $.Deferred();

$.when(df1, df2).then(function(v1, v2){
console.log(v1, v2);
});

df1.resolve('hello');
df2.resolve('boy');

// ------

var d1 = $.Deferred();
var d2 = $.Deferred();
var d3 = $.Deferred();

$.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {
console.log( v1 ); // v1 is undefined
console.log( v2 ); // v2 is "abc"
console.log( v3 ); // v3 is an array [ 1, 2, 3, 4, 5 ]
});

d1.resolve();
d2.resolve( "abc" );
d3.resolve( 1, 2, 3, 4, 5 );//多个参数，则doneCallback的入参为数组

// --------
$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1, a2){
/* a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively */
var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
if ( /Whip It/.test(jqXHR.responseText) ) {
alert("First page has 'Whip It' somewhere.");
}
});

// Deferred延迟对象 jq1.5引入
var deferred = $.Deferred();
deferred.always(callback1, callback2..); //resolve or reject都执行的回调
$.get('data.php').always(function(){ console.log('complete..');});

deferred.done(calblack1, callback2..); //resolve时执行的回调
$.get('data.php').done(function(){ console.log('success get data');});

deferred.fail(callback1, callback2..); //reject时执行的回调
$.get('data.php').done(function(){ console.log('success');}).fail(function(){ console.log('fail');});

var deferred = $.Deferred();
deferred.resolve('hello');
deferred.state();// resolved

var promise = deferred.promise(); //promise对象是受限的deferred对象，不能通过resolve, reject改变状态

deferred.notify(args); //触发 progressCallback的执行
deferred.then(doneCallback, failCallback, progressCallback);
deferred.progress(callback);

deferred.notifyWith(context, [args]); //可指定progressCallback的上下文对象 其他同df.notify(args)
var df = $.Deferred();
df.progress(function(a){ console.log(this.name, a); });
var p = {name: 'sisi'};
df.notifyWith(p, ['sing']);

deferred.pipe(doneCb, failCb, progressCb); //用 df.then() 代替
var df = $.Deferred();
var df2 = df.pipe(function(value){//pipe返回新的延迟对象， then也是返回新的延迟对象
return value * 2; //旧的延迟对象被resolve，新的延迟对象也会接着resolve, (这里返回数值或对象则立即resolve新的延迟对象, 若返回另1个延迟对象 如: return $.ajax(url); 则当该延迟对象resolve时，df2跟着resolve)
}).done(function(v){ console.log(v);}); //延迟对象管道方式一个接一个地resolve
df.resolve(5);

//链式调用ajax
var request = $.ajax(url, {dataType: 'json'});
var chained = request.pipe(function(data){
return $.ajax(url2, {data: {user: data.userId}});
});
chained.done(function(data){ });

deferred.progress(progressCallback1, progressCallback2);

deferred.promise([targetObj]); //返回promise对象
// example1:
function asyncEvent(){
var dfd = $.Deferred();
setTimeout(function(){
dfd.resolve('great');
}, Math.floor(400+ Math.random()*2000));

setTimeout(function(){
dfd.reject('bad');
}, Math.floor(400+ Math.random()*2000));

setTimeout(function working(){
if(dfd.state() === 'pending'){
dfd.notify('working...');
setTimeout(working, 500);
}
}, 1);

return dfd.promise();
}

$.when( asyncEvent() ).then(
function(arg){
console.log('well', arg);
},
function(arg){
console.log('fail', arg);
},
function(arg){
console.log('going', arg);
}
);

// example2：
var obj = { hello: function(name){ console.log('hello', name); } };
var dfd = $.Deferred();
dfd.promise(obj); //让obj实现promise接口
dfd.resolve('alice');
obj.done(function(name){ obj.hello(name); }).hello('sisi');

deferred.reject([args]);
deferred.rejectWith(context, [args]);
deferred.resolve(args);
deferred.resolveWith(context, [args]);

deferred.state(); //返回延迟对象当前的状态：pending resolved rejected
deferred.then(doneCb, failCb, progressCb); //参考 df.pipe()

$ele.promise([type], [targetObj]); // type: 'fx', targetObj: 需绑定promise方法的对象
$('div').each(function(i){
$(this).fadeIn().fadeOut(1000 * (i+1) );//一个接一个div渐隐
});
$('div').promise() //返回promise对象 会在动画结束后被resolve
.done(function(){ console.log('finished..')});

function effect(){
return $('div').fadeIn(800).delay(1200).fadeOut();
}
$.when( effect() ).done(function(){ console.log('finished..'); });

$.contains(container, contained);//检测一个元素是否在另一个元素内 container需为domElement
$.each(collection, function(key, val){ });//迭代函数 可迭代对象和数组 ， 返回false终止迭代
$.extend(target, [object1], [objectN]);
$.extend(deep, target, [object1], [objectN]);//深度拷贝
$.extend({}, src1, src2); //undefined值不会被复制
$.globalEval(code); //在全局上下文执行一些代码
function test(){
$.globalEval('var newvar = true; ');
}
test();

$.grep(array, function(ele, idx){ return true;}, invert); //类似[].filter, 返回过滤后的新数组
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
$.grep(arr, function(n, i){ return n> 5; });
$.inArray(value, arr, fromIndex); //类似 [].indexOf();
$.inArray( 5 + 5, [ "8", "9", "10", 10 + "" ] ); // -1 严格比较

$.isArray();
$.isEmptyObject(); //{}
$.isPlainObject();//{name:'sisi'}
$.isFunction();
$.isNumeric();
$.isWindow();
$.isXMLDoc(document); //false
$.makeArray();//类数组orjq对象转换为数组 ~~$.makeArray(arguments)
$.map(collection, function(ele, key){ });
$.merge(arr1, arr2);//合并数组元素 arr1会被扩展
$.merge([], arr2); //克隆数组
$.merge( [0,1,2], [2,3,4] ); //[0, 1, 2, 2, 3, 4]  ~~$.unique( $.merge(arr1, arr2) ) 合并数组并去重
$.noop;
$.now(); // (new Date).getTime()

$.parseHTML(data, [context], [keepScript]);
$.parseJSON(json);//注意传入的是严格的json
$.parseXML(data); //返回xmldoc

$.proxy(fn, context, [args]); //返回为fn绑定上下文后的新函数, 还可绑定部分参数。类似bind
$.proxy(objec, method); //固定对象方法的上下文为自身

$.support;//建议用外部库 modernizr, $.support包含很多特性检测的结果，如： $.support.ajax, $.support.boxModel
$.trim([str]);
$.type(param); //数据类型判断
$.type(''); $.type([]); $.type(/test/)
$.unique(arr); //数组或dom元素去重

$ele.get([index]);//返回dom元素 或 dom元素数组 ~~$ele.get() 类数组转换为真正的数组
$ele.index(); //表示范围为 兄弟节点
$ele.index(selector); //选择器参数 ，表示查找的范围
$ele.index(element); //dom元素或jq对象，表示被查找的元素,而$ele表示查找范围
$ele.toArray(); //同 $ele.get()
$ele.context;
$ele.selector;

$.Callbacks(); //事件处理能力 jq1.7+
$.Callbacks( 'unique stopOnFalse' ); //flags: once, menory,unique, stopOnFalse
var callbacks = $.Callbacks(); //~~创建事件处理中心 比较有用
callbacks.add();
callbacks.remove();
callbacks.fire();
callbacks.disable();
callbacks.empty();
callbacks.fired();
callbacks.fireWith(context, args);
callbacks.has(fn);
callbacks.lock();
callbacks.locked();

function fn1(a){
console.log(a);
}
function fn2(a){
console.log('fn2', a);
}

callbacks.add(fn1);
callbacks.add(fn2);
callbacks.fire('morning');

// $.Callbacks $.Deferred 和 pub/sub 模式，促进代码松耦合

用$.Callbacks()实现观察者模式

var observer = {

    hash: {},

    subscribe: function(id, callback) {

        if (typeof id !== 'string') {

            return

        }

        if (!this.hash[id]) {

            this.hash[id] = $.Callbacks()

            this.hash[id].add(callback)

        } else {

            this.hash[id].add(callback)

        }

    },

    publish: function(id) {

        if (!this.hash[id]) {

            return

        }

        this.hash[id].fire(id)

    }

}

// 订阅

observer.subscribe('mailArrived', function() {

    alert('来信了')

})

observer.subscribe('mailArrived', function() {

    alert('又来信了')

})

observer.subscribe('mailSend', function() {

    alert('发信成功')

})

// 发布

setTimeout(function() {

    observer.publish('mailArrived')

}, 5000)

setTimeout(function() {

    observer.publish('mailSend')

}, 10000)

$.Event解析
==============
$.Event(event/type, [props]); 返回可读写的jq事件对象 $event

$.event.fix(event); 在内部调用了$.Event构造函数，包装了原生事件对象

$.cache存储了所有注册的事件处理程序，实际上dom元素上的只有一个事件处理程序( $.cache[ele[$.expando]].handle , 其内部用 $.event.dispatch实现对缓存事件处理程序的访问)

$._data(domEle); 可以查看dom元素的数据缓存和绑定事件
$(domEle).data(); 只能看到数据缓存

最新文章

1. SQL Server-数据类型（七）
2. Spring配置c3p0数据源时出错报:java.lang.NoClassDefFoundError: com/mchange/v2/ser/Indirector
3. （转载）JavaWeb学习总结(五十一)——邮件的发送与接收原理
4. test hypertext links for validity, accessibility, and recent modification
5. UESTC 395 Dynamic Query System --Treap
6. 响应式设计中几个class区别
7. HDU 5515 Game of Flying Circus 二分
8. angular ng-class使用笔记
9. OpenCV中Mat的列向量归一化
10. DevOps的几个场景
11. 在Delphi下使用迅雷APlayer组件进行免注册开发
12. The authenticity of host &#39;172.16.33.53 (172.16.33.53)&#39; can&#39;t be established的问题(日志六)
13. face detection[CNN casade]
14. 在django中使用FormView，success_url死活不能生效的问题
15. idea的protobuf使用
16. mac下设置mongodb开机启动方法
17. mysql 授权的时候库名不能添加单引号homestead.* 写成 &#39;库名&#39;.* 错的语法
18. 告别C#，进入了下一个阶段的学习啦
19. usaco 2009 12 过路费
20. LeetCode之链表

热门文章

1. asp.net MVC Razor 语法(1)
2. CSS中的 REM PX EM
3. AlarmManager类的应用
4. Deep Learning（深度学习）学习笔记整理系列之（四）
5. getMetaData()
6. PHP 单列模式实例讲解以及参考网址
7. Csharp多态的实现(虚方法)
8. 微信支付java版V3验证数据合法性
9. 使用#define定义字面值和伪函数
10. Java学习之字符串的创建