Bir jQuery işlevi nasıl oluşturulur (yeni bir jQuery yöntemi veya eklentisi)?

JavaScript'te sözdiziminin aşağıdaki gibi olduğunu biliyorum:

function myfunction(param){
  //some code
}

JQuery'de bir öğeye eklenebilecek bir işlev bildirmenin bir yolu var mı? Örneğin:

$('#my_div').myfunction()

Gönderen Dokümanlar :

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

Sonra yaparsın

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

Aldığınız tüm cevaplara rağmen, bir fonksiyonda jQuery kullanmak için bir eklenti yazmanız gerekmediğini belirtmek gerekir. Kesinlikle basit, bir defalık bir işlevse, bir eklenti yazmanın aşırı olduğunu düşünüyorum. Seçiciyi parametre olarak işleve geçirerek çok daha kolay yapılabilir . Kodunuz şöyle görünecektir:

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

myFunction($('#my_div'));

Not $değişken adında $paramgerekli değildir. Bu değişkenin bir jQuery seçici içerdiğini hatırlamayı kolaylaştırmak benim için sadece bir alışkanlık. Siz de kullanabilirsiniz param.

Orada çok sayıda belge / öğretici olsa da, sorunuzun basit cevabı şudur:

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

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

Bu işlevin içinde, thisdeğişken, işlevinizi çağırdığınız jQuery sarılı kümesine karşılık gelir. Yani şöyle bir şey:

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

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

... sınıftaki elemanların sayısını konsola akıtır foo .

Tabii ki, anlambilimden biraz daha fazlası var (en iyi uygulamalar ve tüm bu caz), bu yüzden onu okuduğunuzdan emin olun.

Bir işlevi jQuery nesneleri üzerinde kullanılabilir hale getirmek için jQuery prototipine ekleyin (fn, jQuery'deki prototip için bir kısayoldur):

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
    }
}

Buna genellikle jQuery eklentisi denir .

Örnek - http://jsfiddle.net/VwPrm/

Evet - açıkladığınız bir jQuery eklentisidir.

Bir jQuery eklentisi yazmak için JavaScript'te bir işlev oluşturursunuz ve bunu nesne üzerindeki bir özelliğe atarsınız jQuery.fn.

Örneğin

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

Eklenti işlevinizde, thisanahtar kelime eklentinizin çağrıldığı jQuery nesnesine ayarlanır. Yani, yaptığınız zaman:

$('#my_div').myfunction()

Sonra thisiçeride myfunctiondöndürülen jQuery nesnesine ayarlanır $('#my_div').

Hikayenin tamamı için http://docs.jquery.com/Plugins/Authoring adresine bakın .

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

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

Ayrıca expand (jQuery eklentileri oluşturma yönteminiz) kullanabilirsiniz:

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

    myfunction2: function () 
    {
    }
});

Kullanımı:

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

Kendi jQuery eklentilerinizi (seçilen öğelerde çağrılabilen işlev) aşağıdaki gibi yazabilirsiniz:

(işlev ($) {
    $ .fn.myFunc = işlev (param1, param2) {
        // this - jquery nesnesi seçtiğiniz öğeleri tutar
    }
}) (jQuery);

Daha sonra şöyle adlandırın:

$ ('div'). myFunc (1, boş);

Evet, jquery kullanılarak seçilen öğelere uyguladığınız yöntemlere jquery eklentileri denir ve jquery dokümanlarında yazma konusunda iyi miktarda bilgi vardır .

Bu jquery belirterek Onun değerinde olduğunu böylece bir "jquery yöntemi" hakkında özel bir şey yoktur, sadece javascript.

Bir "renklendirme" yöntemi oluşturun:

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

Kullanın:

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

Bu basit-ish örneği , jQuery belgelerinde Temel Eklenti Nasıl Oluşturulur ve @Candide , @ Michael'in yanıtlarını en iyi şekilde bir araya getirir .

• Bir adlandırılmış işlevi, ifade vb yığın izlerini iyileştirebilir
• Geri dönen özel bir yöntem this zincirlenebilir . (Teşekkürler @Potheek.)

Bunu her zaman yapabilirsiniz:

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

JQuery nesnesini prototipi (örneğin, bir jQuery eklentisi yazmak ) aracılığıyla genişletmek istediğiniz gibi geliyor . Bu, jQuery işlevini ( $(selector/DOM element)) çağırarak oluşturulan her yeni nesnenin bu yönteme sahip olacağı anlamına gelir .

İşte çok basit bir örnek:

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

gösteri

JQuery içinde herhangi bir işlev yapmak için en basit örnek

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

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