Scripturi de promovare jQuery. Exemplu jQuery. Exemple simple de scripturi jQuery. Crearea de noi elemente
Odată cu apariția WEB 2.0, s-au dezvoltat și cadrele javascript, permițând webmasterilor să creeze elemente dinamice ale site-ului mult mai rapid și mai ușor. Un astfel de cadru este jQuery, care a câștigat o popularitate imensă pentru simplitatea și greutatea incredibil de ușoară. Așadar, vă prezint atenției cele mai utile 10 scripturi jQuery pentru îmbunătățirea interfeței site-ului dvs.
Cutie groasă
Descriere: necesar pentru a atrage atenția utilizatorului asupra unui text, imagine sau formular web printr-o fereastră modală.
Când și unde să utilizați: când trebuie să afișați mai multe informații utilizatorului, să afișați o imagine mai mare, să puneți câteva întrebări cu un formular web sau să afișați un formular de conectare, dar nu doriți ca utilizatorul să părăsească pagina.
Script, exemplu, documentație
Plugin WordPress
Tabulări
Descriere: Vă permite să afișați conținutul paginii în file.
Când și unde să utilizați: când doriți să eliberați spațiu pe ecran furnizând acces rapid La informații ascunse. Folosit adesea în widget-uri pentru diverse teme premium WordPress.
Script, exemplu, documentație
Plugin WordPress
Glisor Coda
Descriere: creează un glisor, ca în captura de ecran de pe site-ul web Coda.
Când și unde se utilizează: ca și în cazul Coda, acest script este excelent pentru a prezenta produse sau servicii grupate în secțiuni. Utilizatorii au ocazia privire de ansamblu rapidă, precum și navigarea intuitivă.
Script, exemplu, documentație
Temă pentru WordPress
Galleria
Descriere: Galleria este o galerie javascript scrisă în jQuery. Încarcă imaginile una câte una și afișează miniaturi ale acestora.
Când și unde este utilizat: pentru a afișa fotografii ale unui eveniment sau produs, de exemplu.
Script, exemplu, documentație
jSfat
Descriere: sfaturi instrumente implementate în jQuery.
Când și unde este utilizat: Când trebuie să oferiți mai multe informații despre un obiect în contextul unui articol sau să implementați indicii utilizatorului în diferite forme web.
Script, exemplu, documentație
Plugin WordPress
Comutator de foi de stil
Descriere: permite vizitatorilor site-ului dvs. să schimbe în mod independent stilurile de design „într-un singur clic”.
Când și unde se utilizează: când doriți să permiteți utilizatorului să selecteze diferite dimensiuni de font, afișați informații formatate pentru telefon mobil sau pentru imprimare, lăsați-l să ajusteze culorile. Comutatorul de foi de stil poate ajuta cu adevărat la îmbunătățirea gradului de utilizare a site-ului dvs.
Script, exemplu, documentație
Plugin WordPress
meniul jQuery Accordion
Descriere: Vă permite să creați meniuri dinamice.
Script, exemplu, documentație
Plugin WordPress
Galeria Slider
Descriere: Prezintă produse/imagini într-o galerie derulabilă.
Când și unde să utilizați: când doriți să încadrați toate elementele din bara laterală, dar nu există suficient spațiu pentru toate opțiunile.
Script, exemplu, documentație
Validarea formularului
Descriere: validați formularele web folosind validarea formularelor pentru a evita câmpurile completate incorect.
Când și unde este utilizat: în majoritatea formelor. Acest lucru îi ajută pe utilizatori să înțeleagă exact unde au completat incorect câmpurile prin evidențierea erorilor lor.
Script, exemplu, documentație
jMârâi
Descriere: Afișează mesajele în browser la fel ca Growl pe MacOSX
Când și unde să utilizați: Dacă informați utilizatorul despre o acțiune, dar nu doriți ca acesta să părăsească pagina curentă/să o reîmprospăteze. Aceasta este o modalitate excelentă de a confirma acțiunile efectuate de utilizator, cum ar fi înregistrarea. De asemenea, puteți utiliza jGrowl în diverse magazine etc. pentru a confirma adăugarea unui articol în coș sau pentru a confirma o tranzacție.
Script, exemplu, documentație
Acum 10 ani, când jQuery era la început, ecosistemul browserului era foarte divers și fiecare dintre produsele care existau atunci se lupta cu complexitatea manipulării elementelor DOM în felul său. O sarcină ambițioasă pe care ne-am propus-o nouă Dezvoltatorii jQuery, a fost de a dezvolta o abordare universală pentru a rezolva aceste probleme și de a crea un API care să funcționeze la fel de bine în orice situație.
Din câte au putut să judece, dar după 10 ani de existență, jQuery rămâne una dintre cele mai populare biblioteci JavaScript.
JavaScript în sine este acum un produs complet matur, bine documentat și susținut de toate browserele moderne. Comunitatea de browsere moderne este, de asemenea, mai consolidată și, în cele mai multe cazuri, poți fi sigur că, dacă, de exemplu, o pagină este afișată corect în Crome, atunci va arăta la fel în Firefox. QuerySelectors sunt, de asemenea, acceptate de aproape toate browserele moderne.
S-ar părea că istoria dezvoltării jQuery se îndreaptă spre apus - de ce supraîncărcați paginile și pierdeți cicluri suplimentare de procesor dacă majoritatea problemelor pot fi rezolvate mijloace standard limba? Pe de altă parte, într-o perioadă atât de lungă pentru industria calculatoarelor, au fost dezvoltate un număr mare de soluții care pot fi pur și simplu luate și utilizate, aici și acum.
Cred că această alegere ar trebui făcută chiar de dezvoltator în fiecare situație specifică, concentrându-se nu pe modă și tendințe, ci pe bunul simț și pe perspectivele de dezvoltare a creației sale.
În această recenzie, am colectat toate pluginurile jQuery gratuite despre care știu, care sunt în prezent dezvoltate în mod activ sau care au fost actualizate cel puțin o dată în ultimul an. Unele dintre ele le-am folosit și le-am folosit în mod activ în practica mea, pe altele le cunosc doar superficial, dar m-au impresionat prin capacitățile lor. Printre acestea se numara si altele exceptional de extraordinare, realizate cu mare imaginatie. Și chiar dacă nu găsești o modalitate de a le folosi în proiectele tale, poate te vor inspira să-ți creezi propriile soluții, chiar mai incredibile.
multiscroll.js O solutie interesanta pentru a atrage atentia vizitatorului - defilarea paginii se face sub forma a doua panouri, dintre care unul aluneca in sus si celalalt in jos, deschizand blocul urmator. De asemenea, funcționează excelent pe toate browserele, chiar și foarte învechite.
Un plugin foarte original care cred că le va plăcea vizitatorilor dacă aveți o mulțime de material text lung.
Este una dintre cele mai populare biblioteci JavaScript. Și acest lucru nu este surprinzător pentru cei care îl folosesc. Vă permite să simplificați, să accelerați și, cel mai surprinzător, să îmbunătățiți dezvoltarea scripturilor JavaScript.
Avantaje:
- Foarte lucru convenabil cu elemente, bazate pe selectori CSS.
- Compatibilitate excelentă între browsere. Mulți programatori nu se gândesc la compatibilitatea între browsere, totuși, acest lucru este necesar, deoarece același cod browsere diferite pot fi procesate diferit. ține cont de toate aceste nuanțe și nu mai trebuie să te gândești la asta.
- Capabilitati excelente de animatie. Animația decorează pagina și o face mai plăcută de utilizat. Este pur și simplu imposibil să faci animația mai ușoară decât ceea ce este implementat în .
- Un număr mare de plugin-uri gata făcute. Poate dura câteva zile pentru a face același glisor de imagine în JavaScript. Și puteți instala și configura un plugin gata făcut în câteva minute.
Pe baza acestui lucru, toți cei care dezvoltă scripturi în JavaScript ar trebui să știe. Și scopul acestei categorii este de a vă învăța cum să utilizați și, de asemenea, de a arăta exemple de utilizare, de exemplu, din propria mea practică.
După ce citiți articole despre jQuery, veți învăța:1) Cum se instalează.
2) Care este funcția $() în .
3) Cum se selectează elemente în .
4) Cum să lucrați cu eșantionarea pe .
5) Cum să adăugați și să eliminați elemente în .
6) Cum se procesează evenimentele pe .
7) Cum se realizează animația pe .
8) Cum să măriți imaginile pe .
9) Cum să faci un buton neted „înapoi în sus” pe .
10) Cum să încărcați dinamic fișiere pe server.
11) Cum se face Aspect adaptiv pe .
12) Cum să trimiteți cereri asincrone către
13) Cum să trimiteți cereri Ajax folosind metodele $.post() și $.get().
14) Cum se face un buton radio sub forma unui glisor pe .
15) Cum se instalează glisorul slick.
16) Cum să faci o arhivă folosind un plugin pentru .
17) Cum să faci un tur al site-ului pe .
18) Cum să faci file frumoase folosind JQuery.
19) Cum să creați subtitrări pe un site web folosind un plugin pentru .
20) Cum să creați o bară de progres frumoasă folosind un plugin pentru .
21) Cum se face o lacăt folosind un șablon pe .
22) Cum să adăugați difuzoare la un site web cu biblioteca dynamo.js.
23) Cum să faci un videoclip în fundal folosind .
24) Cum se confirmă trimiterea e-mailului către .
25) Cum să faci un slider frumos și eficient folosind JQuery.
26) Cum să faci o listă derulantă frumoasă pe .
27) Cum să faci o fereastră pop-up frumoasă în JQuery folosind WebUI-Popover.
28) Cum să faci notificări frumoase în JQuery folosind pluginul Noty.
29) Cum să faci un meniu derulant frumos cu un efect interesant folosind CSS și .
30) Cum se face fundalul sub formă de particule pe.
31) Cum să faci o comparație interactivă a două fotografii folosind JQuery.
32) Cum să faci un glisor circular în JQuery.
33) Cum să faci nori folosind JQuery.
34) Cum se afișează timpul scurs de la publicarea unei postări pe .
35) Cum să te retragi Simboluri speciale pe JQuery.
36) Cum să faci un numărător invers în JQuery.
37) Cum să faci un meniu personalizat folosind JQuery.
38) Cum se face animație la încărcarea unei pagini pe .
40) Cum să faci un meniu glisant folosind JQuery.
41) JQuery LightGallery - plugin pentru crearea de galerii.
42) Cum să împachetați un element într-un aspect de browser sau dispozitiv pe .
43) Cum se face frumoasa galerie cu sortarea în JQuery.
44) Cum să faci un obiect 3D interactiv folosind JQuery.
45) Cum să faci o fereastră pop-up folosind JQuery.
46) Cum să faci un efect de paralaxă de defilare.
47) Cum să faci un meniu de hamburger folosind CSS și JS. Partea 1.
48) Cum să faci un meniu de hamburger folosind CSS și JS. Partea 2.
49) Cum să faci o căutare de clic pop-up.
50) Cum se validează un formular folosind jQuery.
51) Cum să faci o mască de intrare a telefonului folosind jQuery.
52) Cum să lucrați cu biblioteca jQuery.
53) Cum să lucrați cu biblioteca jQuery UI.
54) Cum să utilizați jQuery UI Slider.
55) Cum să utilizați widgetul jQuery UI Datapicker.
56) Despre pluginul pentru file EasyTabs.
57) Cum să personalizați glisorul BxSlider.
58) Cum să puneți o numărătoare inversă pe un site web.
59) Cum se face un formular AJAX fără a reîncărca pagina.
60) Cum să creați efectul textului tipărit pe un site web.
61) Folosind un exemplu real despre animația unui vector SVG.
62) Filtre în jQuery.
63) Cum să obțineți un selector în jQuery.
64) Cum să manipulați atributele în jQuery.
65) Cum funcționează evenimentele mouse-ului jQuery.
66) Cum funcționează efectele jQuery.
67) Cum se face (partea 1).
68) Cum să faci un pop-up fereastra pop-up pe jQuery (partea 2).
69) Cum se filtrează după primele litere folosind jQuery.
70) Cum să animați butonul de meniu hamburger.
71) Cum să faci un meniu de hamburger receptiv.
72) Cum să faci primul aspect mobil.
73) Cum să faci o ancoră netedă folosind jQuery.
74) Cum să derulați pagina în sus.
75) Cum să faci un widget de acordeon de bibliotecă.
Humane.js
Un script Jquery bun care vă permite să afișați alerte pe pagină sub formă de ferestre pop-up. Acceptă dispozitive mobile, este ușor, bine documentat și, cel mai important, vă anunță discret, fără a interfera cu experiența dvs. de vizionare.
Impress.js
Scriptul vă permite să creați prezentări excelente pe site. Gamă largă de posibilități setări, suport pentru controlul tastaturii. Recomand să vizionați demo pentru a fi mai clar despre ce vorbim.
PDF.js
Un scenariu foarte interesant. Permite, folosind HTML5, să genereze document PDF din continutul paginii. Acum, pentru a descărca un articol în PDF, nu mai trebuie să utilizați servicii terțe; totul se poate face, așa cum se spune, „fără a părăsi checkout”
jQuery Transit
Un script JQuery foarte sofisticat care poate face aproape totul cu obiecte. Strânge, se mișcă, se întinde, se răsucește în orice fel - o mulțime de opțiuni de utilizare. Folosește mecanismul de transformare CSS3 și cântărește foarte puțin - doar 2 kilobytes în formă comprimată.
ResponsiveSlides.js
Vești bune pentru cei care își optimizează site-ul pentru mobil folosind @media. Acest mic glisor funcționează cu toate browserele începând de la IE6, dispozitive mobile pe toate sistemele de operare moderne și vă permite să scalați imaginile pentru a se potrivi cu rezoluția ecranului dispozitivului. Un must-have pentru toți dezvoltatorii de telefonie mobilă
Response.js
Instrument de script pentru crearea de site-uri web compatibile cu dispozitivele mobile. Suporta HTML5, are o grămadă de setări pentru lucru confortabil dezvoltator.
Slabtext
Un scenariu neobișnuit care vă permite să creați titluri mari care sunt acum la modă. Principiul de funcționare este următorul: scenariul ia o linie, numără caracterele, o împarte la lungimea liniei și calculează inteligent de câte caractere sunt necesare pe fiecare linie, ținând cont de împărțirea în cuvinte. Apoi adaugă puțină magie și... e mai bine să urmărești demo, pentru că nu am suficiente cuvinte să explic cum funcționează.
Scrollrama.js
Un script interesant care vă permite să implementați diverse efecte de defilare pe pagină. Apropo, aceste efecte de defilare câștigă popularitate, le observ pe multe site-uri.
Textualiser.js
Vă permite să aplicați diferite animații literalmente fiecărei litere de pe pagină. Foarte personalizabil, compatibilitate bună între browsere, plugin ușor și suficient de frumos pentru a adăuga puțină dezordine „creativă” paginii dvs.
Lipicios
Un script bun care vă permite să faceți întotdeauna vizibil orice element de pe pagină, de exemplu, când derulați în jos, Meniul de sus va rămâne mereu pe loc. Puteți face același lucru cu o bară laterală sau orice alt element.
Pentru cei care se îndoiesc dacă să folosească sau nu scripturi JQuery sau dacă încetinesc prea mult încărcarea - nu vă faceți griji. Principalul lucru este să nu exagerați cu frumusețea și funcționalitatea, iar apoi totul va fi cu siguranță grozav!
Cu siguranță, ați auzit despre minunata bibliotecă Javascript numită jQuery. Ce este exact jQuery?
Cum să faci viața unui dezvoltator web mai ușoară? Unde sa încep? jQuery face scrierea Javascript mai distractivă și mai ușoară. Cu această bibliotecă, multe aspecte destul de complexe ale Javascript pot fi implementate cu ușurință în orice aplicație.
Lecția de astăzi vă va spune cum să începeți cu jQuery și cum să scrieți primul script.
Ce este jQuery?
jQuery este o bibliotecă Javascript foarte ușoară (unii o numesc cadru) care elimină durerea de cap din scrierea codului Javascript. Are o mulțime de caracteristici foarte puternice, cum ar fi urmărirea DOM, adăugarea de efecte și animații frumoase elementelor, tehnici și metode Ajax super simple. Pe pagina principală a site-ului jQuery, cea mai exactă descriere, după părerea mea:
jQuery este o bibliotecă rapidă și concisă care simplifică gestionarea evenimentelor, animația și interacțiunea Ajax pentru o dezvoltare web mai rapidă. jQuery este conceput pentru a schimba modul în care este scris JavaScript.
Care sunt beneficiile jQuery?
Să aruncăm o privire rapidă la câteva dintre avantajele și proprietățile acestui cadru:
Cantitatea de cod (necesară pentru ca scriptul să ruleze) este semnificativ redusă în comparație cu JavaScript, ceea ce înseamnă, la rândul său, mai puțin timp petrecut și un cod mai ușor de citit. Restul articolului va analiza câteva exemple.
Mult mai ușor de înțeles codul (spre deosebire de JavaScript). În lumea noastră, cu cât termini mai repede procesul de programare, cu atât mai mult timp poți dedica altor obiective.
Documentare foarte convenabilă și o comunitate activă, întotdeauna gata să ajute dacă este necesar.
Utilizarea Ajax devine mult mai ușoară. Aveți nevoie doar de 5 linii de cod (uneori mai puțin) pentru a crea o cerere simplă Ajax.
Un număr mare de plugin-uri cu care poți face aproape orice.
jQuery este distractiv :)
Cum să înceapă?
În primul rând, trebuie să vizitezi pagina principala Site-ul oficial jQuery și descărcați cea mai recentă versiune a acestui cadru. După descărcare, trebuie să încărcați acest fișier pe găzduirea dvs. și să scrieți un link către acest fișier în antetul documentului.
Alternativ, puteți folosi ajutorul marelui Google și puneți un link către serverul lor, unde se află întotdeauna cele mai recente versiuni ale oricăror cadre. Link-ul necesar poate fi găsit.
Este gata documentul?
Pentru a executa primul nostru script jQuery, trebuie să împachetăm întregul nostru script într-o funcție. Această funcție va fi executată când DOM-ul este complet gata (când „documentul este gata” - traducere literală din engleză). Rețineți că acesta este foarte asemănător cu evenimentul popular „onload”, dar nu este același lucru. Să ne uităm la un exemplu:
$(document).ready(function())( //Cod aici ));
Mai sus îi spunem jQuery să execute orice cod în interiorul funcției, cu DOM-ul complet gata.Acest lucru are avantajele sale, în ciuda faptului că s-ar putea să nu fie clar pentru mulți. În primul rând, folosind această tehnică, separăm complet Javascript de HTML. În al doilea rând, nu trebuie să așteptăm ca pagina să se încarce complet, DOM-ul este suficient pentru a se încărca.
Pentru codificatorii leneși sau pentru cei care numără fiecare caracter, puteți scurta și mai mult codul de mai sus:
$(funcție())( //Cod aici ));
Primul tău script jQuery
Știm deja cum să facem referință la bibliotecă. De asemenea, înțelegem puțin despre funcția document.ready. Acum este timpul să scrieți un scenariu simplu.
Să o facem cât se poate de simplă. Pentru acest exemplu, hai sa facem o pagina cu text si un citat la final. Dorim să arătăm cotația doar dacă utilizatorul dă clic pe buton. Aruncă o privire mai jos la codul necesar pentru aceasta:
$(document).gata(funcție())(
var myQuote = $("#my_quote");
myQuote.hide();
$(".button").click(funcție())(
myQuote.show(500);
});
});
Să aruncăm o privire mai atentă la întregul cod.
După cum am menționat mai sus, punem tot codul de executat în funcția $document.ready().
Atribuim id-ul citatului nostru (my_quote) variabilei myQuote. Acum avem acces la citatul cu id my_quote.
Asta e tot. Când apăsați butonul timp de 0,5 secunde, va fi afișat un citat. Foarte ușor, nu-i așa?
Va urma....
Vă mulțumim pentru atenție! Toate cele bune!