কীভাবে একটি jQuery ফাংশন তৈরি করবেন (একটি নতুন jQuery পদ্ধতি বা প্লাগইন)?

Question

আমি জানি যে জাভাস্ক্রিপ্টে সিনট্যাক্সটি নিম্নরূপ:

function myfunction(param){
  //some code
}

JQuery এ কোনও ফাংশন ঘোষণার কোনও উপায় আছে যা কোনও উপাদানকে যুক্ত করা যেতে পারে? উদাহরণ স্বরূপ:

$('#my_div').myfunction()

Comments

@ রেড আইডম্যানস্টার - এটি প্রচুর পরিমাণে অর্থবোধ করে। JQuery ডেটপিকারের মতো কি কখনও ব্যবহার করেছেন? $('#myDatePickerfield').datePicker();

— জমিকে

না, তবে আমাকে এটি সম্পর্কে সতর্ক করার জন্য ধন্যবাদ নেই

— রেডইয়েডমন্সটার

@ রেডইয়েডমন্সটার - আপনি সম্ভবত ব্যবহার করেছেন $("#someElement").hide()বা .addClass()...

— nnnnnn

@ রেডইয়েডমন্সটার: ওপি jQuery প্লাগইনগুলি বর্ণনা করছে যা জাভাস্ক্রিপ্টে আসলে বেশ সাধারণ। ডকস.জকোয়ারি

— পল ডি

Answer 1

দস্তাবেজ থেকে :

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

তাহলে তুমি করো

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

Comments

আমি যাকে গুরুত্বপূর্ণ মনে করেছি এমন কিছু যুক্ত করতে: দয়া করে যুক্ত করুন - এটি ফিরিয়ে দিন; সতর্কতা পরে। এটি ফাংশন চেইন-সক্ষম করে তুলবে।

— পোথেক

অনেক সঠিক উত্তর এখানে। JQuery-Docu পার্থক্যগুলি দেখায়: learn.jquery.com/plugins/basic-plugin-creation

— অ্যান্ডি শচিয়ের্সচ

@cindide কোন মুহুর্তে $('my_div').myfunction(); কল হবে

— নিখিল জি

@ নিখিলজি '(' মাই_ডিভ ') একটি ট্যাগকে বোঝায় <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 প্রোটোটাইপের সাথে যুক্ত করুন (এফএনএস 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.fn।

যেমন

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

আপনার প্লাগইন ফাংশনের মধ্যে thisকীওয়ার্ডটি jQuery অবজেক্টে সেট করা আছে যার উপর আপনার প্লাগইনটি চালু হয়েছিল। সুতরাং, আপনি যখন করবেন:

$('#my_div').myfunction()

তারপরে thisভিতরে myfunctionফিরে jQuery অবজেক্ট সেট করা হবে $('#my_div')।

সম্পূর্ণ গল্পের জন্য http://docs.jquery.com/ প্লাগইনস / অনুমোদন দেখুন ।

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 প্লাগইন (ফাংশন যা নির্বাচিত উপাদানগুলির উপর ডাকা যেতে পারে) লিখতে পারেন:

(ফাংশন ($) {
    f .fn.myFunc = ফাংশন (প্যারাম 1, প্যারাম 2) {
        // এটি - jquery অবজেক্ট আপনার নির্বাচিত উপাদানগুলি ধারণ করে
    }
}) (jQuery);

পরে এটিকে কল করুন:

'(' ডিভ ') my myFunc (1, নাল);

Answer 9

হ্যাঁ, আপনি যে পদ্ধতিগুলি jquery ব্যবহার করে নির্বাচিত উপাদানগুলিতে প্রয়োগ করেন, তাদের jquery প্লাগইন বলা হয় এবং jquery ডক্সের মধ্যে রচনার জন্য প্রচুর পরিমাণে তথ্য রয়েছে ।

যে jQuery লক্ষ তার মূল্য হয় শুধু জাভাস্ক্রিপ্ট, তাই আছে একটি "jQuery পদ্ধতি" সম্পর্কে কিছুই বিশেষ।

Comments

'"jquery পদ্ধতি" সম্পর্কে বিশেষ কিছু নেই' - হ্যাঁ আছে: একটি "jQuery পদ্ধতি" jQuery অবজেক্টে কাজ করে। (তবে হ্যাঁ, jQuery হ'ল জেএস ...)

— nnnnnn

Answer 10

একটি "রঙিন" পদ্ধতি তৈরি করুন:

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

এটা ব্যবহার করো:

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

এই সহজ পর উদাহরণস্বরূপ শ্রেষ্ঠ সম্মিলন কিভাবে একটি বেসিক প্লাগইন তৈরি করুন jQuery এর ডক্স, এবং নিকট থেকে উত্তর @Candide , @Michael ।

• একটি নামযুক্ত ফাংশন এক্সপ্রেশন স্ট্যাক ট্রেস ইত্যাদির উন্নতি করতে পারে etc.
• একটি কাস্টম পদ্ধতি যা প্রত্যাবর্তন করে 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 এ কোনও ফাংশন তৈরির সহজ উদাহরণ is

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

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