jQueryの詳しい説明 function_jquery

JavaScript プログラミングでは、開発者は通常、特定の機能を実装するために多くの小さなプログラムを作成する必要があります。たとえば、ブラウザの検出、文字列処理、配列編集などです。 jQuery は、これらの一般的に使用されるプログラムを要約し、多くの実用的な機能を提供します。

1. ブラウザを検出します。

jQuery は、$.browser オブジェクトを通じてブラウザ情報を取得します。

プロパティの説明
msie ie の場合は true、それ以外の場合は false
mozilla は、mozilla 関連のブラウザの場合は true、それ以外の場合は false
safari Safari ブラウザの場合は true、それ以外の場合は false
poera Opera ブラウザの場合は true、それ以外の場合は false
バージョン ブラウザのバージョン番号
使用すると、開発者はこれらのプロパティを直接呼び出してブラウザのプロパティを取得できます。以下のように:

コードをコピーします コードは次のとおりです:

2. ボックスモデル

$.boxModel オブジェクトは、現在フォローされているボックス モデルを検出するために jQuery で提供されます。これはブール値です。 true の場合、w3c 標準ボックス モデルに従うことを意味します。 false の場合、ie ボックス モデル

です。

var sBox = $.boxModel ? "標準 W3C" : "IE";

Document.write("あなたのページは現在次をサポートしています:" sBox "ボックス モデル");

3. JavaScript オブジェクトを処理します。

JavaScript プログラミングでは、すべての変数は文字列、日付、値などのオブジェクトであると言えます。

jQuery は、$.trim() 関数 (先頭と末尾のスペースを削除する) 関数など、関連オブジェクトを処理するためのいくつかの編集メソッドを提供します。

i. $each() メソッドを使用して

を走査します。

each() メソッドは以前に紹介しましたが、これはセレクター内の要素を走査するために使用されます。同様に、JavaScript の配列とオブジェクトの場合は $.each() メソッドを使用して走査できます。

$.each(object,fn);

このうち、object は走査する必要があるオブジェクトであり、fn は object の各要素によって実行される関数です。関数 fn は 2 つのパラメータを受け取ります。最初のパラメータは配列要素のシリアル番号またはオブジェクトの属性です。 。 2 番目のパラメータは要素または属性の値です。

例: $.each() 関数を使用して配列とオブジェクトを走査します

コードをコピー コードは次のとおりです:

var aArray = ["1", "two", "three", "four", "five"];
$.each(aArray, function(iNum, value) {
// levy array
document.write("シリアル番号" iNum "値" 値 "
");
});
var oObj = {
1: 1、
2: 2、
3: 3、
4: 4、
5: 5
};
$.each(oObj, function(pro, value) {
                                                                                                                                    document.write("property" pro "value" value "
")
});
                                                                                         

上記の例からわかるように、$.each() は配列やオブジェクトを走査するのに非常に便利です。たとえば、不明な属性 $.browser の場合、$.each を使用して を走査します。

$.each($.browser, function(iNum, value) {

// levy array

document.write("property" iNum "value" value "
");
});
価値:

属性クロム値 true

属性バージョン値 39.0.2171.99

属性 Webkit 値 true
ii. データのフィルタリング

開発者は配列内のデータをフィルタリングする必要があることが多く、純粋な JavaScript を使用する場合は、for ループで 1 つずつチェックする必要があります。 jQuery は $.grep() メソッドを提供します。配列データを簡単にフィルタリングできます。

構文は次のとおりです:

$.grep(配列,fn,[反転])

このうち、array はフィルタリングする必要がある配列オブジェクトの名前で、fn はフィルタ関数です。配列内の各オブジェクトについて、true が返された場合は保持され、それ以外の場合は削除されます。オプションの invert はブール値です。true に設定すると、関数 fn が反転され、条件を満たす関数が削除されます。

コードをコピーします コードは次のとおりです:

var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];

var aResult = $.grep(aArray, function(value) {
戻り値 >= 4;
}); document.write(aResult.join());



まず配列 aArray を定義し、次に $.grep() メソッドを使用して 4 以上の値を選択し、新しい配列を取得します

例 2、配列をフィルタリングする高度な方法。

コードをコピー コードは次のとおりです:

var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];
var aResult = $.grep(aArray, function(value,index) {
//要素の値、値、シーケンス番号を同時に判定します
return (値 >= 4 && インデックス > 3);
});

document.write(aResult.join());
                                                                                         

iii 変換配列

開発者は多くの場合、すべての要素を 2 で乗算するなど、配列内の要素を均一に変換できることを望んでいます。これは for ループなどの JavaScript で実現できますが、jQuery ではより便利な $.map () メソッドが提供されています。 。この方法は次のとおりです

$.map(array,fn)

このうち、array は変換対象の配列、fn は配列内の各項目に対して実行される変換関数です。この関数は 2 つの関数も受け入れることができ、1 つのパラメーターは要素の値です。 2 つのパラメータは要素のシリアル番号であり、オプションのパラメータです。

コードをコピーします コードは次のとおりです:

$(function() {
var aArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
$("p:eq(0)").text(aArray.join());
aArray = $.map(aArray, function(value,index) {
//配列を大文字に変換し、シリアル番号を追加します
return (value.toUpperCase() インデックス);
});
$("p:eq(1)").text(aArray.join());
cArray = $.map(aArray, function(value) {

戻り値 value;
});
$("p:eq(2)").text(cArray.join());
});
                                                                                                                                                                                                                                                                                                                                                                       


実行結果

a、b、c、d、e、f、g、h、i

A0、B1、C2、D3、E4、F5、G6、H7、I8

A0A0、B1B1、C2C2、D3D3、E4E4、F5F5、G6G6、H7H7、I8I8

$.map() 関数を使用して転送した後、配列の長さは元の配列と同じであるとは限りません。 null を設定すると、配列の要素を削除できます。

コードをコピー

コードは次のとおりです:

$(function() {
var aArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
$("p:eq(0)").text(aArray.join());
$("p:eq(1)").text("aArray length: " aArray.length " value: " aArray.join());
cArray =$.map(aArray,function(value){
// 1 より大きい 1 の場合は戻り、それ以外の場合は null に設定して削除します
戻り値>1?値1:null;
});
$("p:eq(2)").text("cArray length: " cArray.length " value: " cArray.join());
});
                                                                                                                                                                                                                                                                                                                                                                       


$.map は要素の削除に加えて、配列の変換時に配列要素を追加することもできます。

コードをコピーします

コードは次のとおりです: $(function() {

var aArray = ["1", "two", "three", "four", "five"];

$("p:eq(0)").text(aArray.join());
cArray =$.map(aArray,function(value){
戻り値.split("");
});
$("p:eq(1)").text("cArray length: " cArray.length " value: " cArray.join());
});
                                                                                                                                                                                                                                                                             


実行結果

1、2、3、4、5

c配列の長さ: 19 値: o、n、e、t、w、o、t、h、r、e、e、f、o、u、r、f、i、v、e

上記のコードの $.map 変換プロセス中に、split("") メソッドは要素を文字 に分割します。

iiii 配列要素を検索

文字列の場合、indexOf() を使用して特定の文字の位置を検索できます。配列要素の場合、JavaScript には同様のメソッドがありません。 jQ では、$.inArray() 関数は配列要素の優れた検索関数を提供します。構文は次のとおりです:

$.inArray(値,配列)
このうち、value は検索するオブジェクト、array は配列そのものです。見つかった場合は、配列内で最初に一致した要素の位置が返されます。そうでない場合は、-1 を返します。

コードをコピー

コードは次のとおりです:

$(function() {
var aArray = ["1", "two", "three", "four", "five"];
var cx1 = $.inArray("two", aArray);
var cx2 = $.inArray("www", aArray);
$("p:eq(0)").text(cx1);
$("p:eq(1)").text(cx2);
});
                                                                                                                                                                                                                                                                             


4. 外部コードを取得します

一部の大規模プロジェクトでは、開発者は異なる js ファイルに異なる js を配置し、補助金の要件に基づいて異なるコードをロードする場合があります。 jQuery は、外部コードの読み込みを実装するために $.getScript() を提供します。使用方法:

$.getScript(url,[コールバック])

このうち、url は外部リソースのアドレスであり、相対アドレスまたは絶対アドレスを指定できます。 callback は、ロードが成功した後のコールバック関数です (オプション)。

コードをコピーします コードは次のとおりです:

$(function() {

$("p:eq(0)").click(function() {
$.getScript("1.js");
});
$("p:eq(1)").click(function() {
textfun();
});
});
                                                                                          ＆lt; p＆gt;クリック1＆lt;/p＆gt;
& Lt; 2 & lt;/p & gt;


1.js コードは

コードをコピーします

コードは次のとおりです: alert("読み込み中です!") 関数 textfun(){ アラート("テストファン")

};