JQuery फ़ंक्शन (एक नया jQuery विधि या प्लगइन) कैसे बनाएं?

Question

मुझे पता है कि जावास्क्रिप्ट में सिंटैक्स निम्नानुसार है:

function myfunction(param){
  //some code
}

क्या jQuery में एक फ़ंक्शन को घोषित करने का एक तरीका है जिसे एक तत्व में जोड़ा जा सकता है? उदाहरण के लिए:

$('#my_div').myfunction()

Comments

@RedEyedMonster - यह बहुत मायने रखता है। कभी jQuery डेटपिकर की तरह कुछ भी इस्तेमाल किया? $('#myDatePickerfield').datePicker();

— यामीक

नहीं, लेकिन मुझे इसके लिए सचेत करने के लिए धन्यवाद नहीं मिला है :)

— RedEyedMonster

@RedEyedMonster - आपने शायद इस्तेमाल किया है $("#someElement").hide()या .addClass()...

— nnnnnn

@RedEyedMonster: ओपी jQuery प्लगइन्स का वर्णन कर रहा है, जो वास्तव में जावास्क्रिप्ट में बहुत आम हैं। देखें docs.jquery.com/Plugins/Authoring

— पॉल डी वेट

Answer 1

से डॉक्स :

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

फिर आप करते हैं

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

Comments

बस कुछ जोड़ने के लिए मुझे महत्वपूर्ण लगा: कृपया जोड़ें - इसे वापस करें; अलर्ट के बाद। यह फ़ंक्शन चेन-सक्षम बना देगा।

— पोटेहेक

कई सही जवाब यहाँ। JQuery-

— एंडी सस्चिएर्सच

@ कॉन्डाइड किस बिंदु पर $('my_div').myfunction(); कॉल किया जाएगा

— निखिल जी

@ निखिलग $ ('my_div') एक टैग को संदर्भित करता है <my_div></my_div>। आपको आईडी को संदर्भित करने के लिए वहां हैश साइन की आवश्यकता है my_div।

— कैंडिड

यह एक अजीब उदाहरण है क्योंकि यह वास्तव में उस तत्व के लिए कुछ भी नहीं करता है।

— शेरिफडेरेक

Answer 2

पहले से ही प्राप्त सभी उत्तरों के बावजूद, यह ध्यान देने योग्य है कि आपको फ़ंक्शन में jQuery का उपयोग करने के लिए प्लगइन लिखने की आवश्यकता नहीं है। निश्चित रूप से अगर यह एक सरल, एक बार का कार्य है, मेरा मानना ​​है कि एक प्लगइन लिखना ओवरकिल है। यह सिर्फ एक पैरामीटर के रूप में फ़ंक्शन को चयनकर्ता को पारित करके बहुत आसानी से किया जा सकता है । आपका कोड कुछ इस तरह दिखाई देगा:

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

myFunction($('#my_div'));

ध्यान दें कि $चर नाम $paramकी आवश्यकता नहीं है। यह सिर्फ मेरी आदत है कि यह याद रखना आसान है कि उस चर में एक jQuery चयनकर्ता शामिल है। आप बस का उपयोग कर सकते हैं param।

Answer 3

जबकि वहाँ प्रलेखन / ट्यूटोरियल की एक बहुतायत है, आपके प्रश्न का सरल उत्तर यह है:

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

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

उस फ़ंक्शन के अंदर, thisचर jQuery के लिपटे सेट से मेल खाता है जिसे आपने अपना फ़ंक्शन कहा है। तो कुछ इस तरह:

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

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

... वर्ग के साथ तत्वों की संख्या को कंसोल में प्रवाहित करेगा foo ।

बेशक, शब्दार्थ की तुलना में थोड़ा अधिक है (साथ ही सर्वोत्तम अभ्यास, और यह सब जैज), इसलिए सुनिश्चित करें कि आप इस पर पढ़ते हैं।

Answer 4

JQuery वस्तुओं पर एक फ़ंक्शन उपलब्ध कराने के लिए आप इसे jQuery के प्रोटोटाइप में जोड़ते हैं (fn इस तरह 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
    }
}

इसे आमतौर पर jQuery प्लगइन कहा जाता है ।

उदाहरण - http://jsfiddle.net/VwPrm/

Answer 5

हाँ - आप जो वर्णन कर रहे हैं वह एक jQuery प्लगइन है।

JQuery प्लगइन लिखने के लिए, आप जावास्क्रिप्ट में एक फंक्शन बनाते हैं, और इसे ऑब्जेक्ट पर प्रॉपर्टी में असाइन करते हैं jQuery.fn ।

उदाहरण के लिए

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

आपके प्लगइन फ़ंक्शन के भीतर, thisकीवर्ड को jQuery ऑब्जेक्ट पर सेट किया जाता है, जिस पर आपका प्लग इन किया गया था। तो, जब आप करते हैं:

$('#my_div').myfunction()

फिर thisअंदर myfunctionद्वारा लौटाए गए jQuery ऑब्जेक्ट पर सेट हो जाएगा $('#my_div')।

पूरी कहानी के लिए http://docs.jquery.com/Plugins/Authoring देखें ।

Answer 6

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

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

Comments

मुझे नहीं लगता है कि इस कोड के साथ केवल पैरेंस और ब्रेसेस को बंद करने में बेमेल समस्या है। कृपया ठीक करें।

— क्रिस्टोफर लेट्टे

Answer 7

आप एक्सटेंशन (जिस तरह से आप jQuery प्लगइन्स बनाते हैं) का उपयोग कर सकते हैं :

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

    myfunction2: function () 
    {
    }
});

उपयोग:

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

Answer 8

आप अपने खुद के jQuery प्लगइन्स (फ़ंक्शन जिसे चयनित तत्वों पर कॉल किया जा सकता है) को नीचे की तरह लिख सकते हैं:

(फ़ंक्शन ($) {
    $ .fn.myFunc = function (param1, param2) {
        // यह - jquery वस्तु आपके चयनित तत्वों को रखती है
    }
}) (jQuery);

बाद में इसे कॉल करें जैसे:

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

Answer 9

हां, जो तरीके आप jquery का उपयोग करके चयनित तत्वों पर लागू करते हैं, उन्हें jquery plugins कहा जाता है और jquery डॉक्स के भीतर संलेखन पर जानकारी की एक अच्छी मात्रा है ।

कि jQuery ध्यान देने योग्य बात यह लायक है सिर्फ जावास्क्रिप्ट, इसलिए वहाँ एक "jQuery विधि" बारे में कुछ नहीं विशेष।

Comments

'' jquery मेथड '' के बारे में कुछ खास नहीं है - '' हाँ वहाँ है: '' jQuery मेथड '' jQuery ऑब्जेक्ट पर काम करता है। (लेकिन हाँ, jQuery है बस जे एस ...)

— nnnnnn

Answer 10

एक "colorize" विधि बनाएँ:

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

इसका इस्तेमाल करें:

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

यह सरल-ईश उदाहरण jQuery डॉक्स में एक बेसिक प्लगिन बनाने के लिए सबसे अच्छा संयोजन करता है , और @ कॉन्डाइड , @ मिचेल से उत्तर देता है ।

• एक नामित फ़ंक्शन एक्सप्रेशन से स्टैक के निशान आदि में सुधार हो सकता है।
• एक कस्टम विधि जो रिटर्न करती this है, जंजीर हो सकती है । (साभार @ पोटेचेक।)

Answer 11

आप हमेशा ऐसा कर सकते हैं:

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

Answer 12

ऐसा लगता है कि आप प्रोटोटाइप के माध्यम से jQuery ऑब्जेक्ट का विस्तार करना चाहते हैं (उर्फ एक jQuery प्लगइन लिखें )। इसका मतलब यह होगा कि jQuery फ़ंक्शन ( $(selector/DOM element)) कॉलिंग के माध्यम से बनाई गई हर नई वस्तु में यह विधि होगी।

यहाँ एक बहुत ही सरल उदाहरण दिया गया है:

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

डेमो

Answer 13

JQuery में किसी भी फ़ंक्शन को बनाने का सबसे सरल उदाहरण है

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

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