jQuery
Плагины

Плагины - Начало работы

API jQuery можно расширить, добавив к его прототипу. Например, существующий API уже имеет множество доступных функций, таких как .hide() , .fadeIn() , .hasClass() и т. Д.

Прототип jQuery $.fn через $.fn , исходный код содержит строку

jQuery.fn = jQuery.prototype

Добавление функций в этот прототип позволит этим функциям быть доступными для вызова из любого сконструированного объекта jQuery (который делается неявно с каждым вызовом jQuery или каждый вызов $, если вы предпочитаете).

Построенный объект jQuery будет содержать внутренний массив элементов, основанный на переданном ему селекторе. Например, $('.active') построит объект jQuery, который содержит элементы с активным классом во время вызова (как, впрочем, это не живой набор элементов).

this значение внутри функции плагин будет ссылаться на созданный объект JQuery. В результате this используется для представления согласованного набора.

Основной плагин :

$.fn.highlight = function() {
    this.css({ background: "yellow" });
};

// Use example:
$("span").highlight();

Пример jsFiddle

Цепь и повторное использование

В отличие от вышеприведенного примера , плагины jQuery, как ожидается, будут Chainable .
Это означает возможность объединения нескольких методов в одну и ту же коллекцию элементов, например $(".warn").append("WARNING! ").css({color:"red"}) (см., Как мы использовали .css() после метода .append() , оба метода применяются к одной и той же коллекции .warn )

Разрешение использовать один и тот же плагин для разных коллекций, передающих разные параметры настройки, играет важную роль в настройке / повторном использовании

(function($) {
  $.fn.highlight = function( custom ) {

    // Default settings
    var settings = $.extend({
        color : "",              // Default to current text color
        background : "yellow"    // Default to yellow background
    }, custom);

    return this.css({     // `return this` maintains method chainability
        color : settings.color,
        backgroundColor : settings.background
    });

  };
}( jQuery ));


// Use Default settings
$("span").highlight();    // you can chain other methods

// Use Custom settings
$("span").highlight({
    background: "#f00",
    color: "white"
});

jsFiddle demo

свобода

Вышеприведенные примеры относятся к пониманию создания основного плагина. Имейте в виду не ограничивать пользователя ограниченным набором параметров настройки.

Скажем, например, вы хотите построить .highlight() котором вы можете передать нужный текст. Строка, которая будет подсвечена, и позволит максимально свободу стилей:

//...
// Default settings
var settings = $.extend({
   text : "",          // text to highlight
   class : "highlight" // reference to CSS class
}, custom);

return this.each(function() {
   // your word highlighting logic here
});
//...

пользователь может теперь передать желаемый текст и иметь полный контроль над добавленными стилями, используя собственный класс CSS:

$("#content").highlight({
    text : "hello",
    class : "makeYellowBig"
});

Пример jsFiddle

Метод jQuery.fn.extend ()

Этот метод расширяет объект прототипа jQuery ($ .fn) для предоставления новых настраиваемых методов, которые могут быть привязаны к функции jQuery ().

Например:

<div>Hello</div>
<div>World!</div>
 
<script>
jQuery.fn.extend({
  // returns combination of div texts as a result
  getMessage: function() {
    var result;
    // this keyword corresponds result array of jquery selection
    this.each(function() {
        // $(this) corresponds each div element in this loop
        result = result + " " + $(this).val();
    });
    return result;
  }
});
 
// newly created .getMessage() method
var message = $("div").getMessage();

// message = Hello World!
console.log(message); 
</script>