Làm cách nào để tạo một hàm jQuery (một phương thức hoặc plugin jQuery mới)?

Tôi biết rằng trong JavaScript cú pháp như sau:

function myfunction(param){
  //some code
}

Có cách nào để khai báo một hàm trong jQuery có thể được thêm vào một phần tử không? Ví dụ:

$('#my_div').myfunction()

Từ Tài liệu :

(function( $ ){
   $.fn.myfunction = function() {
      alert('hello world');
      return this;
   }; 
})( jQuery );

Sau đó bạn làm

$('#my_div').myfunction();

Mặc dù tất cả các câu trả lời bạn đã nhận được, điều đáng chú ý là bạn không cần phải viết một plugin để sử dụng jQuery trong một hàm. Chắc chắn nếu đó là một chức năng đơn giản, một lần, tôi tin rằng việc viết một plugin là quá mức cần thiết. Nó có thể được thực hiện dễ dàng hơn nhiều chỉ bằng cách chuyển bộ chọn vào hàm dưới dạng tham số . Mã của bạn sẽ trông giống như thế này:

function myFunction($param) {
   $param.hide();  // or whatever you want to do
   ...
}

myFunction($('#my_div'));

Lưu ý rằng $trong tên biến $paramlà không cần thiết. Nó chỉ là một thói quen của tôi để dễ nhớ rằng biến đó có chứa bộ chọn jQuery. Bạn chỉ có thể sử dụng paramlà tốt.

Mặc dù có rất nhiều tài liệu / hướng dẫn ngoài kia, câu trả lời đơn giản cho câu hỏi của bạn là:

// to create a jQuery function, you basically just extend the jQuery prototype
// (using the fn alias)

$.fn.myfunction = function () {
    // blah
};

Bên trong hàm đó, thisbiến tương ứng với tập hợp được gói jQuery mà bạn gọi là hàm của bạn trên. Vì vậy, một cái gì đó như:

$.fn.myfunction = function () {
    console.log(this.length);
};

$('.foo').myfunction();

... sẽ tuôn ra bàn điều khiển số lượng phần tử với lớp foo.

Tất nhiên, có nhiều hơn một chút về ngữ nghĩa hơn thế (cũng như các thực tiễn tốt nhất, và tất cả những gì về nhạc jazz), vì vậy hãy chắc chắn rằng bạn đã đọc nó.

Để làm cho một hàm có sẵn trên các đối tượng jQuery, bạn thêm nó vào nguyên mẫu jQuery (fn là một phím tắt cho nguyên mẫu trong jQuery) như thế này:

jQuery.fn.myFunction = function() {
    // Usually iterate over the items and return for chainability
    // 'this' is the elements returns by the selector
    return this.each(function() { 
         // do something to each item matching the selector
    }
}

Đây thường được gọi là plugin jQuery .

Ví dụ - http://jsfiddle.net/VwPrm/

Yup - những gì bạn đang mô tả là một plugin jQuery.

Để viết một plugin jQuery, bạn tạo một hàm trong JavaScript và gán nó cho một thuộc tính trên đối tượng jQuery.fn .

Ví dụ

jQuery.fn.myfunction = function(param) {
    // Some code
}

Trong chức năng plugin của bạn, thistừ khóa được đặt thành đối tượng jQuery mà plugin của bạn được gọi. Vì vậy, khi bạn làm:

$('#my_div').myfunction()

Sau đó, thisbên trong myfunctionsẽ được đặt thành đối tượng jQuery được trả về $('#my_div').

Xem http://docs.jquery.com/Plugins/Authoring để biết toàn bộ câu chuyện.

$(function () {
    //declare function 
    $.fn.myfunction = function () {
        return true;
    };
});

$(document).ready(function () {
    //call function
    $("#my_div").myfunction();
});

Bạn cũng có thể sử dụng tiện ích mở rộng (cách bạn tạo các trình cắm jQuery):

$.fn.extend(
{
    myfunction: function () 
    {
    },

    myfunction2: function () 
    {
    }
});

Sử dụng:

$('#my_div').myfunction();

Bạn có thể viết các trình cắm jQuery của riêng bạn (hàm có thể được gọi trên các phần tử được chọn) như bên dưới:

(hàm ($) {
    $ .fn.myFunc = chức năng (param1, param2) {
        // this - đối tượng jquery giữ các phần tử đã chọn của bạn
    }
}) (jQuery);

Gọi nó sau như:

$ ('div'). myFunc (1, null);

Có, các phương thức bạn áp dụng cho các phần tử được chọn bằng jquery, được gọi là các plugin jquery và có một lượng thông tin tốt về tác giả trong các tài liệu jquery.

Giá trị của nó lưu ý jquery đó là chỉ javascript, vì vậy không có gì là đặc biệt về một "phương pháp jquery".

Tạo phương thức "tô màu":

$.fn.colorize = function custom_colorize(some_color) {
    this.css('color', some_color);
    return this;
}

Sử dụng nó:

$('#my_div').colorize('green');

Ví dụ đơn giản-ish này kết hợp tốt nhất của Làm thế nào để tạo một Plugin cơ bản trong các tài liệu jQuery, và câu trả lời từ @Candide , @ Michael .

• Một biểu thức hàm được đặt tên có thể cải thiện dấu vết ngăn xếp, v.v.
• Một phương thức tùy chỉnh trả về this có thể bị xiềng xích . (Cảm ơn @Potheek.)

Bạn luôn có thể làm điều này:

jQuery.fn.extend({
   myfunction: function(param){
       // code here
   },
});
OR
jQuery.extend({
   myfunction: function(param){
       // code here
   },
});
$(element).myfunction(param);

Có vẻ như bạn muốn mở rộng đối tượng jQuery thông qua nguyên mẫu của nó (hay còn gọi là một plugin jQuery ). Điều này có nghĩa là mọi đối tượng mới được tạo thông qua việc gọi hàm jQuery ( $(selector/DOM element)) sẽ có phương thức này.

Đây là một ví dụ rất đơn giản:

$.fn.myFunction = function () {
    alert('it works');
};

Bản giới thiệu

Ví dụ đơn giản nhất để thực hiện bất kỳ chức năng nào trong jQuery là

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something here*/}