→ jQuery-esimerkkejä aloittelijoille

jQuery on javascript-kirjasto, joka koostuu selainfunktioista - kääreistä DOM (Document Object Model) -elementtien manipulointiin. Sen pääperiaate on vaaditun mekanismin automaattinen soveltaminen selaimesta riippuen. Esimerkiksi dokumentin html-elementin saaminen tunnuksella tapahtuu eri tavalla eri selaimissa. Ennen jqueryä käytin tätä toimintoa:

Funktio getObj(objID)( if (document.getElementById) (palauta document.getElementById(objID);) else if (document.all) (palauta asiakirja.kaikki;) else if (document.layers) (palauta document.layers;) )

Voit suorittaa saman toiminnon jqueryssä seuraavasti:

$("#objID") tai jQuery("#objID")

$()-funktion kutsuminen vastaa jQuery() -funktiota, koska ensimmäinen on toisen alias. Jos et käytä muita kirjastoja, kuten jqueryä, voit käyttää nimiavaruutta turvallisesti $()-komennolla. Muussa tapauksessa on parempi käyttää objektin suoraa nimeä - jQuery. Lisäksi oletamme, että muita kirjastoja ei ole.

jQueryn käytön aloittaminen

Joten aloitetaan. Ensimmäinen askel on hankkia jquery-kirjaston uusin versio viralliselta projektin verkkosivustolta http://jquery.com/ tai ladata jquery täältä. Arkistossa ja virallisella verkkosivustolla on kaksi versiota: pakattu ja kehitetty. Sivustolla on parempi käyttää pakattua, ja jos haluat kokeilla, käytä toista. Ensinnäkin sisällytämme jquery-kirjaston sivun runkoon:

Tämän jälkeen javascriptin nimiavaruus määritellään siten, että $()-funktion kutsu on varattu jquerylle ja voit saada minkä tahansa html-dokumentin elementin objektiksi lausekkeella $("#objID") . Missä objID on objektin tunnus.

jQuery ja CSS

Katsotaanpa ensimmäisenä esimerkkinä, kuinka jquery ja CSS toimivat. On kaksi päätapaa käsitellä CSS:ää jqueryn avulla: muuttaa yhtä tai useampaa attribuuttia kerralla. Ne suoritetaan css()-funktion kautta. Teoriassa se näyttää tältä:

$("#objID").css("näyttö","block") $("#objID").css(( display:"block, margin:"10px", color:"#ffffff" ))

Esimerkki yhden CSS-attribuutin muuttamisesta

Esimerkki yhden ominaisuuden muuttamisesta oli menestys!

Lähdekoodi:

Esimerkki yhden ominaisuuden muuttamisesta oli menestys!

Esimerkki useiden CSS-attribuuttien muuttamisesta

Esimerkki useiden määritteiden muuttamisesta!

Lähdekoodi:

funktio demo_css())( $("#span2").css(( color:"#ffffff", padding:"5px", background:"#980000" )); ) Esimerkki useiden määritteiden muuttamisesta!

Tekstin ja html:n muuttaminen

Tekstin tai html-koodin muuttamiseksi on olemassa funktioita text() ja html() .

$("#objID").text("True la la") $("#objID").html("

Totta la la

Lisäksi, jos yrität lisätä HTML-koodia käyttämällä text()-funktiota, saat sen alkuperäisessä muodossaan. Text()-funktio välttää kaiken.

Teksti() esimerkki

Lähdekoodi:

funktio set_text())( $("#span3").text("Kiitos!"); )

Esimerkki html()

Lähdekoodi:

function set_html())( $("#span4").html("Kiitos! Tämä on paljon parempi."); )

Attribuuttien hallinta jQuerylla

Attr()-funktio manipuloi minkä tahansa elementin attribuutteja. Sen avulla voit lisätä tai muuttaa otsikkoa, href, arvoa, src ja niin edelleen.

Attr() esimerkki

Lähdekoodi:

funktio plus_ten())( var cur_value = $("#teksti").attr("arvo"); cur_value = parseInt(cur_value) + 10; $("#teksti").attr("arvo",cur_value); )

Tapahtumakäsittelijät jQueryssä

Täydellinen luettelo on saatavilla osoitteessa http://api.jquery.com/category/events/. Annan vain muutaman esimerkin. Yleisin onclick-tapahtumakäsittelijä. jQueryssä voit siepata sen click()-toiminnon kautta.

Click() Esimerkki

Lähdekoodi:

$("#butt").click(function())( alert("Päätitkö tarkistaa sen?"); ));

Keyup() esimerkki

Kirjoita jotain:

Annoit:

Lähdekoodi:

Kirjoita jotain:
Annoit: $("#teksti2").keyup(function())( if ($("#text2").val())( $("#text2_target").css((background:"#980000" ) ); ) else ( $("#text2_target").css((tausta:"#ffffff")); ) $("#text2_target").text($("#teksti2").val()); );

Esimerkki bind()

Klikkaa minua!

Lähdekoodi:

div#log( tausta:#1C93A5; leveys:300px; korkeus:100px; padding:10px; color:#fff; ) Klikkaa minua!
$(document).ready(function() ( $("#log").bind("napsauta", function(e) ( $("#coord").html("X-koordinaatti: "+ e.sivuX + " Y-koordinaatti: " + e.sivuY + "");

JQuery on loistava kirjasto. Se auttoi kiertämään kaikki IE6:n sudenkuopat täydellisesti. Menneinä aikoina selaimien välinen yhteensopivuus oli suuri ongelma kehittäjille. Jquery selvisi hyvin kaikista eroavaisuuksista asettelujen näyttämisessä eri selaimissa.

Nykyään selaimilla on erinomaiset yhtenäiset ratkaisut. Voimme käyttää mukavasti kaikkia ES5:n oikeuksia, ja käytössämme on myös HTML5 API, joka helpottaa huomattavasti DOM-elementtien käsittelyä. Kehittäjät ovat unohduksen partaalla ja siirtyvät pois jQuerysta joissakin projekteissa. Erityisesti mikropalveluiden ja ei-monimutkaisten ohjelmien tapauksessa.

Älä ymmärrä minua väärin – Jquery on edelleen upea kirjasto, ja tietysti 70 % ajasta joudut käyttämään sitä. Vaikka pienille sivuille, joilla on rajoitettu JS, voit käyttää VanillaJS:ää tai muuta kehystä. Nämä sopivat mobiilisovelluksiin.

No, tässä on 10 esimerkkiä toimivasta koodista, jotka voit tehdä ilman jqueryä.

Sivun latauksen päättymistapahtuman seuranta

Ensimmäinen asia, jonka teet käytettäessä jQuerya, on kääriä koodi $(document).ready()-menetelmään, jotta tiedät, milloin DOM on valmis manipulointia varten. Ilman Jqueryä voimme käyttää DOMContentLoaded-tapahtumaa. Tässä on esimerkki koodista:

// Kuuntele koko asiakirjan DOMContentLoaded-tapahtumaa anonyymin toiminnon avulla // Voit kääriä koodisi tämän funktion haaroihin // ja se suoritetaan, kun sivu ladataan. document.addEventListener("DOMContentLoaded", funktio () ( // Havaijin tervehdys, näytetään konsolissa console.log("Aloha"); ));

Elementtivalitsimet ilman Jqueryä

Eräänä päivänä meidän on valittava elementit id:n, luokan tai tunnisteiden avulla, ja jQuery on yksi parhaista. Joiden valitsimet ovat täysin identtisiä CSS-syntaksin kanssa. Nykyään selaimet ovat ottaneet käyttöön kaksi tärkeää sovellusliittymää - querySelectorin ja querySelectorAllin.

// Voit käyttää document.querySelectoria saadaksesi ensimmäisen ehtoja vastaavan elementin // kestää vain yhden argumentin - CSS-valitsimet. var lochNess = document.querySelector(.hirviöt"); console.log("Se on Skotlannista - " + lochNess.textContent); // voimme myös saada kokoelman käyttämällä document.querySelectorAll. // palauttaa luettelon kriteeriä vastaavista dom-elementeistä var scary = document.querySelectorAll(" .monsters") ; console.log("Piilota mestarit: "); for (var i = 0; i< scary.length; i++) { console.log(scary[i].innerHTML); }

• Nessy
• Iso jalka
• La chupacabra

Tapahtumakäsittelijöiden luominen ja poistaminen (menetelmät)

Tapahtumien kuunteleminen on olennainen osa verkkosovellusten rakentamista. Historiallisesti on ollut kaksi suurta leiriä - IE ja loput. Mutta nykyään käytämme vain addEventListeneria

Muutt btn = document.querySelectorAll("painike"), lista = document.querySelector("ul"); // Soita addEventListener haluttuun tapahtumaan. // alkaa seurata elementin napsautustapahtumaa. btn.addEventListener("click", function () ( // Kun painiketta napsautetaan, haluamme laukaista tapahtumaasteikon luetteloomme. // Tätä varten meidän on lisättävä tapahtuma luetteloomme // jotta kun hiiri vie hiiren elementin päälle, toiminto käynnistyy list .addEventListener("mouseover", suurenna )); // Peruuta zoomaustapahtuma käyttämällä removeEventListener-ohjelmaa. btn.addEventListener("napsauta", funktio () ( // Tapahtumien poistaminen ei toimi nimeämättömien funktioiden kanssa, käytä vain nimettyjä list.removeEventListener("mouseover", suurenna); )); // Luodaan funktio, joka skaalautuu. var enlarge = function () ( // Lisää luokka elementeille list.classList.add("zoomed"); // kun kohdistin poistuu luettelosta, poista luokka palataksesi normaaliin mittakaavaan list.addEventListener("mouseout ", funktio ( ) ( list.classList.remove("zoomattu") )); // Nyt haluamme korostaa nimet, kun niitä napsautetaan. // Kun elementissä käynnistyy napsautus, sen pitäisi muuttua vihreäksi // Tapahtuman delegoinnin ansiosta voimme yksinkertaisesti lisätä käsittelijän pääelementtiin // Tässä menetelmässä emme luo tapahtumaseuraajia jokaiselle

. list.addEventListener("napsautus", funktio (e) ( // korosta kohdeelementti vihreällä e.target.classList.add("vihreä"); ));

Ota zoomaus käyttöön Poista zoomaus käytöstä

Napsauta nimeä korostaaksesi sen

• Chewbacca
• Han Solo
• Luke
• Boba Fett

Vihreä ( väri: vihreä; ) .zoomed ( kursori: osoitin; fontin koko: 23px; )

addEventListener käytti kolmatta argumenttia, mutta tämä on valinnainen. Kuten näet, koodi näyttää melko samanlaiselta kuin jQuery.

Luokkien lisääminen ja poistaminen ilman jQueryä puhtaassa JS:ssä

Elementtiluokkien hallinta ilman jQueryä oli ennen vanhaan valtava ongelma. Mutta ei enää. Kiitos classList-ominaisuudesta. Ja jos sinun on muutettava määritteitä, voit käyttää setAttributea.

Muutt btn = document.querySelectorAll("painike"), div = document.querySelector("#myDiv"); btn.addEventListener("napsautus", funktio () ( // helppo tapa saada elementtiattribuutit console.log(div.id); )); // Element.classList tallentaa kaikki DOMTokenList-elementtiluokat. var classes = div.classList; btn.addEventListener("napsautus", funktio () ( console.log(classes); )); btn.addEventListener("napsautus", funktio () ( // Luokkien lisääminen ja poistaminen classes.add("punainen"); )); btn.addEventListener("napsautus", funktio () ( // Vaihda luokkaa classes.toggle("piilotettu"); ));

Näytön tunnus Näyttöluokat Väri punainen Vaihda näkyvyys

Neliö (leveys: 100px; korkeus: 100px; marginaali-ala: 20px; reunus: 1px tasainen harmaa; reunuksen säde: 5px; ) .hidden (näkyvyys: piilotettu; ) .red ( taustaväri: punainen; )

Elementin HTML-sisällön hakeminen ja muuttaminen

jQueryssä on mukavuusmenetelmät text() ja html(). Sen sijaan voit käyttää textContent- ja innerHTML-ominaisuuksia, jotka ovat olleet olemassa jo kauan ennen jQuerya.

Muutt myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("painike"); // Näin saat helposti selville koko elementtipuun tekstin var myContent = myText.textContent; console.log("textContent: " + oma Sisältö); // Käytä textContent korvaamaan elementin tekstin // poistaa vanhan ja korvaa sen uudella tekstillä btn.addEventListener("click", function () ( myText.textContent = " Koalat ovat parhaita eläimiä "; )); // Jos tarvitsemme elementin HTML:n, käytä innerHTML-koodia. var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // Korvaa html antamalla uusi btn.addEventListener("click", function () ( myText.innerHTML = " Pingviinit ovat parhaita eläimiä "; ));

Mitkä ovat parhaat eläimet?

Koalat
Pingviinit

Uusien lisäys ja olemassa olevien elementtien poistaminen

Huolimatta siitä, että Jquery yksinkertaistaa huomattavasti elementtien lisäämistä ja poistamista, kukaan ei sanonut, että tätä ei voida tehdä puhtaalla JavaScript-koodilla. Tässä on esimerkki sivun elementin lisäämisestä, poistamisesta tai korvaamisesta.

Var lounas = document.querySelector("#lounas"); // Oletetaan, että meillä on lounaslista // Lisätään siihen jotain var addFries = function () ( // Ensin luodaan elementti ja täytetään se sisällöllä var fries = document.createElement("div"); perunat .innerHTML = "

Perunat

"; // Kun tämä on tehty, lisäämme sen sivulle appendChild-toiminnolla. // Elementtimme ilmestyy sivulle valikossa lounas.appendChild(fries); ); // Lisää juustoa hampuriimme) var addCheese = toiminto () ( var beef = document.querySelector("#Beef"), topSlice = document.createElement("li"), bottomSlice = document.createElement("li"); bottomSlice.innerHTML = topSlice.innerHTML = "Juusto": // Ota yläelementti beef ja käytä insertBefore-elementtiä // Ensimmäinen argumentti insertBefore on lisätty elementti // Toinen argumentti on elementti, jota ennen lisätään luotu beef.parentNode. .insertBefore(topSlice, beef); // Tehdään pieni temppu // Anna seuraavaksi lähin elementti toiseksi parametriksi insertBefore, // näin lisätään haluttu elementti beef.parentNode.insertBefore! (bottomSlice, beef.nextSibling);

if (pickles) ( pickles.parentNode.removeChild(pickles); ) ); // Herkullista! var btn = document.querySelectorAll("painike"); btn.addEventListener("napsauta", addFries); btn.addEventListener("napsauta", lisää Juusto); btn.addEventListener("napsauta", poistaPickles);

• Lisää perunat lounaaseen Lisää juustoa voileipään Poista suolakurkku Minun lounas
• Minun voileipäni
• leipää
• suolakurkkua
• Naudanlihaa
• Minun voileipäni

Mayo

JQueryn myötä web-ohjelmoijat voivat luoda vaikuttavia visuaalisia tehosteita ilman flash-tekniikkaa. Tässä artikkelissa on useita silmiinpistäviä esimerkkejä siitä, mitä mahtavia tuloksia voidaan saavuttaa käyttämällä tavallisia selaintyökaluja ja mielikuvitustasi.

Suurennuslasiefekti

Hyvin järjestetty tehoste, jonka avulla voit suurentaa kuvan osaa, jonka päällä kohdistin sijaitsee. Selaimessa, joka ei tunne CSS3:a, suurennuslasi on neliömäinen.

Aviaslider

Tässä liukusäätimessä on kahdeksan erilaista tilaa kuvien selaamiseen, joista jokainen miellyttää silmää moitteettomasti hiotulla dynamiikallaan.
Laaja-alainen navigointi
Suuri kuvaesitys

Ympyräpohjainen navigointi

Ei ole kovin usein törmännyt sivustoon, jossa on paljon pyöreitä elementtejä. Bubble Navigation -laajennuksen avulla voit luoda dynaamista navigointia pelkästään ympyröiden perusteella.
Avattava sivuston kirjautumispaneeli

Mahdollistaa sivuelementtien käynnistämisen ympyrän ympärillä ja tilan eri tasoilla.

Kääntölaatikko

Flip-laajennuksen avulla voit kääntää elementtejä ikään kuin ne olisivat kortteja.

Leijuva galleria

Epävirallinen kuvagalleria. Sisällön esikatselu on joukko hajallaan olevia kuvia, jotka on otettu Polaroid-kameralla.

ikaruselli

Yksinkertainen mutta erittäin mukava kuvan liukusäädin.

Kuvankulku

Diaesitys, jossa kuvat liikkuvat avaruudessa.

Interaktiivinen kuva

Erittäin mielenkiintoinen tapa tehdä interaktiivinen tuoteluettelo.

Jqfancy siirtymät
Valokuvaus

Voit ottaa kuvia sivun kuvan yksittäisistä osista. Napsauta haluamaasi kuvan osaa ja katso tulos näytöllä.

Nopea hiekka

Quicksand-laajennuksen avulla voit lajitella ja suodattaa elementtejä käyttämällä erittäin korkealaatuisia tehosteita.

Diakontekstivinkkejä

Tämä liitännäinen on erittäin hyödyllinen luotaessa yksityiskohtaisia ​​kuvauksia monimutkaisista objekteista ja interaktiivisista kiertomatkoista tarvittaessa, samalla kun se vie mahdollisimman vähän tilaa suuren tietomäärän tarjoamiseksi.

Liukuvat laatikot

Sliding boxes -laajennus auttaa sinua luomaan epätavallisen dynaamisen gallerian kuvista ja kuvateksteistä.

zoom galleria

Galleria kuvista, joiden elementit tulevat iloisesti esiin, kun viet hiiren niiden päälle.

Tässä artikkelissa tarkastellaan jQueryn AJAX-pikakuvakemenetelmiä: lataa, hanki, getJSON, getScript ja post. Nämä menetelmät tekevät tarvittavien AJAX-pyyntöjen suorittamisesta erittäin helppoa, ja toisin kuin ajax-funktio, ne vaativat vähemmän koodirivejä kirjoittaakseen.

jQuery - latausmenetelmä

Latausmenetelmä on suunniteltu hakemaan tietoja palvelimelta määritetyltä URL-osoitteelta ja sijoittamaan ne yhteen tai useampaan valittuun elementtiin.

Latausmenetelmällä on seuraava syntaksi:

Load(url [,data] [,complete]) // hakasulkeissa olevat parametrit ovat valinnaisia ​​//url - merkkijono, joka sisältää URL-osoitteen, johon pyyntö on lähetettävä //data (valinnainen parametri) - tiedot, jotka on lähetettävä palvelin (merkkijono- tai objektimuodossa) //valmis – lisätoiminnot, jotka on suoritettava pyynnön suorittamisen jälkeen (määritetty Function(responseText, textStatus, xhr)-funktiolla) // vastausteksti - palvelimen vastaus // textStatus - vastauksen tila // xhr - XMLHTTPRequest-objekti

Useimmissa tapauksissa latausmenetelmä käyttää GET:tä pyynnön lähettämiseen. Mutta se voi myös käyttää POST-menetelmää. Tämä tapahtuu vain, kun palvelimelle lähetettävät tiedot on määritetty ei merkkijonomuodossa, vaan objektin kautta.

Esimerkkejä latausmenetelmän käytöstä

1. Lisää tiedoston asidenav.tpl sisältö lohkoon, jossa on id="asidenav", kun sivun DOM on latautunut:

... // sivun DOM:n lataamisen jälkeen $(function() ( // lisää tiedoston asidenav.tpl sisältö elementtiin (#asidenav) // jos tiedosto ei ole samassa hakemistossa kuin HTML asiakirja, sinun on lisäksi määritettävä polku hänelle $("#asidenav").load("asidenav.tpl");

2. Lataa osa demo.html-tiedostosta elementtiin, kun napsautat siinä olevaa painiketta:

Hae tiedoston demo.html sisältö ... $("#ajaxclick").click(function())( // lataa osa tiedostosta demo.html (#content1) elementtiin id="content1" $ (this).parent() .load("demo.html #content1" ));

Demo.html-tiedoston sisältö:

Tiedosto demo.html ... ...

3. Lataa vastaus content.php elementtiin, jossa on id="result" . Tämä vastaus riippuu sen data-content-attribuutin arvosta, joka AJAX-pyynnön palvelimelle lähettäneellä painikkeella on.

Lataa sisältö 1 Lataa sisältö 2 Lataa sisältö 3 ... // kun napsautat painiketta, jossa on luokka load-ajax-click $(".load-ajax-content").click(function())( // määritä arvo data-attribuutista -content var dataContent = $(this).attr("data-content" // pyytää tietoja tiedostosta data-content-attribuutin arvolla ja tulostaa ne id="result"-elementtiin if (); dataContent) ( $ ("#tulos").load("content.php","content="+dataContent) ));