ホームページ > 記事 > ウェブフロントエンド > JQuery拡張メソッド_jquery

JQuery拡張メソッド_jquery

WBOYオリジナル: 2016-05-16 18:27:541002ブラウズ

インターネットで情報を検索したところ、JQUERY 拡張メソッドを記述する方法は 2 つあります。1 つは jquery.fn.extend を使用する方法、もう 1 つは jquery.extend を使用する方法です。
jquery.fn は jquery.prototype を表します。 jqueryオブジェクトにメソッドを追加します。たまたま拡張メソッドを使って jquery.fn を使ってみたので、ここでは jquery.fn の使い方をメモしておきますが、非常に書き方が難しいものがあります
例えば、ボタンの場合。をクリックすると、テキストボックスの値とパラメータ値がポップアップ表示されます

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

 
jquery.fn.extend({ 
alertMessage:function(message ){ 
var txtboxValue = $(this).val();//$(this) を使用して拡張メソッドを使用するオブジェクトを示しますが追加されます。ここでは $('#textbox') 
alert(txtboxValue message ); 
$(function(){ 
$("input[ name='btn' ]").click(function(){ 
$(' #textbox' ).alertMessage("は文字列です"); 
}) 
}) 

 
html: 

コードをコピーしますコードは次のとおりです。 input type='button' name='btn' value='Alert'/>

そこで、一昨年の Jquery 中国語ドキュメントを掘り出しました。 Jquery のメソッドについて簡単に説明しました。 Jquery が非常に強力であることを発見しました。なぜ今まで発見しなかったのでしょうか?そこで私は個人的に Jquery に基づいた拡張関数を作成しました。 コードは次のとおりです。 

コードをコピーします

コードは次のとおりです。 jQuery.fn.__toggleCheck = function (idPrefix) { var c = false; $(this).click(function () {

if (c) c = false;

else c = true; 
$("input[type=checkbox][id^=" idPrefix "]").each( 
function () { 
this.checked = c; 
} 
); 
}; 
jQuery.fn.__setRepeaterStyle = function (itemTag, EvenStyle, hoverStyle) { 
$("#" this. attr("id") " " itemTag ":odd").addClass(evenStyle); 
var cssOriginal = ""; 
$("#" this.attr("id") " " itemTag "" ).mouseover(function () { 
cssOriginal = $(this).attr("class"); 
$(this).addClass(hoverStyle); 
}); #" this.attr(" id") " " itemTag "").mouseout(function () { 
$(this).removeClass(); 
if (cssOriginal.length > 0) { 
$(this).addClass (cssOriginal); 
} 
}); 

 
上記の関数は次のように呼び出されます: 




コードをコピーします 

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

1 2 3 4 5

すべて

;チェック

🎜>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Javascriptでテーブルデータ行を動的に追加（ASPバックグラウンドデータベース保存例）_JavaScriptスキル次の記事：Javascriptでテーブルデータ行を動的に追加（ASPバックグラウンドデータベース保存例）_JavaScriptスキル

続きを見る

JQuery拡張メソッド_jquery

関連記事