„Jquery“ žymos aprašymas

jQuery yra „Javascript“ biblioteka, taip pat galvojate apie „Javascript“ žymą. „jQuery“ yra populiari „naršyklės“ „JavaScript“ biblioteka, kuri palengvina dokumento objekto modelio (DOM), įvykių tvarkymo, animacijos ir AJAX sąveikų perdavimą, mažinant skirtumus tarp naršyklių. Klausimas su „jquery“ žyma turi būti susietas su „jquery“, todėl atitinkamame kode turi būti naudojamas prašymas, ir klausimas turi apimti bent jau elementus, susijusius su jquery naudojimu.

Apie

jQuery („Core“) yra „JavaScript“ biblioteka (sukurta „ John Resig“ ), kuri suteikia abstrakcijas bendroms kliento užduotims, pvz., DOM judėjimui, DOM manipuliavimui, įvykių tvarkymui, animacijai ir AJAX .

JQuery leidžia lengvai nuskaityti ir tvarkyti HTML dokumentus, įvykių tvarkymą, animaciją ir AJAX dėl API, kuris veikia keliose naršyklėse.

jQuery suteikia platformą kurti papildinius, kurie papildo galimybes, be to, kuriuos jau teikia biblioteka. JQuery ir susijusių projektų kūrimą koordinuoja JQuery fondas .

Specialios funkcijos

jQuery apima šias funkcijas:

  • Pasirenkant DOM elementus naudodami Sizzle daugiapakopį atvirojo kodo pasirinkimo mechanizmą, pabrėžiant jQuery projektą
  • Apeiti ir modifikuoti DOM (įskaitant palaikymą CSS 1-3)
  • DOM manipuliacija, pagrįsta CSS parinktimis, naudojančiais mazgų pavadinimus ir atributus (pvz., ID ir class ) kaip kriterijų, pagal kuriuos sukuriami selektoriai
  • Renginiai
  • Efektai ir animacijos
  • AJAX
  • JSON analizavimas (senesnėms naršyklėms)
  • Išplėtimas per įskiepius
  • Naudojimo priemonės, pvz., Vartotojo agento informacija, funkcijų aptikimas
  • Suderinamumo metodai, kurie iš pradžių yra prieinami šiuolaikinėse naršyklėse, tačiau reikia atsarginės kopijos „ inArray() pvz., inArray() ir each() funkcijai
  • Daugialypė naršyklė (negali būti painiojama su kryžminiu naršykle)

Naršyklės palaikymas

jQuery palaiko dabartinę stabilią versiją ir ankstesnę versiją „Chrome“, „Edge“, „Firefox“ ir „Safari“. Jis taip pat palaiko dabartinę stabilią „Opera“ versiją.

Be to, jQuery 1.x palaiko „Internet Explorer 6“ ar naujesnę versiją. Tačiau parama „IE 6-8“ buvo išjungta „ jQuery 2.x“ ir „ jQuery 3.x“ , kurios palaiko tik „IE 9“ ar naujesnę versiją.

Galiausiai, jQuery palaiko mobilųjį naršyklę „Android 4.0“ ir naujesnėje versijoje, o „Safari“ - „iOS 7“ ir naujesnėje versijoje.

JQuery versijos

jQuery dažnai atnaujinama, todėl biblioteka turėtų būti naudojama atsargiai. Kai kurios funkcijos pasenusios su naujesnėmis jQuery versijomis. Stebėkite leidinių pastabas, kad galėtumėte stebėti funkcijas.

„JQuery CDN“ teikia atsisiuntimo nuorodas visoms jQuery versijoms , įskaitant naujausias stabilias kiekvieno filialo versijas .

Klausdami su jQuery susijusių klausimų, turėtumėte:

  1. Atidžiai perskaitykite „jQuery API“ dokumentaciją ir išbandykite „Stack Overflow “.
  2. Atskirkite problemos kodą ir atkurkite ją internetinėje aplinkoje, pvz., JSFiddle , JSBin arba CodePen . Taip pat galite naudoti LiveWeave for Live Connect. Tačiau įsitikinkite, kad problemos kodas įtrauktas į jūsų klausimą - ne tik nuorodą į internetinę aplinką. Taip pat galite naudoti kamino fragmentus, kad į klausimą būtų įtrauktas vykdomasis kodas.
  3. Pažymėkite klausimą atitinkamai; visada įtraukite ir naudokite kitas žiniatinklio kūrimo žymes ( , , ), jei taikoma. Populiariausi jQuery įskiepiai taip pat turi savo žymes, pvz., „ , „ ir „ ; Kiekvienam kitam papildiniui yra žyma „ .
  4. Nurodykite naudojamo „jQuery“ bibliotekos versiją, kad bet kokie atsakymai gal ÷ tų pateikti šiai versijai tinkamus sprendimus.
  5. Nurodykite, kuriame naršyklėje rodomas kodas, ir kokie klaidos pranešimai, jei jie buvo, buvo išmesti naršyklėje. Jei kryžminės naršyklės problemos yra nuoseklios, tai ir vertinga informacija.

Dažniausiai užduodami klausimai

Sveikas pasaulis

Jis rodo „Hello world!“. Kiekvienos nuorodos įspėjimo >JSFiddle ) yra pasirengęs :

 // callback for document load $(function () { // select anchors and set click handler $("a").click(function (event) { // prevent link default action (redirecting to another page) event.preventDefault(); // show the message alert("Hello world!"); }); }); 

Ištekliai

Video pamoka

Populiarūs įskiepiai

Kiti JQuery fondo projektai

Geriausia praktika ir dažnai klaidos

Susiję klausimai: vengiama „jQuery“ spąstų

Nepamirškite naudoti paruošto tvarkytojo.

Jei jūsų kodas kažkaip valdo DOM, turite įsitikinti, kad jis veikia po to, kai DOM atsisiuntimas baigtas.

jQuery suteikia būdų tai padaryti anonimiškai:

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

arba su nurodyta funkcija:

 $(functionName); // Or $(document).ready(functionName); 

Tai yra alternatyvos įterpti „JavaScript“ kodą arba scenarijų žymą HTML prieš pat uždarymą </body> .

„JQuery 3.x“ rekomenduojamas būdas įtraukti paruoštą tvarkyklę yra $(function() {}) , o kitos formos, pvz., $(document).ready(function() {}) , yra netinkamos. Be to, jQuery 3.x pašalina galimybę naudoti „ .on("ready", function() {}) kad vykdytų funkciją „ready“ renginyje.

Venkite prieštaravimų su „ noConflict() ir kitu „jQuery“ slapyvardžiu

Jei jQuery kodas prieštarauja kitai bibliotekai, kuri taip pat naudoja $ ženklą kaip slapyvardį, naudokite metodą noConflict() :

 jQuery.noConflict(); 

Tada galite saugiai naudoti $ kaip kitos bibliotekos slapyvardį, naudodami jQuery funkcijas, skirtas jQuery funkcijoms.

Taip pat galite skambinti

 $jq = jQuery.noConflict(); 

ir naudokite $jq kaip $jq , skirtą jQuery. Pavyzdžiui:

 $jq(function () { $jq("a").click(function (event) { event.preventDefault(); alert("Hello world!"); }); }); 

Taip pat galite priskirti jQuery į $ konkrečioje srityje:

 jQuery(function ($) { // In here, the dollar sign is an alias for jQuery only. }); // Out here, other libraries can use the dollar sign as an alias. 

Tada galite naudoti $ kaip alias, skirtas jQuery šiai funkcijų blokai, nesirūpindami prieštaravimais su kitomis bibliotekomis.

Kur įmanoma, talpyklos jQuery objektai ir grandinė

Skambinimas jQuery $() funkcija yra brangi. Pakartotinis kreipimasis į jį labai neveiksmingas . Venkite:

 $('.test').addClass('hello'); $('.test').css('color', 'orange'); $('.test').prop('title', 'Hello world'); 

Vietoj to, išsaugokite jQuery objektą kintamajame:

 var $test = $('.test'); $test.addClass('hello'); $test.css('color', 'orange'); $test.prop('title', 'Hello world'); 

Arba dar geriau, naudokite grandinę, kad sumažintumėte pasikartojimą:

 $('.test').addClass('hello').css('color', 'orange').prop('title', 'Hello world'); 

Taip pat nepamirškite, kad daug funkcijų gali atlikti kelis pakeitimus viename skambutyje, grupuodamos visas vertes į objektą. Vietoj:

 $('.test').css('color', 'orange').css('background-color', 'blue'); 

naudoti:

 $('.test').css({ 'color': 'orange', 'background-color': 'blue' }); 

Kintamieji pavadinimo susitarimai

Nurodyti jQuery kintamieji paprastai vadinami pradedant nuo $ kad juos būtų galima atskirti nuo standartinių „JavaScript“ objektų.

 var $this = $(this); 

Žinokite savo DOM savybes ir funkcijas

Nors vienas iš „jQuery“ tikslų yra abstraktus DOM, žinios apie DOM savybes gali būti labai naudingos. Vienas iš labiausiai paplitusių klaidų, padarytų tiems, kurie studijuoja jQuery be mokymosi DOM, yra naudoti jQuery prieiti prie elemento savybių:

 $('img').click(function () { $(this).attr('src'); // Bad! }); 

Šiame kode this reiškia elementą, iš kurio buvo paleistas paspaudimų įvykių tvarkytojas. Minėtas kodas yra lėtas ir išsamus; Toliau pateiktas kodas veikia taip pat ir yra daug trumpesnis, greitesnis ir aiškesnis.

 $('img').click(function () { this.src; // Much, much better }); 

Idiomatinė elementų kūrimo sintaksė

Nors šie du pavyzdžiai yra funkciniu požiūriu lygiaverčiai ir sintaksiškai teisingi, pirmasis pavyzdys yra priimtinas:

 $('<p>', { text: 'This is a ' + variable, "class": 'blue slider', title: variable, id: variable + i }).appendTo(obj); 

Palyginimui, styginių susiejimo metodas yra daug mažiau suprantamas ir daug trapesnis:

 $('<p class="blue slider" id="' + variable + i + '" title="' + variable + '">This is a ' + variable + '</p>').appendTo(obj); 

Nors pirmasis pavyzdys bus lėčiau nei antrasis, didesnio aiškumo pranašumai greičiausiai viršys nominalius skirtumus visose, išskyrus labiausiai veikiančias programas.

Be to, idiomatinė sintaksė yra atspari specialių simbolių injekcijai. Pavyzdžiui, antrajame pavyzdyje citatos simbolis variable laikinai uždarytuose atributuose. Tinkamas kodavimas savaime yra įmanomas, net jei jis nerekomenduojamas, nes jis yra klaidingas.

Pokalbiai

Pokalbiai apie jQuery su kitais naudotojais:

Alternatyvos / Konkurentai

Kitos žinomos „JavaScript“ bibliotekos:

Viešosios saugyklos:

  • cdnjs yra į bendruomenę orientuotas debesų infrastruktūros projektas, kuris šiuo metu naudojasi ~ 1,143,000 svetainių visame pasaulyje.
  • jsdelivr - vienodai laisvas ir atviro kodo CDN cdnjs.

Susijusios žymos