javascript - Sfaturi și trucuri jQuery

Sintaxă

Prescurtare pentru evenimentul ready de roosteronacid
Întreceri de linii și capacitatea de legare de către roosteronacid
Filtrarea imbricată de Nathan Long
Cachează o colecție și execută comenzi pe aceeași linie de roosteronacid
Conține selector de la roosteronacid
Definirea proprietăților la crearea elementului de roosteronacid
Accesează funcțiile jQuery așa cum ai accesa un array de roosteronacid
Funcția noConflict - Eliberarea variabilei $ de către Oli
Izolați variabila $ în modul noConflict de către nickf
Mod fără conflicte de roosteronacid

Stocarea datelor

Funcția de date - leagă datele de elemente de TenebrousX
Suport pentru atributele de date HTML5, la superlativ! de roosteronacid
Pluginul jQuery pentru metadate de Filip Dupanović

Optimizare

Optimizează performanța selectorilor complexi de către roosteronacid
Parametrul context de lupefiasco
Salvează și reutilizează căutările de Nathan Long
Crearea unui element HTML și păstrarea unei referințe, Verificarea dacă un element există, Scrierea propriilor selectoare de Andreas Grech

Diverse

Verifică indexul unui element într-o colecție de redsquare
Gestionari de evenimente live de TM
Înlocuiește funcțiile anonime cu funcții denumite de Ken
Framework-ul Microsoft AJAX și puntea jQuery de Slace
Tutoriale jQuery de egyamado
Elimină elemente dintr-o colecție și păstrează posibilitatea de a le lega în lanț de roosteronacid
Declare $this la începutul funcțiilor anonime de către Ben
FireBug lite, plug-inul Hotbox, indică când o imagine a fost încărcată și CDN-ul Google de Colour Blend
Utilizarea judicioasă a scripturilor jQuery terțe de către harriyott
Funcția each de Jan Zich
Plugin-ul Form Extensions de Chris S
Funcția each asincronă de OneNerd
Plug-in-ul de template jQuery: implementarea logicii complexe folosind funcții de randare de roosteronacid

Răspuns #1

Crearea unui element HTML și păstrarea unei referințe

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created, 
   I can just reference it from the "newDiv" variable */

Verificarea dacă un element există

if ($("#someDiv").length)
{
    // It exists...
}

Scrierea propriilor tale selectori

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

Răspunsul #2

Metoda data() a jQuery este utilă și nu foarte cunoscută. Aceasta îți permite să asociezi date elementelor DOM fără a modifica DOM-ul.

Răspunsul #3

Filtre în cuib

Poți cuibări filtrele (așa cum a arătat nickf aici).

.filter(":not(:has(.selected))")

Răspunsul #4

Nu sunt cu adevărat fan al comenzii rapide $ (document).ready(fn). Sigur, reduce cantitatea de cod, dar reduce mult și lizibilitatea codului. Când vezi $ (document).ready(...), știi la ce te uiți. $ (...) este folosit în prea multe alte moduri pentru a avea sens imediat.

Dacă aveți mai multe framework-uri, puteți folosi jQuery.noConflict(); așa cum spuneți, dar puteți de asemenea să îi atribuiți o variabilă diferită astfel:

var $j = jQuery.noConflict();

$j("#myDiv").hide();

Foarte util dacă aveți mai multe framework-uri care pot fi reduse la apeluri de tip $x(...).

Răspunsul #5

Ooooh, să nu uităm de metadatele jQuery! Funcția data() este grozavă, dar trebuie să fie populată prin apeluri jQuery.

În loc să încălcați conformitatea W3C cu atributele elementelor personalizate, cum ar fi:

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/>

Folosește în schimb metadatele:

<input 
  name="email" 
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>

Răspuns #6

Gestionarii Evenimentelor Live

Setează un handler de eveniment pentru orice element care corespunde unui selector, chiar dacă este adăugat în DOM după încărcarea inițială a paginii:

$('button.someClass').live('click', someFunction);

Acest lucru vă permite să încărcați conținut prin ajax sau să îl adăugați prin javascript și să aveți managerii de evenimente setați corespunzător pentru acele elemente automat.

De asemenea, pentru a opri gestionarea evenimentului live:

$('button.someClass').die('click', someFunction);

Acești handle-uri pentru evenimente live au câteva limitări comparativ cu evenimentele obișnuite, dar funcționează foarte bine în majoritatea cazurilor.

Pentru mai multe informații, consultați Documentația jQuery.

ACTUALIZARE: live() și die() sunt depășite în jQuery 1.7. Vezi http://api.jquery.com/on/ și http://api.jquery.com/off/ pentru funcționalități similare de înlocuire.

ACTUALIZARE2: live() a fost de mult înlocuită, chiar înainte de jQuery 1.7. Pentru versiunile jQuery 1.4.2+ până la 1.7 folosiți delegate() și undelegate(). Exemplul live() ($ ('button.someClass').live('click', someFunction);) poate fi rescris folosind delegate() astfel: $ (document).delegate('button.someClass', 'click', someFunction);.

Răspunsul #7

Înlocuiește funcțiile anonime cu funcții denumite. Acest lucru depășește cu adevărat contextul jQuery, dar pare să fie mai relevant când se folosește jQuery, datorită dependenței sale de funcțiile de tip callback. Problemele pe care le am cu funcțiile anonime inline sunt că sunt mai greu de depanat (este mult mai ușor să te uiți la un callstack cu funcții denumite clar, în loc de 6 niveluri de „anonim”), și de asemenea faptul că mai multe funcții anonime într-un lanț jQuery pot deveni greu de citit și/sau de întreținut. În plus, funcțiile anonime de obicei nu sunt reutilizate; pe de altă parte, declararea funcțiilor denumite mă încurajează să scriu cod care este mai probabil să fie reutilizat.

O ilustrație; în loc de:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

Prefer:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

Răspunsul #8

Definirea proprietăților la crearea elementului

În jQuery 1.4 poți folosi un literal de obiect pentru a defini proprietăți atunci când creezi un element:

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

... Poți chiar să adaugi stiluri:

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

Iată un link către documentație.

Răspunsul #9

în loc să folosesc un alias diferit pentru obiectul jQuery (când folosesc noConflict), întotdeauna scriu codul meu jQuery învăluindu-l pe tot într-o închidere. Acest lucru se poate face în funcția document.ready:

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

alternativ, poți să o faci astfel:

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

Consider că acesta este cel mai portabil. Am lucrat la un site care folosește atât Prototype, cât și jQuery simultan și aceste tehnici au evitat toate conflictele.

Răspuns #10

Verifică Indexul

jQuery are .index, dar este dificil de folosit, deoarece ai nevoie de lista de elemente și trebuie să transmiți elementul al cărui index îl dorești:

var index = e.g $('#ul>li').index( liDomObject );

Următorul este mult mai ușor:

Dacă vrei să știi indexul unui element dintr-un set (de exemplu, elemente dintr-o listă) dintr-o listă neordonată:

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

Răspuns #11

Prescurtare pentru evenimentul ready

Modul explicit și verbose:

$(document).ready(function ()
{
    // ...
});

Abrevierea:

$(function ()
{
    // ...
});

Răspunsul #12

Pe funcția principală jQuery, specificați parametrul context în plus față de parametrul selector. Specificarea parametrului context permite jQuery să pornească de la o ramură mai adâncă în DOM, mai degrabă decât de la rădăcina DOM. Având un DOM suficient de mare, specificarea parametrului context ar trebui să se traducă prin câștiguri de performanță.

Exemplu: Găsește toate intrările de tip radio din cadrul primului formular din document.

$("input:radio", document.forms[0]);

Referință: http://docs.jquery.com/Core/jQuery#expressioncontext

Răspunsul #13

Nu chiar doar jQuery, dar am făcut un mic pod frumușel pentru jQuery și MS AJAX:

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
  return $('#' + this.get_id());
}

Este foarte plăcut dacă faci multe lucruri cu ASP.NET AJAX, deoarece jQuery este acum susținut de MS, având o punte frumoasă înseamnă că este foarte ușor să faci operațiuni jQuery:

$get('#myControl').j().hide();

Deci exemplul de mai sus nu este grozav, dar dacă scrieți controale server ASP.NET AJAX, face ca utilizarea jQuery în implementarea controlului dvs. pe partea de client să fie ușoară.

Răspunsul #14

Optimizează performanța selectorilor complexi

Interogarea unui subset al DOM-ului atunci când se folosesc selectori complexi îmbunătățește drastic performanța:

var subset = $("");

$("input[value^='']", subset);

Răspuns #15

Vorbind despre Sfaturi și Trucuri și de asemenea despre unele tutoriale. Am găsit această serie de tutoriale („jQuery pentru Începători Absoluți” Seria Video) de Jeffery Way FOARTE UTILĂ.

Se adresează dezvoltatorilor care sunt noi în jQuery. El arată cum să creezi multe lucruri interesante cu jQuery, cum ar fi animația, crearea și eliminarea elementelor și altele...

Am învățat multe din asta. El arată cât de ușor este să folosești jQuery. Acum îl iubesc și pot citi și înțelege orice script jQuery, chiar dacă este complex.

Iată un exemplu care îmi place: „Redimensionarea textului”

1- jQuery...

<script language="javascript" type="text/javascript">
    $(function() {
        $('a').click(function() {
            var originalSize = $('p').css('font-size'); // get the font size 
            var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
            var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch

            $('p').css('font-size', number / 1.2 + unitOfMeasure);
            if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
         });        
     });
</script>

2- Stilizarea CSS...

<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>

2- HTML...

<div class="box">
    <a href="#" id="larger">Larger</a> | 
    <a href="#" id="Smaller">Smaller</a>
    <p>
    In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods. 
    </p>
</div>

Recomand cu căldură aceste tutoriale...

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

Răspuns #16

Funcția each() asincronă

Dacă aveți documente cu adevărat complexe unde rularea funcției jquery each() blochează browserul în timpul iterării și/sau Internet Explorer afișează mesajul 'doriți să continuați să rulați acest script', această soluție vă va salva ziua.

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

Prima modalitate de a-l folosi este exact ca each():

$('your_selector').forEach( function() {} );

Un al doilea parametru opțional vă permite să specificați viteza/întârzierea între iterații, ceea ce poate fi util pentru animații (exemplul următor va aștepta 1 secundă între iterații):

$('your_selector').forEach( function() {}, 1000 );

Amintește-ți că, din moment ce acest lucru funcționează asincron, nu te poți baza ca iterațiile să fie finalizate înainte de următoarea linie de cod, de exemplu:

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete

Am scris asta pentru un proiect intern și, deși sunt sigur că poate fi îmbunătățit, a funcționat pentru ce aveam nevoie, așa că sper că unii dintre voi îl găsiți util. Mulțumesc -

Răspunsul #17

Prescurtare sintactică-sugar-lucru--Cachează o colecție de obiecte și execută comenzi pe un singur rând:

În loc de:

var jQueryCollection = $("");

jQueryCollection.command().command();

Eu fac:

var jQueryCollection = $("").command().command();

Un caz de utilizare oarecum „real” ar putea fi ceva de genul următor:

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

Răspuns #18

Îmi place să declar o variabilă $this la începutul funcțiilor anonime, ca să știu că pot face referire la un this jQueried.

Așa:

$('a').each(function() {
    var $this = $(this);

    // Other code
});

Răspunsul #19

Salvează obiectele jQuery în variabile pentru reutilizare

Salvarea unui obiect jQuery într-o variabilă îți permite să îl reutilizezi fără a fi nevoie să cauți din nou în DOM pentru a-l găsi.

(Așa cum a sugerat @Louis, acum folosesc $ pentru a indica că o variabilă deține un obiect jQuery.)

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

Ca un exemplu mai complex, să zicem că ai o listă de alimente într-un magazin și vrei să arăți doar pe cele care corespund criteriilor unui utilizator. Ai un formular cu casete de selectare, fiecare conținând un criteriu. Casetele de selectare au nume precum organic și lowfat, iar produsele au clase corespunzătoare - .organic, etc.

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

Acum poți continua să lucrezi cu acest obiect jQuery. De fiecare dată când este bifată sau debifată o casetă, începe de la lista principală de alimente și filtrează în funcție de casetele bifate:

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

Răspuns #20

Accesează funcțiile jQuery așa cum ai accesa un array

Adaugă/elimină o clasă pe baza unui boolean...

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

Este versiunea mai scurtă a...

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

Nu sunt atât de multe cazuri de utilizare pentru asta. Cu toate acestea, cred că e drăguț :)

Actualizare

Doar în caz că nu ești tipul care citește comentarii, ThiefMaster subliniază că toggleClass acceptă o valoare booleană, care determină dacă o clasă ar trebui adăugată sau eliminată. Deci, în ceea ce privește codul meu de exemplu de mai sus, aceasta ar fi cea mai bună abordare...

$('selector').toggleClass('name_of_the_class', true/false);

Răspuns #21

Se pare că majoritatea sfaturilor interesante și importante au fost deja menționate, așa că acesta este doar o mică completare.

Micul sfat este funcția jQuery.each(object, callback). Probabil toată lumea folosește funcția jQuery.each(callback) pentru a itera peste obiectul jQuery în sine pentru că este natural. Funcția utilitară jQuery.each(object, callback) iterează peste obiecte și array-uri. Pentru mult timp, cumva, nu am văzut la ce ar putea să servească în afară de o sintaxă diferită (nu mă deranjează să scriu bucle în stil vechi), și îmi este puțin rușine că mi-am dat seama de adevărata sa putere abia recent.

Problema este că, deoarece corpului buclei în jQuery.each(object, callback) este o funcție, obții un nou domeniu de vizibilitate de fiecare dată în buclă, ceea ce este deosebit de convenabil atunci când creezi închideri în buclă.

Cu alte cuvinte, o greșeală comună tipică este să faci ceva de genul:

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

Acum, atunci când invoci funcțiile din array-ul functions, vei obține de trei ori alerta cu conținutul undefined, ceea ce cel mai probabil nu este ceea ce ți-ai dorit. Problema este că există doar o variabilă i, iar toate trei closure-urile se referă la ea. Când bucla se termină, valoarea finală a lui i este 3, iar someArrary[3] este undefined. Ai putea să ocolești problema apelând o altă funcție care să creeze closure-ul pentru tine. Sau poți folosi utilitarul jQuery care practic va face asta pentru tine:

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

Acum, când invoci funcțiile, primești trei alerte cu conținutul 1, 2 și 3, așa cum era de așteptat.

În general, nu este nimic ce nu ai putea face singur, dar e plăcut să ai.