javascript - メソッドをdom要素にアタッチ/拡張する方法

Question

このhtmlを持っている：

<div id='hi1'> aaa </div>

行うとき：

$('#hi1').sayHi();

「こんにちは」というアラートを受け取りたいのですが

誰かがこれがどのように行われるか知っていますか？

Answer 1

jQueryプラグインのオーサリングについてもっと読む。

Answer 2

$.fn.sayHi = function() {
    alert($(this).text());
    return this;
};

$('#hi1').sayHi();

デモ

jQueryプラグインについてもっと読む

Answer 3

$.fn.extend({ sayHi:function(){ alert('hi'); }); 

Answer 4

jQueryメソッドaaaawええ！

jQuery.fn.sayHi = function() {
  // this is the jQuery object
  // so this[0] is a DOM element (or undefined)
};

Answer 5

実際には、次のような独自のメソッド（プラグイン）を作成する必要があります。.sayHi()

デモjsFiddle

$.fn.sayHi = function(something){   
    alert(something);       
};

$('#hi1').sayHi('hi');    // 'hi' will be passed to the jQuery method 'sayHy'

詳細はこちら：http ：//docs.jquery.com/Plugins/Authoring

もう一つの例：

$.fn.sayHi = function(txt, clr){   
     this.css({color: clr}).text(txt); // 'this' is your element delegated to your plugin
};

$('#hi1').click(function(){   
    $(this).sayHi('Heading is clicked!', 'red');  // (txt, crl)                                
});

デモ2