jQuery機能関数の詳細
9288 ワード
Javascriptプログラミングでは、開発者は通常、特定の機能を実現するために多くの小さなプログラムを作成する必要があります.たとえばブラウザ検出,文字列処理,配列の編集などである.jQueryはこれらの一般的なプログラムをまとめ,多くの実用的な関数を提供した.
1.ブラウザを検出します.
jQueryは$を通過する.ブラウザオブジェクトはブラウザ情報を取得します.
プロパティの説明msieがieであればtrue、そうでなければfalse mozilla、mozilla関連ブラウザであればtrue、そうでなければfalse safari、Safariブラウザであればtrue、そうでなければfalse poera、operaブラウザであればtrue、そうでなければfalse versionブラウザのバージョン番号が使用される場合、開発者はこれらのプロパティを直接呼び出してブラウザプロパティを取得することができます.次のようになります.
2.ケースモデル
jQueryに$を提供する.boxModelオブジェクトは、現在従っているボックスモデルを検出します.これは、trueの場合、w 3 c標準ボックスモデルに従うことを示し、falseがieのボックスモデルである場合、ブール値です.
var sBox = $.boxModel ? 「標準W 3 C」:「IE」; document.write(「あなたのページは現在サポートされています:」+sBox+「箱モデル」);3.javascriptオブジェクトを処理します.
javascriptプログラミングでは、文字列、日付、数値など、すべての変数がオブジェクトであると言えます.
jQueryは、$などの関連オブジェクトを処理するための編集方法を提供する.trim()関数(先頭と末尾のスペース除去)関数がその1つです
i.$each()メソッドを用いて遍歴する
前述each()メソッドは、セレクタの要素を遍歴するためのメソッドであり、javascriptの配列やオブジェクトについても$を使用することができる.each()メソッドを遍歴します.
$.each(object,fn); ここで、objectは遍歴が必要なオブジェクトであり、fnはobject内の各要素が実行する関数であり、関数fnは2つのパラメータを受け入れることができ、最初のパラメータは配列要素のシーケンス番号またはオブジェクトの属性である.2番目のパラメータは、要素または属性の値です.
例:$を用いる.each()関数配列とオブジェクトの遍歴
上の例から、$.each()は、未知の属性$など、配列やオブジェクトを巡回するのに便利である.browser、$を使用します.eachによる遍歴
$.each($.browser,function(iNum,value){//配列document.write(「属性」+iNum+「値」+value+「」); }); 取得値:
属性chrome値true属性version値39.2171.99属性webkit値true ii.データのフィルタ
配列内のデータについては,開発者がフィルタリングを必要とする場合が多く,純粋なjavascriptを使用するとforループで逐一チェックする必要がある.jQueryは$を提供した.grep()メソッド.配列のデータを簡単にフィルタできます.
構文は次のとおりです.
$.grep(Array,fn,[invert])では、arrayはフィルタリングが必要な配列オブジェクト名であり、fnはフィルタ関数であり、配列内の各オブジェクトに対してtrueを返すと保持され、そうでない場合は除去されます.オプションのinvertは、trueに設定するとブール値です.関数fnが反転し、条件を満たすものが除去される.
まず配列aArrayを定義し、$.grep()メソッドは4以上の値を選択して新しい配列を得る
例2,配列をフィルタする高度な方法.
iii変換配列
多くの場合、開発者は、ある配列の要素を統一的に変換することを望んでいる.例えば、すべての要素に2を乗じる.javascriptでは、例えるforループが実現できるが、jQueryはより便利な$を提供する.map()メソッド.この方法は次の通りです.
$.map(array,fn)では、arrayは変換する配列であり、fnは変換関数であり、配列の各項目に対して実行され、この関数は同様に2つの関数を受け入れることができ、1つのパラメータは要素の値である.2つのパラメータは要素のシーケンス番号で、オプションのパラメータです.
実行結果
a,b,c,d,e,f,g,h,i
A0,B1,C2,D3,E4,F5,G6,H7,I8
A 0 A 0,B 1 B 1,C 2 C 2,D 3 D 3,E 4 E 4,F 5 F 5,G 6 G 6,H 7 H 7,I 8 I 8は$を用いる.map()関数を遷移すると,配列長は必ずしも元の配列と同じとは限らない.nullを設定することで、配列の要素を削除できます.
要素を削除する以外は$.mapが配列を変換するときも配列要素を増やすことができます.
実行結果
one,two,three,four,five
cArrayの長い: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)では、valueは検索対象のオブジェクトであり、arrayは配列自体であり、見つかった場合は配列の位置に最初の一致要素が返されます.ない場合は-1を返します.
4.外部コードの取得
いくつかの大きなエンジニアリングでは、開発者は異なるjsを異なるjsファイルに配置し、補助金の需要に応じて異なるコードをロードすることがある.jQueryは$を提供した.getScript()は外部のコードロードを実現する.使用方法:
$.getScript(url,[callback])では、urlは外部リソースのアドレスであり、相対的であっても絶対的なアドレスであってもよい.callbackは、ロードに成功したコールバック関数で、オプションです.
そのうち1.jsコードは
1.ブラウザを検出します.
jQueryは$を通過する.ブラウザオブジェクトはブラウザ情報を取得します.
プロパティの説明msieがieであればtrue、そうでなければfalse mozilla、mozilla関連ブラウザであればtrue、そうでなければfalse safari、Safariブラウザであればtrue、そうでなければfalse poera、operaブラウザであればtrue、そうでなければfalse versionブラウザのバージョン番号が使用される場合、開発者はこれらのプロパティを直接呼び出してブラウザプロパティを取得することができます.次のようになります.
<br> $(function() {
<br> function detect() {
<br> if ($.browser.msie)
<br> return "IE";
<br> if ($.browser.mozilla)
<br> return "Mozilla";
<br> if ($.browser.safari)
<br> return "Safari";
<br> if ($.browser.opera)
<br> return "Opera";
<br> }
<br> var sBrowser = detect();
<br> document.write(" ：" + sBrowser + "<br> ：" + $.browser.version)
<p></p>
<p> });<br>
2.ケースモデル
jQueryに$を提供する.boxModelオブジェクトは、現在従っているボックスモデルを検出します.これは、trueの場合、w 3 c標準ボックスモデルに従うことを示し、falseがieのボックスモデルである場合、ブール値です.
var sBox = $.boxModel ? 「標準W 3 C」:「IE」; document.write(「あなたのページは現在サポートされています:」+sBox+「箱モデル」);3.javascriptオブジェクトを処理します.
javascriptプログラミングでは、文字列、日付、数値など、すべての変数がオブジェクトであると言えます.
jQueryは、$などの関連オブジェクトを処理するための編集方法を提供する.trim()関数(先頭と末尾のスペース除去)関数がその1つです
i.$each()メソッドを用いて遍歴する
前述each()メソッドは、セレクタの要素を遍歴するためのメソッドであり、javascriptの配列やオブジェクトについても$を使用することができる.each()メソッドを遍歴します.
$.each(object,fn); ここで、objectは遍歴が必要なオブジェクトであり、fnはobject内の各要素が実行する関数であり、関数fnは2つのパラメータを受け入れることができ、最初のパラメータは配列要素のシーケンス番号またはオブジェクトの属性である.2番目のパラメータは、要素または属性の値です.
例:$を用いる.each()関数配列とオブジェクトの遍歴
<br> var aArray = ["one", "two", "three", "four", "five"];
<br> $.each(aArray, function(iNum, value) {
<br> //
<br> document.write(" " + iNum + " " + value + "<br>");
<br> });
<br> var oObj = {
<br> one: 1,
<br> two: 2,
<br> three: 3,
<br> four: 4,
<br> five: 5
<br> };
<br> $.each(oObj, function(pro, value) {
<br> //
<br> document.write(" " + pro + " " + value + "<br>")
<br> });
<br>
上の例から、$.each()は、未知の属性$など、配列やオブジェクトを巡回するのに便利である.browser、$を使用します.eachによる遍歴
$.each($.browser,function(iNum,value){//配列document.write(「属性」+iNum+「値」+value+「」); }); 取得値:
属性chrome値true属性version値39.2171.99属性webkit値true ii.データのフィルタ
配列内のデータについては,開発者がフィルタリングを必要とする場合が多く,純粋なjavascriptを使用するとforループで逐一チェックする必要がある.jQueryは$を提供した.grep()メソッド.配列のデータを簡単にフィルタできます.
構文は次のとおりです.
$.grep(Array,fn,[invert])では、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) {
return value >= 4;
});
document.write(aResult.join());
まず配列aArrayを定義し、$.grep()メソッドは4以上の値を選択して新しい配列を得る
例2,配列をフィルタする高度な方法.
<br> var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];
<br> var aResult = $.grep(aArray, function(value, index) {
<br> // value
<br> return (value >= 4 && index > 3);
<br> });
<p></p>
<p> document.write(aResult.join());<br>
iii変換配列
多くの場合、開発者は、ある配列の要素を統一的に変換することを望んでいる.例えば、すべての要素に2を乗じる.javascriptでは、例えるforループが実現できるが、jQueryはより便利な$を提供する.map()メソッド.この方法は次の通りです.
$.map(array,fn)では、arrayは変換する配列であり、fnは変換関数であり、配列の各項目に対して実行され、この関数は同様に2つの関数を受け入れることができ、1つのパラメータは要素の値である.2つのパラメータは要素のシーケンス番号で、オプションのパラメータです.
<br> $(function() {
<br> var aArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
<br> $("p:eq(0)").text(aArray.join());
<br> aArray = $.map(aArray, function(value, index) {
<br> //
<br> return (value.toUpperCase() + index);
<br> });
<br> $("p:eq(1)").text(aArray.join());
<p></p>
<p> cArray = $.map(aArray, function(value) {<br> return value + value;<br> });<br> $("p:eq(2)").text(cArray.join());<br> });<br>
実行結果
a,b,c,d,e,f,g,h,i
A0,B1,C2,D3,E4,F5,G6,H7,I8
A 0 A 0,B 1 B 1,C 2 C 2,D 3 D 3,E 4 E 4,F 5 F 5,G 6 G 6,H 7 H 7,I 8 I 8は$を用いる.map()関数を遷移すると,配列長は必ずしも元の配列と同じとは限らない.nullを設定することで、配列の要素を削除できます.
<br> $(function() {
<br> var aArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
<br> $("p:eq(0)").text(aArray.join());
<br> $("p:eq(1)").text("aArray ：" + aArray.length + " :" + aArray.join());
<br> cArray =$.map(aArray,function(value){
<br> // 1 +1 ， null
<br> return value>1?value+1:null;
<br> });
<br> $("p:eq(2)").text("cArray ：" + cArray.length + " :" + cArray.join());
<br> });
<br>
要素を削除する以外は$.mapが配列を変換するときも配列要素を増やすことができます.
<br> $(function() {
<br> var aArray = ["one", "two", "three", "four", "five"];
<br> $("p:eq(0)").text(aArray.join());
<br> cArray =$.map(aArray,function(value){
<br> return value.split("");
<br> });
<br> $("p:eq(1)").text("cArray ：" + cArray.length + " :" + cArray.join());
<br> });
<br>
実行結果
one,two,three,four,five
cArrayの長い: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)では、valueは検索対象のオブジェクトであり、arrayは配列自体であり、見つかった場合は配列の位置に最初の一致要素が返されます.ない場合は-1を返します.
<br> $(function() {
<br> var aArray = ["one", "two", "three", "four", "five"];
<br> var cx1 = $.inArray("two", aArray);
<br> var cx2 = $.inArray("www", aArray);
<br> $("p:eq(0)").text(cx1);
<br> $("p:eq(1)").text(cx2);
<br> });
<br>
4.外部コードの取得
いくつかの大きなエンジニアリングでは、開発者は異なるjsを異なるjsファイルに配置し、補助金の需要に応じて異なるコードをロードすることがある.jQueryは$を提供した.getScript()は外部のコードロードを実現する.使用方法:
$.getScript(url,[callback])では、urlは外部リソースのアドレスであり、相対的であっても絶対的なアドレスであってもよい.callbackは、ロードに成功したコールバック関数で、オプションです.
<br> $(function() {
<br> $("p:eq(0)").click(function() {
<br> $.getScript("1.js");
<br> });
<br> $("p:eq(1)").click(function() {
<br> textfun();
<br> });
<br> });
<br>
1
2
そのうち1.jsコードは
alert(" ok！")
function textfun(){
alert("testfun")
};