วิธีการสร้างฟังก์ชั่น jQuery (วิธี jQuery ใหม่หรือปลั๊กอิน)

ฉันรู้ว่าใน JavaScript ไวยากรณ์เป็นดังนี้:

function myfunction(param){
  //some code
}

มีวิธีการประกาศฟังก์ชั่นใน jQuery ที่สามารถเพิ่มองค์ประกอบ? ตัวอย่างเช่น:

$('#my_div').myfunction()

จากเอกสาร :

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

จากนั้นคุณทำ

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

ทั้งๆที่มีคำตอบทั้งหมดที่คุณได้รับมันก็คุ้มค่าที่จะสังเกตว่าคุณไม่จำเป็นต้องเขียนปลั๊กอินเพื่อใช้ jQuery ในฟังก์ชั่น แน่นอนถ้ามันเป็นฟังก์ชั่นที่เรียบง่ายและใช้งานครั้งเดียวผมเชื่อว่าการเขียนปลั๊กอินนั้นเกินความจริง มันสามารถทำได้มากขึ้นได้อย่างง่ายดายโดยเพียงแค่ผ่านการเลือกฟังก์ชั่นเป็นพารามิเตอร์ รหัสของคุณจะเป็นดังนี้:

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

myFunction($('#my_div'));

โปรดทราบว่า$ในชื่อตัวแปร$paramไม่จำเป็นต้องใช้ มันเป็นเพียงนิสัยของฉันที่จะทำให้จำได้ง่ายว่าตัวแปรนั้นมีตัวเลือก jQuery คุณสามารถใช้paramเช่นกัน

ในขณะที่มีเอกสาร / บทแนะนำมากมายเหลือเฟือคำตอบง่ายๆสำหรับคำถามของคุณคือ:

// 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จะล้างไปยังคอนโซลจำนวนขององค์ประกอบที่มีชั้นเรียน

แน่นอนว่ามีความหมายมากกว่านั้นเล็กน้อย (เช่นเดียวกับแนวปฏิบัติที่ดีที่สุดและดนตรีแจ๊สทั้งหมด) ดังนั้นโปรดอ่านให้ดี

ในการทำให้ฟังก์ชันพร้อมใช้งานบนวัตถุ 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/

ใช่ - สิ่งที่คุณกำลังอธิบายคือปลั๊กอิน jQuery

การเขียนปลั๊กอิน jQuery คุณสร้างฟังก์ชั่นใน JavaScript 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สำหรับเรื่องราวทั้งหมด

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

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

คุณยังสามารถใช้ส่วนขยาย (วิธีที่คุณสร้างปลั๊กอิน jQuery):

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

    myfunction2: function () 
    {
    }
});

การใช้งาน:

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

คุณสามารถเขียนปลั๊กอิน jQuery ของคุณเอง (ฟังก์ชั่นที่สามารถเรียกใช้ในองค์ประกอบที่เลือก) เช่นด้านล่าง:

(ฟังก์ชั่น ($) {
    $ .fn.myFunc = ฟังก์ชั่น (param1, param2) {
        // this - วัตถุ jquery เก็บองค์ประกอบที่คุณเลือก
    }
}) (jQuery);

เรียกมันว่าชอบ:

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

ใช่วิธีการที่คุณใช้กับองค์ประกอบที่เลือกโดยใช้ jquery เรียกว่าปลั๊กอิน jquery และมีข้อมูลจำนวนมากเกี่ยวกับการเขียนภายในเอกสาร jquery

มันน่าสังเกตว่า jquery เป็นเพียง javascript ดังนั้นจึงไม่มีอะไรพิเศษเกี่ยวกับ "jquery method"

สร้างวิธี "colorize":

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

ใช้มัน:

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

ตัวอย่างง่ายๆ-ish นี้รวมที่ดีที่สุดของวิธีการสร้างปลั๊กอินพื้นฐานในเอกสาร jQuery และคำตอบจาก@Candide , @Michael

• แสดงออกฟังก์ชั่นที่มีชื่ออาจปรับปรุงร่องรอยสแต็ค ฯลฯ
• วิธีการที่กำหนดเองที่ผลตอบแทนอาจจะถูกล่ามโซ่this (ขอบคุณ @Potheek)

คุณสามารถทำสิ่งนี้ได้เสมอ:

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

ดูเหมือนว่าคุณต้องการขยายวัตถุ jQuery ผ่านทางต้นแบบ (หรือที่รู้จักว่าเขียนปลั๊กอิน jQuery ) นี่หมายความว่าทุก ๆ วัตถุใหม่ที่สร้างขึ้นผ่านการเรียกใช้ฟังก์ชัน jQuery ( $(selector/DOM element)) จะมีวิธีนี้

นี่คือตัวอย่างง่ายๆ:

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

การสาธิต

ตัวอย่างที่ง่ายที่สุดในการสร้างฟังก์ชั่นใด ๆ ใน jQuery คือ

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

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