Hoe maak je een jQuery-functie aan (een nieuwe jQuery-methode of plug-in)?

Ik weet dat in JavaScript de syntaxis als volgt is:

function myfunction(param){
  //some code
}

Is er een manier om een ​​functie in jQuery te declareren die aan een element kan worden toegevoegd? Bijvoorbeeld:

$('#my_div').myfunction()

Antwoord 1, autoriteit 100%

Van de Documenten:

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

Dan doe je

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

Antwoord 2, autoriteit 28%

Ondanks alle antwoorden die je al hebt gekregen, is het vermeldenswaard dat je geen plug-in hoeft te schrijven om jQuery in een functie te gebruiken. Zeker als het een eenvoudige, eenmalige functie is, denk ik dat het schrijven van een plug-in overdreven is. Het kan veel gemakkelijker worden gedaan door gewoon de selector als parameter door te geven aan de functie. Uw code ziet er ongeveer zo uit:

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

Merk op dat de $ in de variabelenaam $param niet vereist is. Het is gewoon een gewoonte van mij om het gemakkelijk te maken om te onthouden dat die variabele een jQuery-selector bevat. Je zou ook gewoon param kunnen gebruiken.


Antwoord 3, autoriteit 14%

Hoewel er een overvloed aan documentatie / tutorials is, is het simpele antwoord op je vraag dit:

// to create a jQuery function, you basically just extend the jQuery prototype
// (using the fn alias)
$.fn.myfunction = function () {
    // blah
};

Binnen die functie komt de variabele this overeen met de in jQuery verpakte set waarop u uw functie hebt aangeroepen. Dus zoiets als:

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

… zal het aantal elementen met de klasse foo doorspoelen naar de console.

Natuurlijk is semantiek iets meer dan dat (evenals best practices en al die jazz), dus zorg ervoor dat je erover leest.


Antwoord 4, autoriteit 5%

Om een ​​functie beschikbaar te maken op jQuery-objecten, voegt u deze als volgt toe aan het jQuery-prototype (fn is een snelkoppeling voor prototype in jQuery):

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

Dit wordt meestal een jQuery-plug-in genoemd.

Voorbeeld – http://jsfiddle.net/VwPrm/


Antwoord 5, autoriteit 3%

Ja, wat je beschrijft is een jQuery-plug-in.

Om een ​​jQuery-plug-in te schrijven, maakt u een functie in JavaScript en wijst u deze toe aan een eigenschap op het object jQuery.fn.

Bijvoorbeeld

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

Binnen uw plug-in-functie wordt het trefwoord this ingesteld op het jQuery-object waarop uw plug-in is aangeroepen. Dus, als je dat doet:

$('#my_div').myfunction()

Dan wordt this binnen myfunction ingesteld op het jQuery-object dat wordt geretourneerd door $('#my_div').

Zie http://docs.jquery.com/Plugins/Authoring voor het volledige verhaal .


Antwoord 6, autoriteit 3%

$(function () {
    //declare function 
    $.fn.myfunction = function () {
        return true;
    };
});
$(document).ready(function () {
    //call function
    $("#my_div").myfunction();
});

Antwoord 7, autoriteit 2%

U kunt uw eigen jQuery-plug-ins schrijven (functie die op geselecteerde elementen kan worden aangeroepen), zoals hieronder:

(functie( $){
    $.fn.myFunc = functie(param1, param2){
        //this - jQuery-object bevat uw geselecteerde elementen
    }
})( jQuery);

Bel het later zoals:

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

Antwoord 8, autoriteit 2%

U kunt ook extend gebruiken (de manier waarop u jQuery-plug-ins maakt):

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

Gebruik:

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

Antwoord 9

Ja, methoden die u toepast op elementen die met jQuery zijn geselecteerd, worden jQuery-plug-ins genoemd en er is een groot aantal info over schrijven in de jQuery-documenten.

Het is vermeldenswaard dat jQuery is gewoon javascript, dus er is niets bijzonders aan een “jQuery-methode”.


Antwoord 10

Maak een methode voor ‘inkleuren’:

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

Gebruik het:

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

Dit eenvoudige voorbeeld combineert het beste van Een basisplug-in maken in de jQuery-documenten en antwoorden van @Candide, @Michael.


Antwoord 11

Je kunt dit altijd doen:

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

Antwoord 12

Het klinkt alsof je het jQuery-object wilt uitbreiden via zijn prototype (ook bekend als schrijf een jQuery-plug-in). Dit zou betekenen dat elk nieuw object dat is gemaakt door het aanroepen van de jQuery-functie ($(selector/DOM element)) deze methode zou hebben.

Hier is een heel eenvoudig voorbeeld:

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

Demo


Antwoord 13

Het eenvoudigste voorbeeld om een ​​functie in jQuery te maken is

jQuery.fn.extend({
    exists: function() { return this.length }
});
if($(selector).exists()){/*do something here*/}

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes