Jquery skripte. Svježe JQuery skripte za programere. Što je jQuery

Dobra Jquery skripta koja vam omogućuje prikaz upozorenja na stranici u obliku skočnih prozora. Podržava mobilne uređaje, lagan je, dobro dokumentiran i, što je najvažnije, obavještava vas nenametljivo, bez ometanja vašeg iskustva gledanja.

Skripta vam omogućuje stvaranje izvrsnih prezentacija na web mjestu. Širok raspon mogućnosti postavke, podrška za upravljanje tipkovnicom. Preporučam pogledati demo kako bi bilo jasnije o čemu govorimo.

Jako zanimljiv scenarij. Omogućuje generiranje pomoću HTML5 PDF dokument od sadržaja stranice. Sada, da biste preuzeli članak u PDF-u, više ne morate koristiti usluge trećih strana, sve se može učiniti, kako kažu, "bez napuštanja blagajne"

Vrlo sofisticirana JQuery skripta koja može učiniti gotovo sve s objektima. Stišće, pomiče, rasteže, uvija na bilo koji način - puno mogućnosti za korištenje. Koristi CSS3 mehanizam transformacije i teži vrlo malo - samo 2 kilobajta u komprimiranom obliku.

Dobre vijesti za one koji optimiziraju svoje stranice za mobilne uređaje pomoću @media. Ovaj mali klizač radi sa svim preglednicima počevši od IE6, Mobilni uredaji na svim modernim operativnim sustavima i omogućuje vam skaliranje slika kako bi odgovarale razlučivosti zaslona uređaja. Obavezna oprema za sve mobilne programere

Alat za skripte za izradu web stranica prilagođenih mobilnim uređajima. Podržava HTML5, ima hrpu postavki za ugodan rad programer.

Neobična skripta koja vam omogućuje stvaranje velikih naslova koji su sada moderni. Princip rada je sljedeći: skripta uzme red, prebroji znakove, podijeli ga na dužinu retka i pametno izračuna koliko je znakova potrebno u svakom retku, vodeći računa o podjeli na riječi. Zatim dodaje malo magije i... bolje je pogledati demo, jer nemam dovoljno riječi da objasnim kako radi

Zanimljiva skripta koja vam omogućuje implementaciju različitih efekata pomicanja na stranici. Usput, ovi efekti pomicanja dobivaju na popularnosti, primjećujem ih na mnogim stranicama.

Omogućuje vam primjenu raznih animacija na doslovno svako slovo na stranici. Vrlo prilagodljiv, dobra kompatibilnost s više preglednika, lagan i dovoljno lijep dodatak za dodavanje malo "kreativnog" nereda vašoj stranici

Dobra skripta koja vam omogućuje da bilo koji element na stranici učinite uvijek vidljivim, na primjer, kada se pomičete prema dolje, Glavni izbornik uvijek će ostati na mjestu. Isto možete učiniti s bočnom trakom ili bilo kojim drugim elementom.

Za one koji se dvoume da li da ga koriste ili ne JQuery skripte, usporavaju li previše učitavanje - ne brinite. Glavna stvar je ne pretjerati s ljepotom i funkcionalnošću, a onda će sve sigurno biti sjajno!

Sigurno ste čuli za prekrasnu Javascript biblioteku zvanu jQuery. Što je zapravo jQuery?

Kako olakšati život web developeru? Gdje početi? jQuery čini pisanje Javascripta zabavnim i lakšim. Uz ovu biblioteku, mnogi prilično složeni aspekti Javascripta mogu se lako implementirati u bilo koju aplikaciju.

Današnja lekcija će vam reći kako započeti s jQueryjem i kako napisati svoju prvu skriptu.

Što je jQuery?

jQuery je vrlo lagana Javascript biblioteka (neki je nazivaju okvirom) koja uklanja glavobolju pisanja Javascript koda. Ima puno vrlo moćnih značajki, kao što je DOM praćenje, dodavanje prekrasnih efekata i animacija elementima, super jednostavne Ajax tehnike i metode. Na glavnoj stranici jQuery stranice, najprecizniji opis, po mom mišljenju:

jQuery je brza i koncizna biblioteka koja pojednostavljuje rukovanje događajima, animaciju i Ajax interakciju za brži web razvoj. jQuery je dizajniran da promijeni način na koji je JavaScript napisan.

Koje su prednosti jQueryja?

Pogledajmo na brzinu neke od prednosti i svojstava ovog okvira:

Količina koda (potrebnog za pokretanje skripte) značajno je smanjena u usporedbi s JavaScriptom, što zauzvrat znači manje utrošenog vremena i čitljiviji kod. U ostatku članka razmotrit ćemo neke primjere.

Mnogo lakše razumjeti kôd (za razliku od JavaScripta). U našem svijetu, što prije završite proces programiranja, više vremena možete posvetiti drugim ciljevima.

Vrlo zgodna dokumentacija i aktivna zajednica, uvijek spremna pomoći ako je potrebno.

Korištenje Ajaxa postaje puno lakše. Potrebno vam je samo 5 redaka koda (ponekad i manje) za izradu jednostavnog Ajax zahtjeva.

Ogroman broj dodataka s kojima možete učiniti gotovo sve.

jQuery je zabavan :)

Kako započeti?

Prije svega, morate posjetiti početna stranica službenu web stranicu jQuery i preuzmite najnoviju verziju ovog okvira. Nakon preuzimanja ovu datoteku trebate uploadati na svoj hosting, te u zaglavlju dokumenta napisati poveznicu na ovu datoteku.

Alternativno, možete koristiti pomoć velikog Googlea i staviti poveznicu na njihov server, gdje se uvijek nalaze najnovije verzije bilo kojeg frameworka. Potrebnu poveznicu možete pronaći.

Je li dokument spreman?

Da bismo izvršili našu prvu jQuery skriptu, moramo umotati cijelu našu skriptu u funkciju. Ova funkcija će se izvršiti kada je DOM potpuno spreman (kada je “dokument spreman” - doslovni prijevod s engleskog). Imajte na umu da je ovo vrlo slično popularnom događaju 'onload', ali nije isto. Pogledajmo primjer:

$(dokument).ready(function())( //Kod ovdje ));

Gore kažemo jQueryju da izvrši bilo koji kod unutar funkcije, s potpuno spremnim DOM-om. To ima svojih prednosti, unatoč činjenici da mnogima možda nije jasno. Prije svega, ovom tehnikom potpuno odvajamo Javascript od HTML-a. Drugo, ne moramo čekati da se stranica potpuno učita, DOM je dovoljan za učitavanje.

Za lijene programere ili za one koji broje svaki znak, možete dodatno skratiti gornji kod:

$(funkcija())( //Kod ovdje ));

Vaša prva jQuery skripta

Već znamo kako referencirati knjižnicu. Također razumijemo nešto o funkciji document.ready. Sada je vrijeme da napišete jednostavan scenarij.

Učinimo to što je moguće jednostavnijim. Za ovaj primjer, napravimo stranicu s tekstom i citatom na kraju. Želimo prikazati ponudu samo ako korisnik klikne na gumb. U nastavku pogledajte kôd potreban za ovo:

$(dokument).spreman(funkcija())(
var myQuote = $("#my_quote");
mojCitat.sakrij();
$(".button").click(function())(
mojCitat.show(500);
});
});

Pogledajmo pobliže cijeli kod.

Kao što je gore spomenuto, sav kôd koji treba izvršiti stavljamo unutar funkcije $document.ready().

Dodjeljujemo ID naše ponude (my_quote) varijabli myQuote. Sada imamo pristup citatu s id-om my_quote.

To je sve. Kada pritisnete tipku 0,5 sekundi, prikazat će se citat. Vrlo jednostavno, zar ne?

Nastavit će se....

Hvala na pozornosti! Sve najbolje!

To je jedna od najpopularnijih JavaScript biblioteka. I to nije iznenađujuće za one koji ga koriste. Omogućuje vam da pojednostavite, ubrzate i, što je najiznenađujuće, poboljšate razvoj JavaScript skripti.

Prednosti:

• Vrlo zgodan rad s elementima, na temelju CSS selektora.
• Izvrsna kompatibilnost s više preglednika. Mnogi programeri ne razmišljaju o kompatibilnosti s više preglednika, međutim, to je potrebno jer je isti kod različitim preglednicima mogu se drugačije obrađivati. uzima u obzir sve ove nijanse i više ne morate razmišljati o tome.
• Izvrsne mogućnosti animacije. Animacija ukrašava stranicu i čini je ugodnijom za korištenje. Jednostavno je nemoguće napraviti animaciju lakšom od onoga što je implementirano u .
• Veliki broj gotovih dodataka. Za izradu istog klizača slike u JavaScriptu može biti potrebno nekoliko dana. I možete instalirati i konfigurirati gotov dodatak u nekoliko minuta.

Na temelju ovoga, svatko tko razvija skripte u JavaScriptu trebao bi znati. A svrha ove kategorije je naučiti vas kako koristiti, a također pokazati primjere korištenja, na primjer, iz moje vlastite prakse.

1) Kako instalirati.

2) Što je funkcija $() u .

3) Kako odabrati elemente u .

4) Kako raditi s uzorkovanjem na .

5) Kako dodati i ukloniti elemente u .

6) Kako obraditi događaje na .

7) Kako se radi animacija na .

8) Kako zumirati slike na .

9) Kako napraviti gladak gumb "povratak na vrh" na .

10) Kako dinamički učitavati datoteke na poslužitelj.

11) Kako to učiniti Adaptivni izgled na .

12) Kako poslati asinkrone zahtjeve na

13) Kako poslati Ajax zahtjeve pomoću metoda $.post() i $.get().

14) Kako napraviti radio gumb u obliku klizača na .

15) Kako instalirati glatki klizač.

16) Kako napraviti arhivu pomoću dodatka za .

17) Kako razgledati stranicu na .

18) Kako napraviti lijepe kartice koristeći JQuery.

19) Kako stvoriti opise na web stranici pomoću dodatka za .

20) Kako stvoriti lijepu traku napretka pomoću dodatka za .

21) Kako napraviti bravu pomoću predloška na .

22) Kako dodati zvučnike na web stranicu s bibliotekom dynamo.js.

23) Kako napraviti video u pozadini pomoću .

24) Kako potvrditi slanje pošte na .

25) Kako napraviti lijep i učinkovit slajder koristeći JQuery.

26) Kako napraviti prekrasan padajući popis na .

27) Kako napraviti prekrasan skočni prozor u JQueryju koristeći WebUI-Popover.

28) Kako napraviti lijepe obavijesti u JQueryju koristeći dodatak Noty.

29) Kako napraviti prekrasan padajući izbornik sa zanimljivim efektom koristeći CSS i .

30) Kako učiniti pozadina u obliku čestica na.

31) Kako napraviti interaktivnu usporedbu dvije fotografije koristeći JQuery.

32) Kako napraviti kružni klizač u JQueryju.

33) Kako napraviti oblake koristeći JQuery.

34) Kako prikazati vrijeme proteklo od objave posta na .

35) Kako se povući Posebni simboli na JQueryju.

36) Kako napraviti brojač odbrojavanja u JQueryju.

37) Kako napraviti prilagođeni izbornik koristeći JQuery.

38) Kako napraviti animaciju prilikom učitavanja stranice na .

40) Kako napraviti klizni izbornik koristeći JQuery.

41) JQuery LightGallery - dodatak za izradu galerija.

42) Kako omotati element u pregledniku ili izgledu uređaja na .

43) Kako učiniti prekrasna galerija s sortiranjem u JQueryju.

44) Kako napraviti interaktivni 3D objekt koristeći JQuery.

45) Kako napraviti popup prozor koristeći JQuery.

46) Kako napraviti efekt paralakse pomicanja.

47) Kako napraviti hamburger meni koristeći CSS i JS. 1. dio.

48) Kako napraviti hamburger jelovnik koristeći CSS i JS. 2. dio.

49) Kako napraviti pop-up klik pretraživanje.

50) Kako potvrditi obrazac koristeći jQuery.

51) Kako napraviti telefonsku masku za unos koristeći jQuery.

52) Kako raditi s jQuery bibliotekom.

53) Kako raditi s jQuery UI bibliotekom.

54) Kako koristiti jQuery UI Slider.

55) Kako koristiti widget jQuery UI Datapicker.

56) O dodatku za kartice EasyTabs.

57) Kako prilagoditi klizač BxSlider.

58) Kako postaviti mjerač vremena na web mjesto.

59) Kako napraviti AJAX obrazac bez ponovnog učitavanja stranice.

60) Kako stvoriti efekt ispisanog teksta na web stranici.

61) Korištenje stvarnog primjera o animaciji SVG vektora.

62) Filtri u jQueryju.

63) Kako dobiti selektor u jQueryju.

64) Kako manipulirati atributima u jQueryju.

65) Kako rade jQuery događaji miša.

66) Kako jQuery efekti rade.

67) Kako učiniti (1. dio).

68) Kako napraviti skočni prozor skočni prozor na jQuery (2. dio).

69) Kako filtrirati prema prvim slovima koristeći jQuery.

70) Kako animirati gumb izbornika hamburgera.

71) Kako napraviti odgovarajući jelovnik za hamburgere.

72) Kako napraviti prvi mobilni izgled.

73) Kako napraviti glatko sidro koristeći jQuery.

74) Kako pomicati stranicu prema gore.

75) Kako napraviti widget harmonike knjižnice.

S pojavom WEB-a 2.0 razvili su se i okviri javascripta koji webmasterima omogućuju puno bržu i lakšu izradu dinamičkih elemenata web stranica. Jedan takav okvir je jQuery, koji je stekao ogromnu popularnost zbog svoje jednostavnosti i nevjerojatno male težine. Dakle, predstavljam vam 10 najkorisnijih jQuery skripti za poboljšanje sučelja vaše web stranice.

Debela kutija
Opis: Potrebno je skrenuti pozornost korisnika na neki tekst, sliku ili web obrazac kroz modalni prozor.
Kada i gdje koristiti: Kada korisniku trebate prikazati više informacija, prikažite veću sliku, postavite nekoliko pitanja putem web obrasca ili prikažite obrazac za prijavu, ali ne želite da korisnik napusti stranicu.
Skripta, primjer, dokumentacija
WordPress dodatak

Tabulacije
Opis: Omogućuje prikaz sadržaja stranice u karticama.
Kada i gdje koristiti: Kada želite osloboditi prostor na zaslonu pružanjem brz pristup Do skrivene informacije. Često se koristi u widgetima za razne premium WordPress teme.
Skripta, primjer, dokumentacija
WordPress dodatak

Coda klizač
Opis: stvara klizač, kao na snimci zaslona s web stranice Coda.
Kada i gdje koristiti: Kao i kod Code, ova skripta je izvrsna za predstavljanje proizvoda ili usluga grupiranih u odjeljke. Korisnici dobivaju priliku brzi pregled, kao i intuitivna navigacija.
Skripta, primjer, dokumentacija
Tema za WordPress

Galleria
Opis: Galleria je javascript galerija napisana u jQueryju. Učitava slike jednu po jednu i prikazuje njihove minijature.
Kada i gdje se koristi: za prikaz fotografija događaja ili proizvoda, na primjer.
Skripta, primjer, dokumentacija

jSavjet
Opis: Opisi alata implementirani u jQuery.
Kada i gdje se koristi: Kada trebate dati više informacija o objektu u kontekstu članka ili implementirati savjete korisniku u raznim web formama.
Skripta, primjer, dokumentacija
WordPress dodatak

Promjena stilova
Opis: Omogućuje posjetiteljima vaše web stranice da samostalno mijenjaju stilove dizajna "jednim klikom".
Kada i gdje koristiti: Kada želite dopustiti korisniku da odabere različite veličine fonta, prikažite informacije formatirane za mobitel ili za ispis, neka prilagodi boje. Prebacivač stilova stvarno može pomoći u poboljšanju upotrebljivosti vaše web stranice.
Skripta, primjer, dokumentacija
WordPress dodatak

Izbornik jQuery Accordion
Opis: Omogućuje vam stvaranje dinamičkih izbornika.
Skripta, primjer, dokumentacija
WordPress dodatak

Galerija klizača
Opis: predstavlja proizvode/slike u galeriji koja se može pomicati.
Kada i gdje koristiti: Kada želite smjestiti sve elemente u bočnu traku, ali nema dovoljno prostora za sve opcije.
Skripta, primjer, dokumentacija

Provjera valjanosti obrasca
Opis: Provjerite valjanost web obrazaca pomoću provjere valjanosti obrazaca kako biste izbjegli netočno ispunjena polja.
Kada i gdje se koristi: U većini oblika. Ovo pomaže korisnicima da razumiju točno gdje su netočno ispunili polja isticanjem njihovih pogrešaka.
Skripta, primjer, dokumentacija

jRžati
Opis: Prikazuje poruke u pregledniku baš kao Growl na MacOSX-u
Kada i gdje koristiti: Ako obavijestite korisnika o radnji, ali ne želite da napusti trenutnu stranicu/osvježi je. Ovo je izvrstan način za potvrdu radnji koje je izvršio korisnik, kao što je registracija. Također možete koristiti jGrowl u raznim trgovinama itd. za potvrdu dodavanja artikla u košaricu ili potvrdu transakcije.
Skripta, primjer, dokumentacija