# 27: Създаване на проста плъгин jQuery - CSS-трикове

Сега, когато разгледахме използването на плъгини jQuery, абсолютно си струва да разберем как да ги изградим също. Вече накратко засегнахме факта, че можете да разширите родния обект jQuery, ако искате. Точно като:

$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();

Но това не е особено полезно само по себе си. За да създадете нов метод за jQuery, който можете да извикате за набор от елементи, ще трябва да го направите по следния начин:

$.fn.myMethod = function() ( // I'm a new method ));

Това е абсолютно същото като използването на .prototype на jQuery, а за любопитните можете да прочетете повече за това тук. Правейки го по този начин означава, че ще можем да използваме този нов метод върху набор от елементи. Като:

$("li").myMethod();

Можете да правите каквото искате в този метод, но за да бъдете добър гражданин на jQuery plugin building building, трябва да върнете същия набор от елементи обратно от плъгина.

$.fn.myMethod = function() ( // Do some stuff return this; ));

По този начин ще работи с вериги. Ако не направите това и някой опита нещо като:

$ („Li“). MyMethod (). Show ();

Това ще се провали, защото .show()по същество няма да бъде призовано за нищо. Често плъгините jQuery са създадени да циклират всеки елемент, така че да имате директен достъп до всеки отделен елемент в набора, за да правите, както трябва.

Друго нещо, което трябва да направите, е да увиете плъгин в незабавно извикан израз на функция и да предадете в jQuery като параметър към него. По този начин можете да използвате $ вътре в кода на приставката си по-безопасно. Това е така, защото в някои ситуации $ shorthand за jQuery е недостъпен (напр. Потребител е използвал jQuery в „режим на съвместимост“).

С двете от последните две неща на място структурата на приставката става:

(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)

В скринкаста завършихме с изграждането на прост плъгин, за да добавим стрелка в края на всеки елемент.

Вижте Pen rwasH от Chris Coyier (@chriscoyier) на CodePen

Разбира се, може да стане по-сложно, тъй като амбицията ви да направите повече се увеличава.