jQueryのよく使われるツール関数の詳細(三)
4062 ワード
$.noConflict()noConflict()メソッドを使用してjQuery変数に新しい名前を指定し、競合を防止
$.each()ループ操作は、データだけでなくjsonもループできます.
$.Callbacks()コールバックリストオブジェクトを多用することで、コールバック関数を管理する強力な方法が提供されます.
$.Deferred()JQの遅延オブジェクト
最初のajaxリクエスト
第2のajaxリクエスト
$.ajax()リモートデータのロードをHTTPリクエストで要求します.最下位の方法
$.get()はgetメソッドによりHTTPにリモートデータのロードを要求する
$.post()リモートデータのロードをpostメソッドでHTTPに要求
$.getScript()HTTP GETリクエストによりJavaScriptファイルの読み込みと実行を行います.
$.getJSON()は、HTTP GETからjsonファイルの読み込みと実行を要求されます.
var jq=$.noConflict();
jq('#div').....
$.each()ループ操作は、データだけでなくjsonもループできます.
var arr=['sun','leo','lee'];
$.each(arr,function(i,val){
console.log(i); // 0 1 2
console.log(val); //'sun','leo','lee'
})
var json={name:'sun',age:22}
$.each(json,function(key,val){
console.log(key); //name age
console.log(val); //sun 22
})
$.Callbacks()コールバックリストオブジェクトを多用することで、コールバック関数を管理する強力な方法が提供されます.
function a(){
alert(1);
return false;
}
function b(){
alert(2);
}
function c(){
alert(3);
}
var cb=$.Callbacks();
cb.add(a);
cb.add(b);
cb.fire(); //1 2
var cb=$.Callbacks();
cb.add(a);
cb.add(b);
cb.fire();
cb.add(c); //1 2
var cb=$.Callbacks();
cb.add(a);
cb.add(b);
cb.fire();
cb.add(c);
cb.fire(); // 1 2 1 2 3
var cb=$.Callbacks('once');
cb.add(a);
cb.add(b);
cb.fire();
cb.add(c);
cb.fire(); // 1 2
var cb=$.Callbacks('memory');
cb.add(a);
cb.add(b);
cb.fire();
cb.add(c); // 1 2 3
var cb=$.Callbacks('unique');
cb.add(a);
cb.add(a);
cb.fire(); // 1
var cb=$.Callbacks('stopOnFalse');
cb.add(a);
cb.add(b);
cb.add(c);
cb.fire(); // 1
var cb=$.Callbacks();
(function(){
function a(){
alert(1);
}
cb.add(a);
cb.add(b);
})()
function b(){
alert(2);
}
cb.fire(); //1 2
setTimeout(function(){
alert(1);
},1000);
alert(2); // 2 1
// setTimeoutshi , alert(2), alert(1), alert(1), alert(2) ,
var cb=$.Callbacks();
setTimeout(function(){
alert(1);
cb.fire();
},1000);
cb.add(a);
function a(){
alert(2); //1 2
}
$.Deferred()JQの遅延オブジェクト
var dfd=$.Deferred();
setTimeout(function(){
alert(1);
// dfd.resolve();
dfd.reject();
},1000)
// dfd.done(a);
// function a(){
// alert(2);
// }
dfd.fail(a);
function a(){ //1 2
alert(2);
}
最初のajaxリクエスト
$.ajax({
url:'xxx.php',
success:function(){},
error:function(){}
});
第2のajaxリクエスト
$.ajax('xxx.php').done(function(){}).fail(function(){});
$.ajax('xxx.php').then(function(){},function(){});
$.when($.ajax('xxx.php'),$.ajax('yyy.php')).done(function(){}).fail(function(){});
$.ajax()リモートデータのロードをHTTPリクエストで要求します.最下位の方法
$.ajax({
url:"xxx.php", //
type:"POST", // , get
data:'name=leo&age=20', // {name:"leo",age:20}
dataType:'json', // , json $.parseJSON()
success:function(data){}, //
error:function(err){}, //
async:false //true ,false
})
$.get()はgetメソッドによりHTTPにリモートデータのロードを要求する
$.get("xxx.php",'name=leo',function(){},'json').error(function(){});
$.post()リモートデータのロードをpostメソッドでHTTPに要求
$.post("xxx.php",'name=leo',function(){},'json').error(function(){});
$.getScript()HTTP GETリクエストによりJavaScriptファイルの読み込みと実行を行います.
$.getScript('xxx.js',function(){}).error(function(){})
$.getJSON()は、HTTP GETからjsonファイルの読み込みと実行を要求されます.
$.getJSON('xxx.json',function(){}).error(function(){})