| 目次 |
|---|
|
・関数としてのjQuery ・ユーザエージェント ・配列とオブジェクト操作 ・検査 ・文字列操作 ・相互運用 ・内部API |
jQueryの使い方は、CSSセレクタを用いて要素を特定するものが一般的です。
しかし、jQueryには関数としての素質も持っています。
「Ajax」の「jQuery.ajax」などがその例です。
jQueryはブラウザに依らないスクリプトの構築が可能です。
しかし、それでもブラウザによる情報や挙動も存在します。
jQueryでは、そういった点に関しても情報を提供しています。
リスト1. jQuery.support
function Sample21(){
var str21 = '';
jQuery.each(jQuery.support, function(key, val){
str21 = str21 + '\n' + key + '=' + val;;
});
alert(str21)
}
実装例
jQuery(CSSセレクタ)の結果がjQueryオブジェクトの配列であるように扱われます。
同様に配列やオブジェクトそのものも、jQuery関数を用いて手軽に扱うことができます。
リスト2. jQuery.support
function Sample32(){
var num32 = 0;
jQuery.each([1,2,3,4,5,6,7,8,9], function(){
num32 = num32 + this
});
alert(num32)
}
実装例
1+2+3+4+5+6+7+8+9+10=?
リスト3. jQuery.grep(配列,コールバック関数[,invert])
function Sample33(){
var arr = jQuery.grep([1,2,3,4,5,6,7,8,9,10], function(src,ind){
return (src % 3 == 0);
});
alert(arr.join(','))
}
実装例
1～10の内、3の倍数は？
リスト4. jQuery.map(配列,コールバック関数)
function Sample34(){
var arr0 = [3,2,5,3,6,0,8];
var arr1 = jQuery.map( arr0, function(src,ind){
return "ABCDEFGHIJKLMNOPQRSTUVWXYZ".substr(src,1);
});
alert(
arr0.join(',')
+ '→' +
arr1.join(',')
);
}
実装例
数値をアルファベットに変換
リスト5. jQuery.inArray(検査値,配列)
function Sample35(){
var n = Math.floor(Math.random() * 10);
var map = [3,2,5,3,4,6,8,5,6,2,1,0];
var res = jQuery.inArray(n,map);
alert(n + '→' + res);
}
実装例
数値変換
リスト6. jQuery.unique(配列)
function Sample36(){
var arr0 = [1,2,4,6,7,4,6,4,2,4,6];
var str0 = arr0.join(',');
var arr1 = jQuery.unique(arr0);
var str1 = arr1.join(',');
alert(str0 + '→' + str1);
}
実装例
重複チェック
Javascriptでは、配列、オブジェクト、関数は名前での違いがありません。
jQueryには、それらを検査する関数が用意されています。
リスト7. jQuery.isArray(検査対象)
function Sample47(){
var A = [1,2,3];
var B = {x:1,y:2};
alert(
'Aは配列? ' + jQuery.isArray(A) + ' (配列です)'
+ '\n' +
'Bは配列? ' + jQuery.isArray(B) + ' (オブジェクトです)'
);
}
実装例
リスト8. jQuery.isFunction(検査対象)
function Sample48(){
var A = [1,2,3];
var B = {x:1,y:2};
var C = function(){};
alert(
'Aは関数? ' + jQuery.isFunction(A) + ' (配列です)'
+ '\n' +
'Bは関数? ' + jQuery.isFunction(B) + ' (オブジェクトです)'
+ '\n' +
'Cは関数? ' + jQuery.isFunction(C) + ' (関数です)'
);
}
実装例
jQueryには、文字列を操作する関数が用意されています。
リスト9. jQuery.trim(文字列)
function Sample59(){
var str = ' foge foge ';
alert(
'「' + str + '」\n'
+ 'をトリムすると\n'
+ '「' + jQuery.trim(str) + '」'
);
}
実装例
対象となる文字列は、「 foge foge 」
jQueryには、エイリアスとして「$」を使うことができます。
例えば「jQuery('#target')」は「$('#target')」と書くことができます。
同様に、上記の「jQuery.trim(str)」も「$.trim(str)」と書けます。
しかし、エイリアス「$」を使うJavascriptライブラリは、jQueryだけではありません。
最も有名なものに、prototype.jsなどがあります。
これらと競合する場合に以下の関数を使い、相互運用します。
リスト10. jQuery.noConflict([extreme])
jQuery.noConflict();
// jQueryは、そのままに動作する
jQuery("div p").hide();
// $関数はjQueryとしてではなく、他のライブラリで定義された$関数として動作する
$("content").style.display = 'none';
以下は、実際にはjQueryの内部で扱うためのAPIです。
リスト11. jQuery.data(要素[,name[,value]])
var obj = jQuery.data( jQuery('#id').get(0), 'your_plugin_name', your_plugin_value );
リスト12. jQuery.removeData(要素[,name])
jQuery.data( jQuery('#id').get(0), 'your_plugin_name);
リスト12. jQuery.param(オブジェクト)
function Sample712(){
var obj = { x:1, y:2, name:'リスト12'};
alert(jQuery.param(obj));
}