JQuery este o bibliotecă grozavă. A ajutat la evitarea perfectă a tuturor capcanelor IE6. În vremurile trecute, compatibilitatea între browsere era o problemă majoră cu care se confruntă dezvoltatorii. Jquery a făcut față bine tuturor discrepanțelor în afișarea layout-urilor în diferite browsere.

Astăzi, browserele au soluții unificate excelente. Putem folosi confortabil toate privilegiile ES5 și avem la dispoziție și API-ul HTML5, ceea ce face mult mai ușoară procesarea elementelor DOM. Dezvoltatorii sunt în pragul uitării și se îndepărtează de jQuery pentru unele proiecte. Mai ales în cazul microserviciilor și al programelor necomplexe.

Nu mă înțelege greșit - Jquery este încă o bibliotecă minunată și, desigur, 70% din timp va trebui să o folosești. Deși pentru pagini mici cu JS limitat, puteți utiliza VanillaJS sau alt framework. Acestea sunt potrivite pentru aplicații mobile.

Ei bine, iată 10 exemple de cod de lucru pe care le puteți face fără jquery.

Urmărirea evenimentului complet de încărcare a paginii

Primul lucru pe care îl faceți când utilizați jQuery este să împachetați codul într-o metodă $(document).ready() pentru a ști când DOM-ul este gata pentru manipulare. Fără Jquery, putem folosi evenimentul DOMContentLoaded. Iată un exemplu de cod:

// Ascultă evenimentul DOMContentLoaded pentru întregul document, cu o funcție anonimă // Îți poți împacheta codul în brațele acestei funcții // și se va executa când pagina este încărcată. document.addEventListener("DOMContentLoaded", funcția () ( // salutul nostru hawaian, va fi afișat în consola console.log("Aloha"); ));

Selectoare de elemente fără Jquery

Într-o zi, va trebui să selectăm elemente folosind id, class sau etichete, iar jQuery este unul dintre cele mai bune. Ale căror selectoare sunt complet identice Sintaxa CSS. Astăzi, browserele au introdus două API-uri importante - querySelector și querySelectorAll.

// Puteți folosi document.querySelector pentru a obține primul element care corespunde criteriilor // ia doar un argument - selectori CSS. var lochNess = document.querySelector(".monsters"); console.log("Este din Scoția - " + lochNess.textContent); // putem obține colecția și folosind document.querySelectorAll. // returnează o listă de elemente dom care corespund criteriului var scary = document.querySelectorAll( ".monsters" ; console.log("Ascundeți și căutați campioni: "); pentru (var i = 0; i< scary.length; i++) { console.log(scary[i].innerHTML); }

• Nessy
• Picior mare
• La chupacabra

Crearea și ștergerea gestionarilor de evenimente (metode)

Ascultarea evenimentelor este o parte fundamentală a construirii aplicațiilor web. Din punct de vedere istoric, au existat două tabere mari - IE și restul. Dar astăzi, folosim doar addEventListener

Var btn = document.querySelectorAll("button"), list = document.querySelector("ul"); // Apelați addEventListener la evenimentul dorit. // începe să urmărească evenimentul clic pe un element. btn.addEventListener("clic", funcția () ( // Când se face clic pe un buton, dorim să declanșăm o scară de evenimente în lista noastră. // Pentru a face acest lucru, trebuie să adăugăm un eveniment la lista noastră // astfel încât când mouse-ul trece peste un element, funcția va declanșa lista .addEventListener("mouseover", enlarge )); // Pentru a anula evenimentul de zoom, utilizați removeEventListener. btn.addEventListener("click", function () ( // Eliminarea evenimentelor nu va functiona cu functii fara nume, foloseste doar cele numite list.removeEventListener("mouseover", marire); )); // Să creăm o funcție care va scala. var enlarge = function () ( // Adăugați o clasă pentru elementele list.classList.add("zoomed"); // când cursorul părăsește lista, eliminați clasa pentru a reveni la scara normală list.addEventListener("mouseout ", funcția ( ) ( list.classList.remove("zoomat") )); // Acum vrem să evidențiem numele când facem clic pe. // Când se face clic pe element, acesta ar trebui să devină verde // Datorită delegării evenimentului, putem adăuga pur și simplu un handler la element părinte// În această metodă, nu vom crea ascultători de evenimente pentru fiecare

. list.addEventListener("clic", funcția (e) ( // evidențiază elementul țintă în verde e.target.classList.add("verde"); ));

Activare zoom Dezactivare zoom

Faceți clic pe un nume pentru a-l evidenția

• Chewbacca
• Han Solo
• Luke
• Boba fett

Verde (culoare: verde; ) .zoomed (cursor: indicator; dimensiunea fontului: 23px; )

addEventListener a folosit un al treilea argument, dar acesta este opțional. După cum puteți vedea, codul arată destul de asemănător cu jQuery.

Adăugarea, eliminarea claselor fără jQuery în JS pur

Gestionarea claselor de elemente fără jQuery era o problemă uriașă pe vremuri. Dar nu mai. Datorită proprietății classList. Și dacă trebuie să schimbați atributele, puteți utiliza setAttribute.

Var btn = document.querySelectorAll("button"), div = document.querySelector("#myDiv"); btn.addEventListener(„clic”, funcția () ( // cale usoara obțineți atributele elementului console.log(div.id); )); // Element.classList stochează toate clasele de elemente din DOMTokenList. var classes = div.classList; btn.addEventListener("click", function () ( console.log(clases); )); btn.addEventListener("click", function () ( // Adăugarea și eliminarea claselor classes.add("red"); )); btn.addEventListener(„clic”, funcția () ( // Comută clasele clase.toggle(„ascuns”); ));

ID de afișare Clasele de afișare Culoare roșu Comutați vizibilitatea

Pătrat ( lățime: 100 px; înălțime: 100 px; margine de jos: 20 px; chenar: 1 px gri solid; chenar- rază: 5 px; ) .hidden ( vizibilitate: ascuns; ) .red ( fundal-culoare: roșu; )

Obținerea și modificarea conținutului HTML al unui element

jQuery are metode convenabile text() și html(). În schimb, puteți folosi proprietățile textContent și innerHTML, care există cu mult înainte de jQuery.

Var myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("button"); // În acest fel puteți afla cu ușurință întregul text al arborelui de elemente var myContent = myText.textContent; console.log("textContent: " + myContent); // Folosește textContent pentru a înlocui textul elementului // îl elimină pe cel vechi, înlocuindu-l cu text nou btn.addEventListener("click", function () ( myText.textContent = " Koalas sunt cele mai bune animale "; )); // Dacă avem nevoie de HTML-ul elementului, folosiți innerHTML. var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // Pentru a înlocui html, trebuie doar să furnizați un nou btn.addEventListener("click", function () ( myText.innerHTML = " Pinguinii sunt cele mai bune animale "; ));

Care sunt cele mai bune animale?

Koalas
Pinguinii

Inserarea de noi și ștergerea elementelor existente

În ciuda faptului că Jquery simplifică foarte mult munca cu adăugarea și eliminarea elementelor, nimeni nu a spus că acest lucru nu se poate face în codul JavaScript pur. Iată un exemplu despre cum să adăugați, să eliminați sau să înlocuiți un element pe o pagină.

Var lunch = document.querySelector("#pranz"); // Să presupunem că avem un meniu pentru prânzul nostru // Să adăugăm ceva la el var addFries = function () ( // Mai întâi creăm un element și îl umplem cu conținut var fries = document.createElement("div"); cartofi prăjiți .innerHTML = "

cartofi prajiti

"; // Odată ce acest lucru este făcut, vom folosi apoi appendChild pentru a-l insera în pagină. // Elementul nostru va apărea pe pagină în meniul lunch.appendChild(fries); ); // Adăugați brânză la burgerul nostru) . var addCheese = function () ( var beef = document.querySelector("#Beef"), topSlice = document.createElement("li"), bottomSlice = document.createElement("li"); bottomSlice.innerHTML = topSlice.innerHTML. = „Cheese”: // Luați elementul părinte beef și folosiți insertBefore // Primul argument din metoda insertBefore este elementul nostru adăugat // Al doilea argument este elementul înainte de care vom adăuga beef.parentNode. .insertBefore(topSlice, beef : // Trebuie să facem un mic truc // Furnizați următorul element cel mai apropiat ca al doilea parametru în insertBefore, // în acest fel introducem conținutul „după” elementul beef.parentNode! .insertBefore(bottomSlice, beef.nextSibling); removePickles = function () ( // elimina elementul var muraturi = document.querySelector("#pickles");

if (murături) (murături.parentNode.removeChild(murături); ) ); // Delicios! var btn = document.querySelectorAll("button"); btn.addEventListener(„clic”, addFries); btn.addEventListener(„clic”, addCheese); btn.addEventListener(„clic”, removePickles);

• Adăugați cartofi prăjiți la prânz Adăugați brânză la sandwich Eliminați murăturile My Lunch
• Sandvișul meu
• Pâine
• Murături
• Vită
• Sandvișul meu

Mayo Odată cu apariția jQuery, programatorii web au posibilitatea de a crea efecte vizuale impresionante fără a recurge la tehnologia flash. Acest articol prezintă câteva exemple izbitoare ale rezultatelor uimitoare care pot fi obținute folosind mijloace standard

browser și imaginația ta.

Efect de lupă

Un efect bine organizat care vă permite să măriți partea din imagine peste care va fi localizat cursorul. În browserele care nu sunt familiarizate cu CSS3, lupa va fi pătrată.

Aviaslider

Acest glisor are opt moduri diferite pentru răsfoirea imaginilor, fiecare dintre ele mulțumind ochiul cu dinamica sa impecabil lustruită.
Navigație la scară largă
Prezentare mare de imagini

Nu se întâmplă foarte des să dai peste un site care are o mulțime de elemente rotunde. Pluginul Bubble Navigation vă permite să creați o navigare dinamică bazată exclusiv pe cercuri.

Panou de conectare derulant
Circula

Vă permite să lansați elemente de pagină în jurul unui cerc și în diferite planuri ale spațiului.

Flip box

Pluginul Flip vă permite să răsturnați elemente ca și cum ar fi cărți.

Galerie plutitoare

Galerie informală de imagini. Previzualizarea conținutului este un grup de fotografii împrăștiate realizate cu o cameră Polaroid.

icarusel

Un glisor de imagine simplu, dar foarte frumos.

Imageflow

Prezentare de diapozitive cu imagini care se mișcă în spațiu.

Imagine interactivă

O modalitate foarte interesantă de a realiza un catalog interactiv de produse.

Jqtranziții fancy
Ședință foto

Vă permite să fotografiați părți individuale ale unei imagini pe o pagină. Faceți clic pe partea dorită a imaginii și vedeți rezultatul pe ecran.

Nisip rapid

Pluginul Quicksand vă va permite să sortați și să filtrați un set de elemente folosind efecte de foarte înaltă calitate.

Sfaturi de context pentru glisare

Acest plugin va fi foarte util pentru a crea descrieri detaliate ale obiectelor complexe și tururi interactive atunci când este necesar, ocupând cât mai puțin spațiu posibil. număr mare informaţii.

Cutii culisante

Pluginul Sliding Boxes vă va ajuta să creați o galerie dinamică neobișnuită de imagini cu legendele pentru ele.

galerie zoomer

O galerie de imagini ale căror elemente vor apărea vesel când treci cu mouse-ul peste ele.

03/10/17 14K

Fiecare funcție jQuery este folosită pentru a itera elementele unui obiect jQuery. Conține unul sau mai multe elemente DOM și oferă totul Funcții jQuery. În plus, jQuery oferă o funcție de ajutor cu același nume care poate fi apelată fără a selecta sau crea mai întâi elemente DOM. Să aflăm despre asta mai detaliat.

Sintaxa funcției jQuery .each().

În exemplul următor, selectăm toate elementele div dintr-o pagină web și afișăm indexul și ID-ul fiecăruia. Rezultate posibile: „div0:header”, „div1:body”, „div2:footer”. Exemplul folosește funcția jQuery each() mai degrabă decât funcția de ajutor:

// Elemente DOM $("div").each(funcție (index, valoare) ( ​​console.log("div" + index + ":" + $(this).attr("id")); ) );

Următorul exemplu demonstrează utilizarea funcției de ajutor. În acest caz, obiectul pe care este executată bucla este dat ca prim argument. În acest exemplu, voi arăta cum să parcurgeți o matrice cu folosind jQuery fiecare functie:

// Arrays var arr = [ „unu”, „două”, „trei”, „patru”, „cinci” ]; $.each(arr, function (index, value) ( ​​​​console.log(value); // Execuția se oprește după returnarea „trei” (valoare !== „trei”); )); // Rezultat: unu doi trei

În ultimul jQuery fiecare exemplu, vreau să reprezint bucle prin proprietățile obiectului:

// Obiecte var obj = ( unu: 1, doi: 2, trei: 3, patru: 4, cinci: 5 ); $.each(obj, funcție (index, valoare) ( ​​console.log(valoare); )); // Rezultat: 1 2 3 4 5

Totul se rezumă la formarea unui apel invers adecvat. Acest context de apel invers va fi egal cu al doilea argument, care este valoarea curentă. Dar din moment ce contextul va fi întotdeauna un obiect, atunci valori simple trebuie să fie „înfășurat”. Prin urmare, egalitatea strictă între sens și context nu poate fi dată. Primul argument este indexul curent, care este un număr pentru fiecare matrice jQuery sau un șir (pentru obiecte).

Exemplu de bază de utilizare a funcției jQuery .each().

Să vedem cum este utilizată funcția each() împreună cu obiectul jQuery. Primul exemplu selectează toate elementele din pagină și le afișează atributul href:

$("a").each(funcție (index, valoare)( console.log($(this).attr("href")); ));

Al doilea exemplu de utilizare a jQuery pentru fiecare obiect afișează toate href-urile externe pe o pagină web (presupunând că este utilizat protocolul HTTP):

$("a").each(funcție (index, valoare)( var link = $(this).attr("href"); if (link.indexOf("http://") === 0) ( console.log(link);

Să presupunem că pagina are următoarele link-uri:

JQUERY4U PHP4U LOGOOLA

Al doilea cod va scoate:

http://jquery4u.com http://www.phpscripts4u.com http://www.blogoola.com

Elementele DOM dintr-un obiect jQuery trebuie să fie „înfășurate” din nou atunci când sunt utilizate în fiecare (). Deoarece jQuery în sine este de fapt un container pentru o serie de elemente DOM. Cu fiecare funcție a jQuery, această matrice este procesată în același mod ca o matrice obișnuită. Prin urmare, nu primim elementele împachetate imediat după procesare.

Exemplu de matrice jQuery.each().

Să ne uităm din nou la modul în care poate fi procesată o matrice obișnuită:

var numere = ; $.each(numere, funcție (index, valoare)( console.log(index + ":" + valoare); ));

Rezultatul executării codului este: 0:1, 1:2, 2:3, 3:4, 4:5 și 5:6.

Matricea conține indici numerici, deci obținem numere care încep de la 0 și până la N - 1, unde N este numărul de elemente din tablou.

Exemplu JSON JQuery.each()

Putem avea structuri de date mai complexe, cum ar fi matrice din matrice, obiecte din obiecte, matrice din obiecte sau obiecte din matrice. Să ne uităm la modul în care jQuery find fiecare poate fi folosit în scenarii ca acesta:

var json = [ ( „roșu”: „#f00” ), ( „verde”: „#0f0” ), ( „albastru”: „#00f” ) ]; $.each(json, function () ( $.each(this, function (nume, valoare) ( ​​console.log(name + "=" + value); )); ));

Rezultatul executării codului: roșu=#f00, verde=#0f0, albastru=#00f.

Procesăm structura utilizând un apel imbricat each(). Apelul exterior procesează o matrice de variabile JSON, apelul interior procesează obiecte. În acest exemplu, fiecare element jQuery are o singură cheie. Dar folosind codul prezentat, poate fi atribuit orice număr de taste.

jQuery.each() Exemplu de clasă

Acest exemplu arată cum se repetă peste fiecare element cu clasa productDescription:

Roșu Roz Portocaliu Verde albăstrui Verde

Împreună cu selectorul, folosim funcția helper each() în loc de metoda each():

$.each($(".productDescription"), funcție (index, value) ( ​​​​console.log(index + ":" + $(value).text()); ));

Rezultatul utilizării jQuery pentru fiecare funcție va fi: 0:Roșu, 1:Portocaliu, 2:Verde.

Nu trebuie să folosim indicele și valoarea. Aceștia sunt parametrii care ajută la determinarea elementului DOM care este procesat în prezent de buclă. În plus, scriptul poate folosi metoda each() mai convenabilă:

$(".productDescription").each(function () ( console.log($(this).text()); ));

Rezultat .

AJAX este un grup de tehnologii care este utilizat în dezvoltarea web pentru a crea aplicații interactive. AJAX vă permite să transferați date de pe server fără a reîncărca pagina. Astfel poți obține rezultate foarte impresionante. Și biblioteca jQuery simplifică foarte mult implementarea AJAX folosind metode încorporate.

Pentru a implementa tehnologia, utilizați metoda $.ajax sau jQuery.ajax:

$.ajax(proprietăți) sau $.ajax(url [, proprietăți])

Al doilea parametru a fost adăugat în versiunea 1.5 a jQuery.

url - adresa paginii solicitate;

proprietăți - solicitați proprietăți.

Pentru o listă completă de opțiuni, consultați documentația jQuery.

În acest tutorial folosim câțiva dintre cei mai des utilizați parametri.

succes (funcție) - această funcție este apelată după ce cererea a fost finalizată cu succes. Funcția primește de la 1 la 3 parametri (în funcție de versiunea bibliotecii utilizate). Dar primul parametru conține întotdeauna datele returnate de la server.

date (obiect/șir) - date utilizator care sunt transmise paginii solicitate.

dataType (șir) - valori posibile: xml, json, script sau html. Descrierea tipului de date care este așteptat în răspunsul serverului.

tip (șir) - tip cerere. Valori posibile: GET sau POST. Implicit: GET.

url (șir) - adresa URL pentru cerere.

Exemplul 1

Transfer ușor de text.

$.ajax(( url: "response.php?action=sample1", succes: function(data) ( $(".rezults").html(data); ) ));

Există un element div .result pentru răspuns.

Asteptam un raspuns

Serverul returnează pur și simplu șirul:

Echo „Exemplu 1 - transfer finalizat cu succes”;

Exemplul 2

Transmitem personalitate Date PHP scenariu.

$.ajax(( tip: "POST", url: "response.php?action=sample2", date: "name=Andrew&nickname=Aramis", succes: function(data)( $(".results").html( date);

Serverul returnează un șir cu datele transmise introduse în el:

Echo "Exemplu 2 - transfer finalizat cu succes. Parametri: nume = " . $_POST[„nume”] . ", porecla= " . $_POST[„nickname”];

Exemplul 3

Trecerea și executarea codului JavaScript

$.ajax(( dataType: „script”, url: „response.php?action=sample3”, ))

Serverul execută codul:

Echo "$(".rezultate").html("Exemplu 3 - Executarea JavaScript");";

Exemplul 4

Folosim XML. Exemplul poate fi folosit pentru a lucra cu XML extern, de exemplu, un flux RSS.

$.ajax(( dataType: "xml", url: "response.php?action=sample4", succes: function(xmldata)( $(".results").html(""); $(xmldata).find ("articol").each(function())( $(" ").html($(this).text()).appendTo(".results"); ) ));

Serverul ar trebui să returneze codul XML:

Antet ("Content-Type: application/xml; charset=UTF-8");