# 27: paprasto „jQuery“ papildinio kūrimas - CSS-gudrybės

Dabar, kai apžvelgėme „jQuery“ papildinių naudojimą, verta suprasti, kaip juos kurti. Mes jau trumpai palietėme tai, kad jei norite, galite išplėsti gimtąjį „jQuery“ objektą. Kaip:

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

Bet tai savaime nėra ypač naudinga. Norėdami sukurti naują „jQuery“ metodą, kurį galite iškviesti naudodamiesi elementų rinkiniu, turėsite tai padaryti taip:

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

Tai lygiai tas pats, kas naudoti .prototype jQuery, o smalsuoliams apie tai galite daugiau sužinoti čia. Tokiu būdu tai reiškia, kad tą naują metodą galėsime naudoti elementų rinkinyje. Kaip:

$("li").myMethod();

Jūs galite padaryti viską, ką norite naudodami šį metodą, tačiau norint būti geru „jQuery“ įskiepių kūrimo piliečiu, turėtumėte grąžinti tą patį elementų rinkinį iš papildinio.

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

Tokiu būdu jis veiks su grandinėmis. Jei to nepadarote, o kažkas išbandė:

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

Tai žlugtų, nes .show()nebūtų kviečiama iš esmės nieko. Dažnai „jQuery“ įskiepiai yra modifikuoti taip, kad perjungtų kiekvieną elementą, kad galėtumėte tiesiogiai pasiekti kiekvieną atskirą rinkinio elementą, kad atliktumėte tai, ko jums reikia.

Kitas dalykas, kurį reikia padaryti, yra apvynioti papildinį iškart iškviečiamoje funkcijos išraiškoje ir perduoti jQuery kaip parametrą. Tokiu būdu galite saugiau naudoti $ įskiepio kodą. Taip yra todėl, kad kai kuriose situacijose „jQuery“ $ stenografas nepasiekiamas (pvz., Vartotojas „jQuery“ naudojo „suderinamumo režimu“).

Sujungus abu pastaruosius du dalykus, papildinio struktūra tampa:

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

Ekrano rodinyje mes sukūrėme paprastą papildinį, kad rodyklė būtų pridėta prie bet kurio elemento pabaigos.

Peržiūrėkite Chriso Coyier (@chriscoyier) „Pen rwasH“, esantį „CodePen“

Žinoma, tai gali tapti dar sudėtingesnė, nes jūsų siekis padaryti daugiau.