jqueryプラグイン制作チュートリアル txtHover_jquery
プラグインの構造スケルトンを定義します:
この本で最初に使用される構造スケルトンは次のとおりです:
jQuery.fn.fluginmane=function(){
return this.each(function(){
//code...
})
}
この構造は、特に、競合を避けるために $ を使用せずに jQuery を使用することが本の中で述べられています。ここでは、競合の可能性を防ぐために、匿名関数を使用してプラグインの構造スケルトンを実装します。また、皆さんが匿名関数についてよく理解していただければ幸いです。
(function($){
$.fn .fluginname=function(){
return this.each(function(){
//code...
});
注:
1. 統一と標準化のため、プラグイン ファイルには jquery.fluginname.js の形式で名前が付けられます (fluginname はプラグインの名前を表します)。
3. ユーザーがオプションを使用してプラグインの動作を制御できるようにします。
4. デフォルトのオプションでは外部アクセスが許可されているため、ユーザーは最小限のコードでカスタマイズできます。
5.this.each() は要件を満たすすべてのオブジェクトを走査し、それ自体が jquery オブジェクトであり、プラグインは最終的にオブジェクトを返します。実はJavaScriptのチェーンモードはこのようにして実現されています。
最初のプラグイン: txtHover
1. コード実装:
$(this).text( 'テキストが変更されました!');
}
});
2. HTML ファイルを作成し、追加します。 jquery とプラグイン リファレンス、コードは次のとおりです:
コードをコピー
ホバーイベントを追加します:
コードをコピー
コードは次のとおりです:
(function ($) {
$.fn.txtHover = function () {
最初 このバージョンでは、ページがロードされると、この設計はほとんど役に立ちません。最も一般的に使用されるのは、マウスがテキスト上に移動したときに何らかの変更を生成することです。プラグインが改良され、ホバーイベントが追加されました。まず、div の元の値を変数 temp に保存します。マウスを div の上に移動すると、テキストが置き換えられます。
カスタム オプションの追加
ユーザーがより柔軟に使用できるようにするには、カスタム関数を追加し、プラグイン コードを変更する必要があります:
コピーcode
コードは次のとおりです:
(function ($) {
$.fn.txtHover = function (options) {
var defaults = { txt: 'テキストが変更されました!' };
var opt = $. extend(defaults, options);
return this.each(function () {
var self = $(this);
var temp = self.text();
self.hover(function) () {
self.text(opt.txt); 関数 () {
self.text(temp)
});
})(jQuery);
プラグインは変数のデフォルトを定義し、デフォルトのテキスト情報を設定します。 $.extend() (この関数を知らない友人は情報を確認できます) メソッドを使用して、新しい変数 opt を展開します。ユーザーが渡したオプション変数に txt が含まれている場合、opt は渡された変数を使用します。ユーザーが指定した場合は、デフォルトのシステムが使用されます。システム内で var self = $(this) を定義し、this オブジェクトを置き換えます。これは JavaScript では非常に厄介なオブジェクトです。別の関数コンテキストで表現されるオブジェクトは異なります。これを別の変数に渡すと、プログラム内のエラーが回避されます。慣れていない人はこの知識ポイントをマスターする必要があります。
ユーザーが HTML ページでプラグインを呼び出す場合、マウスを div 上に移動するとテキストの内容をカスタマイズできます。
$('#test').txtHover({ txt: 'test' });
}); さて、今日の例はここまでです。 。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です!検索をyに制限することができます

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます

楽なWebページレイアウトのためにjQueryを活用する:8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call()、apply()、bind()などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした

jQueryは素晴らしいJavaScriptフレームワークです。ただし、他のライブラリと同様に、何が起こっているのかを発見するためにフードの下に入る必要がある場合があります。おそらく、バグをトレースしているか、jQueryが特定のUIをどのように達成するかに興味があるからです

この投稿は、Android、BlackBerry、およびiPhoneアプリ開発用の有用なチートシート、リファレンスガイド、クイックレシピ、コードスニペットをコンパイルします。 開発者がいないべきではありません! タッチジェスチャーリファレンスガイド(PDF) Desigの貴重なリソース
