如何将方法附加/扩展到dom元素

时间:2012-06-01 10:05:41

标签: javascript jquery

有这个html:

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

做的时候:

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

我想收到一条警告'嗨'

有谁知道这是怎么做的?

5 个答案:

答案 0 :(得分:4)

详细了解jQuery plugin authoring

答案 1 :(得分:3)

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

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

<强> DEMO

详细了解 jQuery Plugin

答案 2 :(得分:2)

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

答案 3 :(得分:2)

jQuery方法aaaaw是啊!

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

答案 4 :(得分:1)

您实际上想要创建自己的方法(插件),名为:.sayHi()

demo 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)                                
});

demo 2