Primjer jQuery. Jednostavni primjeri jQuery skripti

jQuery je javascript knjižnica koja web-programerima omogućuje dodavanje dodatnih značajki na svoje web-lokacije. To je otvoreni izvor i besplatno je pod MIT licencom. U posljednjih nekoliko godina, jQuery je postao najtraženija javascript knjižnica koja se koristi u web razvoju.

Primjer jQuery

Za implementaciju jQuery, web developer treba uputiti na javascript datoteku u HTML-u web stranice. Neke web-lokacije imaju vlastitu lokalnu kopiju, dok druge jednostavno upućuju na knjižnicu koju hostira Google ili poslužitelj. Na primjer, web stranica može učitati jQuery knjižnicu koristeći sljedeći redak u HTML dijelu (jQuery i primjer kolačića):


Primjeri jQuery i Ajax

Nakon preuzimanja knjižnice, web stranica može pozvati bilo koju funkciju koju biblioteka podržava. Uobičajeni primjeri uključuju promjene teksta, obradu podataka iz obrasca, premještanje stavki na stranici i izvođenje animacija. jQuery također može raditi s Ajax kodom i skriptnim jezicima, kao što su PHP i ASP, za pristup podacima iz baze podataka. Budući da se jQuery izvršava na strani klijenta (a ne na web poslužitelju), može ažurirati informacije na web stranici u realnom vremenu bez ponovnog učitavanja stranice. Uobičajeni primjer je automatsko dovršavanje, u kojem obrazac za pretraživanje automatski prikazuje opće podatke prilikom unosa upita.

Knjižnične pogodnosti

Osim besplatne licence, još jedan glavni razlog zašto je jQuery stekao takvu popularnost jeKompatibilnost među preglednicima. Budući da svaki preglednik prikazuje HTML, CSS i javascript na različite načine, web developeru može biti teško napraviti web lokaciju u svim preglednicima. Umjesto pisanja korisnički definiranih značajki za svaki preglednik, web developer može koristiti jednu jQuery značajku koja će raditi u Chromeu, Safariju, Firefoxu i Internet Exploreru. Podrška za više preglednika prisilila je mnoge programere da se prebace s standardnog javascripta na jQuery, jer to uvelike pojednostavljuje proces kodiranja.


Opis

JQuery sintaksa se koristi za pojednostavljenje navigacije dokumenata, odabir DOM elemenata, stvaranje animacija, obradu događaja i razvoj Ajax aplikacija. jQuery također nudi programerima mogućnost stvaranja dodataka preko javascript knjižnice. To omogućuje programerima stvaranje apstraktnih dizajna za interakciju na niskoj razini i animaciju, napredne efekte i tematske widgete visoke razine. Modularni pristup knjižnici jQuery omogućuje stvaranje snažnih dinamičkih web stranica i web aplikacija. Skup osnovnih funkcija:
  • izbor DOM elemenata;
  • Obilaznica i manipulacija pomoću mehanizma izbora;
  • novi stil programiranja;
  • Algoritmi spajanja i DOM podatkovne strukture.
  • Stil je utjecao na arhitekturu drugih javascript okvira, kao što su YUI v3 i Dojo, a također je potaknuo stvaranje standardnog API selektora.
    Microsoft i Nokia pružaju jQuery na svojim platformama. Microsoft ga uključuje u Visual Studio za korištenje u ASP.NET AJAX i ASP.NET MVC, a Nokia je integrira u platformu čarobnjaka za web razvoj.

    Pregled

    jQuery je knjižnica elemenata s dokumentom objektnog modela (DOM). DOM je prikaz strukture stabla svih elemenata web stranice. jQuery pojednostavljuje sintaksu za pretraživanje, odabir i upravljanje tim DOM-ovima. Knjižnica se može koristiti za pretraživanje stavke u dokumentu s određenim svojstvom (na primjer, sve stavke s oznakom h1), promjenu jednog ili više atributa (boja, vidljivost) ili prihvaćanje odgovora na događaj (primjerice, klik mišem).

    Razvoj

    Knjižnica koristi tako popularne značajke javascripta kao izbljeđivanje i izbljeđivanje kada skriva elemente, animacije i rad s jQuery CSS elementima. jQuery također pruža paradigmu za rukovanje događajima koji nadilaze opseg odabira i manipulacije DOM elemenata. Dodjeljivanje događaja i definiranje funkcije povratnog poziva obavlja se u jednom koraku na jednom mjestu u kodu. Načela razvoja jQuery (primjeri):
  • JavaScript i html podjela knjižnica pruža jednostavnu sintaksu za dodavanje rukovaoca događaja u DOM pomoću javascripta, umjesto dodavanja atributa HTML događaja za pozivanje JS funkcija. Stoga potiče programere na potpuno odvajanje javascript koda od HTML oznake.
  • Kratkoća i jasnoća - pogoduje konciznosti i jasnoći s alatima kao što su lanci i skraćena imena funkcija.
  • Uklanjanje nekompatibilnosti između različitih preglednika - javascript-motori za različite preglednike malo se razlikuju, tako da JS kod koji radi za jedan preglednik možda neće raditi za drugi preglednik. Poput drugih JavaScript alata, jQuery obrađuje sve oveodstupanja između preglednika i pruža dosljedno sučelje koje radi u različitim preglednicima.
  • Ekstenzibilnost - Novi događaji, elementi i metode mogu se jednostavno dodati, a zatim ponovno koristiti kao dodatak.
  • Povijest

    jQuery je izvorno objavljen u siječnju 2006. godine u BarCampu u New Yorku od strane Johna Reshiga i bio je pod utjecajem rane cssQuery knjižnice Deana Edwardsa. Trenutno ga podržava tim programera Timmyja Willisona (s jQuery selektorskim mehanizmom, Sizzle, koji vodi Richard Gibson).

    Značajke

    Knjižnica uključuje sljedeće funkcije:
  • izbor DOM elemenata pomoću višerazorskog mehanizma selektora s otvorenim izvornim Sizzle;
  • Odabir CSS selektora DOM manipulacijskog projekta koji koristi imena i atribute elemenata kao što je id, klasa kao kriterij za odabir DOM čvorova;
  • mjera;
  • animacijski učinci;
  • ajax;
  • objekti su odgođeni i obećavaju kontrolu asinhrone obrade;
  • raščlanjivanje JSON;
  • Proširivanje putem dodataka;
  • komunalne usluge, kao što je otkrivanje funkcija;
  • metode kompatibilnosti koje su izvorno dostupne u modernim preglednicima, ali zahtijevaju starije verzije, kao što su inArray () i svaki (), multi-preglednik (ne smije se brkati s križnim preglednikom).
  • Upotreba

    jQuery knjižnica je jedan javascript datoteka koja sadrži sve njegove uobičajene DOM funkcije, događaje, efekte i Ajax. Može se uključiti u web-stranicu tako da se poveže s lokalnom kopijom ili jednom od brojnih primjeraka dostupnih javnostiposlužiteljima. Knjižnica ima mrežu za isporuku sadržaja (CDN) koju hostira max-cdn. Primjer JQuery PHP:

    Stilovi

    jQuery ima dva načina korištenja:
  • Zbog funkcije $, koja je tvornička metoda za jQuery objekt. Ove funkcije, često nazvane naredbama, su cijeli brojevi, budući da svi vraćaju jQuery objekte.
  • ​​
  • Kroz $ - prefiksne funkcije. To su servisne funkcije koje ne utječu izravno na objekt.
  • Pristup JQuery i upravljanje višestrukim DOM čvorovima obično započinje pozivom funkcije $ pomoću CSS selektorskog retka. Ovo vraća jQuery objekt, koji se odnosi na sve relevantne elemente na HTML stranici.

    Modus bez konflikta

    jQuery uključuje način rada .noConflict () koji oslobađa kontrolu funkcije $. Ovo je korisno ako se jQuery koristi s drugim knjižnicama koje također koriste $ kao identifikator. U nekonfliktnom načinu, programeri mogu koristiti knjižnice kao zamjenu za 2 USD bez gubitka funkcionalnosti.

    Napredna funkcionalnost

    Funkcije povratnog poziva za upravljanje događajima na stavkama koje još nisu učitane mogu se prijaviti u .ready () kao anonimne funkcije. Ti će rukovatelji biti pozvani samo kada se događaj pokrene. Na primjer, sljedeći kôd dodaje rukovatelj za klikanje na img: $ (function () {$ ('img'). })}). Neke funkcije vraćaju određene vrijednosti (na primjer, $ ('# input-user-email'). Val ()). U tim slučajevima, lanac ne radi jer se vrijednost ne odnosi na jQuery objekt.

    Stvaranje novihElementi

    Osim pristupa DOM čvorova preko hijerarhije objekata, također je moguće stvoriti nove stavke ako je string prošao kao argument $ () izgleda kao HTML. Na primjer, odabir stavki je HTML kod osobnih iskaznica i dodaje element s vrijednošću od opcija i teksta VAG Volkswagen: $ ('# odaberite carmakes') .append ($ ('') .attr ({vrijednost: VAG}) .append (Volkswagen )).

    Komunalne usluge

    Funkcija jQuery $ ispred broja komunalnih funkcija koje utječu globalna svojstva i ponašanje. Slijedeći primjer koristi funkciju svaki (), koji se obavlja kroz iteracija polja: .each $ ([1,2,3], funkcija () {console.log (to + 1)}); Ovaj primjer nakon jQuery rekord 234 konzole.

    Ajax

    može obavljati cross-preglednik Ajax zahtjeve pomoću .ajax $ () jQuery, koja može poslužiti kao primjer srodnih metoda za izbrisane prijenosa i obrade podataka: .ajax $ ({tip: POST, url: " /process/submit.php 'podaci {ime: Ivan mjesto:' Boston '}}) obavljen (funkcija (poruka) {alert. (' podaci Spremljeno: „+ MSG).}) fail (funkcija (XMLHttpZahtjev, statusText, errorThrown) {alert ('ne mogu poslati svoga povidomlennya.Nn' + 'XML HTTP zahtjev:' + JSON.stringify (XMLHttpZahtjev) + 'nStatus tekst:' + statusText +”, nPogreška izbačen: „+ errorThrown)}); U ovom primjeru, naziv poslužitelja navedeno podataka = Ivan i mjesto = Boston za /process/submit.php. Kada se zahtjev završi, funkcija se zove upozoriti korisnika. Ako zahtjev nije uspio, to će upozoriti korisnika o stanju pogreške i zatražiti određenu pogrešku.

    Dodaci

    jQuery arhitektura omogućava programerima za stvaranje prilagođenog koda proširiti razne funkcije. Internet je dostupan na tisuće dodatnih modula koji pokrivaju čitav niz funkcija, kao što suAjax pomagači, web-usluge, dinamičke liste, XML i XSLT alati, povuci i ispusti, događaje, obradu kolačića i modalne prozore. Postoje alternativni dodaci za tražilice, kao što je jquer.in, koji koriste više specijaliziranih pristupa, kao što su popisivanje samo dodataka koji zadovoljavaju određene kriterije (na primjer, oni koji imaju zajedničko spremište koda). Razvojni centar Centru za učenje nudi jQuery za početnike, što može pomoći korisnicima da razumiju javascript i počnu razvijati dodatke.

    jQuery UI

    jQuery UI je kolekcija GUI widgeta, animiranih vizualnih efekata i tema implementiranih s jQuery CSS (javascript knjižnica), kaskadnim stilskim listovima i HTML-om. Prema JavaScriptu, Libscore, jQuery sučelje koristi se na više od 197.000 najboljih web stranica, što ga čini drugom najpopularnijom JS knjižnicom. Najpoznatiji su Pinterest, PayPal, IMDb, Huffington Post i Netflix.
    JQuery UI je besplatna i otvorena zaklada, licencirana od strane MIT-a. Prvi put je objavljen u rujnu 2007.

    jQuery Mobile

    jQuery Mobile je internetska infrastruktura za senzornu optimizaciju (poznata i kao mobilna infrastruktura). Glavni fokus razvoja je stvaranje infrastrukture kompatibilne sa širokim rasponom pametnih telefona i tablet računala, potrebnih za rastuće tržište gadget tehnologije. Kompatibilan s drugim platformama za mobilne aplikacije, kao što su PhoneGap, Worklight i mnoge druge.

    Povezane publikacije