>> $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页面组装函数调用表达式，然后作为

 options = {

  type: 'GET / POST / PUT /DELETE'; //请求的方式 默认为GET, 如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

  url: 'handler.php', //请求的地址 默认为当前页

  async: true, //是否异步请求

 

  //发送到服务器的数据

  data: {name:'sindy', age:18}, //自动被转换为url参数形式(name=sindy&age=18), 也可以直接为字符串 'name=sidy&age=18'

  //对ajax返回的原始数据进行预处理的函数

  contentType: 'application/x-www-form-urlencoded', //内容的编码类型 默认为 application/x-www-form-urlencoded

  processData: true, //(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串)

                    以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

  dataType: "xml / html /script / json / jsonp/ text", //预期服务器返回的数据类型

  dataFilter: function(data, type){.. },// data: ajax返回的数据， type: 调用$.ajax(options)时，指定的options.dataType

  timeout: 5000, //设置请求超时时间(毫秒) 此设置将覆盖全局设置

  beforeSend: function(xhr){

    this; //指向options

  },

  complete: function(xhr, textStatus){//请求完成(无论成功或失败)时的回调函数

    this; //指向options

  },

  success: function(data, textStatus){

     //data 可能是xmlDoc, jsonObj, html, text等..

    this; //指向options

  },

  error: function(xhr, textStatus, error){

     this; //指向options

  },

  global: true, //是否触发全局的ajax事件 (ajaxStart, ajaxStop)

  cache: false, //不从浏览器缓存加载请求信息

  ifModified: true, //默认false, 是否仅在服务器数据改变时获取新数据， 使用Http包 last-modified头信息判断

  

  jsonpCallback:'mycallback', //在jsonp请求中，重写url参数里的callback部分的回调函数(http://example.com/test.php?name="cici"&callback=?), 变为callback=myCallback

  scriptCharset: 'utf-8', //只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。

  password: '123'; //用于响应Http访问认证请求的密码

  username: 'yourname' //用于响应Http访问认证请求的用户名

}

jsonpCallback参数示例：

var mycallback;

var url = 'http://localhost:8015/user.php';

$.ajax({

  url: url,

  method: 'get',

  data:null,

  dataType:'jsonp',

  jsonpCallback:'mycallback',

  success:function(data, textStatus,xhr){

   console.log(data, textStatus);

  }

});

>>-------------------- ajax事件 -----------------

1. $ele.ajaxComplete(callback);

$('#msg').ajaxComplete(function(event, xhr, ajaxOptions){

  $(this).append('<li>请求完成</li>');

}

2. $ele.ajaxSuccess(callback);

3. $ele.ajaxError(callback);

4. $ele.ajaxSend(callback);

$('#msg').ajaxSend(function(event, xhr, ajaxOptions){

  $(this).append('<li>开始请求： ' + ajaxOptions.url + '</li>');

}

5. $ele.ajaxStart(callback);

$('#loading').ajaxStart(function(){ $(this).show(); }

6. $ele.ajaxStop(callback);

$('#loading').ajaxStop(function(){ $(this).hide(); }

 

>>---------------- $.ajaxSetup(options) -------------

> $.ajaxSetup(options); //全局设置，设置ajaxOptions的默认值

$.ajaxSetup({

  url:'handler.php',

  type:'POST',

  global:false

});

$.ajax({data:mydata}); 

> $form.serialize(); //把表单内的控件的name/value属性序列化为 url参数形式

$('form').serialize();

> $('form').serializeArray(); //把表单内控件的name/value属性序列化为对象数组，如[{name1:value1}, {name2:value2}]

 

 其他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(); 只能看到数据缓存