jQuery näited on lihtsad ja selgitustega. Näide jQuery kasutamisest. Text() näide

→ jQuery näited algajatele

jQuery on javascripti teek, mis koosneb brauseriülestest funktsioonidest – ümbristest DOM-i (Document Object Model) elementidega manipuleerimiseks. Selle peamine põhimõte on vajaliku mehhanismi automaatne rakendamine, olenevalt brauserist. Näiteks dokumendi html-elemendi ID järgi hankimine toimub erinevates brauserites erinevalt. Enne jqueryt kasutasin seda funktsiooni:

Funktsioon getObj(objID)( if (document.getElementById) (tagasta document.getElementById(objID);) else if (document.all) (tagasta document.all;) else if (document.layers) (tagasta document.layers;) )

Sama toimingu tegemiseks jquery's tehke lihtsalt järgmist:

$("#objID") või jQuery("#objID")

Funktsiooni $() kutsumine on samaväärne funktsiooniga jQuery(), kuna esimene on teise varjunimi. Kui te ei kasuta muid teeke (nt jquery), pääsete nimeruumile turvaliselt juurde $() kaudu. Vastasel juhul on parem kasutada objekti otsenime – jQuery. Lisaks eeldame, et teisi raamatukogusid pole.

jQueryga alustamine

Nii et alustame. Esimene samm on hankida jquery teegi uusim versioon projekti ametlikult veebisaidilt http://jquery.com/ või laadida jquery alla siit. Arhiivis ja ametlikul veebisaidil on kaks versiooni: tihendatud ja arendatud. Saidil on parem kasutada tihendatud ja kui soovite katsetada, kasutage teist. Esiteks lisame lehe kehasse jquery teegi:

Pärast seda defineeritakse javascripti nimeruum nii, et funktsiooni $() väljakutse hõivab jquery ja avaldise $("#objID") abil saate objektina hankida mis tahes html-dokumendi elemendi. Kus objID on objekti ID.

jQuery ja CSS

Esimese näitena vaatame, kuidas jquery ja CSS töötavad. CSS-i jquery abil manipuleerimiseks on kaks peamist viisi: ühe või mitme atribuudi muutmine korraga. Neid käivitatakse funktsiooni css() kaudu. Teoreetiliselt näeb see välja umbes selline:

$("#objID").css("display","block") $("#objID").css(( kuva:"plokk, veeris:"10px", värv:"#ffffff" ))

Näide ühe CSS-atribuudi muutmisest

Näide ühe atribuudi muutmisest oli edukas!

Allikas:

Näide ühe atribuudi muutmisest oli edukas!

Näide mitme CSS-i atribuudi muutmisest

Näide mitme atribuudi muutmisest!

Allikas:

funktsioon demo_css())( $("#span2").css(( color:"#ffffff", padding:"5px", background:"#980000" )); ) Mitme atribuudi muutmise näide!

Teksti ja html-i muutmine

Teksti või html-koodi muutmiseks on olemas funktsioonid text() ja html() .

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

Tõsi la la

Veelgi enam, kui proovite sisestada HTML-koodi funktsiooni text() abil, saate selle algsel kujul. Funktsioon text() väldib kõike.

Text() näide

Allikas:

funktsioon set_text())( $("#span3").text("Aitäh!"); )

Näide html() kasutamisest

Allikas:

function set_html())( $("#span4").html("Aitäh! See on palju parem."); )

Atribuutide haldamine jQueryga

Funktsioon attr() manipuleerib mis tahes elemendi atribuutidega. Selle abiga saate lisada või muuta pealkirja, href, väärtust, src ja nii edasi.

Attr() näide

Allikas:

funktsioon plus_ten())( var cur_value = $("#tekst").attr("väärtus"); cur_value = parseInt(cur_value) + 10; $("#text").attr("väärtus",cur_value); )

Sündmuste töötlejad jQuerys

Täielik nimekiri on saadaval aadressil http://api.jquery.com/category/events/. Toon vaid mõned näited. Kõige tavalisem onclick sündmuste töötleja. JQuerys saate selle kinni pidada funktsiooni click() kaudu.

Click() Näide

Allikas:

$("#butt").click(function())( alert("Kas otsustasite seda kontrollida?"); ));

Keyup() näide

Sisestage midagi:

Sisestasite:

Allikas:

Sisestage midagi:
Sisestasite: $("#text2").keyup(function())( if ($("#text2").val())( $("#text2_target").css((background:"#980000" ) ); ) else ( $("#text2_target").css((background:"#ffffff")); ) $("#text2_target").text($("#text2").val()); ) );

Näide bind() kasutamisest

Klõpsake minul!


Allikas:

div#log( taust:#1C93A5; laius:300px; kõrgus:100px; polsterdus:10px; värv:#fff; ) Klõpsake minul!
$(document).ready(function() ( $("#log").bind("klõps", function(e) ( $("#coord").html("X-koordinaat: "+ e.pageX + " Y koordinaat: " + e.lehtY + ""); )); ));

JQuery on suurepärane raamatukogu. See aitas suurepäraselt vältida kõiki IE6 lõkse. Varem oli brauseritevaheline ühilduvus arendajate jaoks suur probleem. Jquery tuli hästi toime kõigi erinevustega paigutuste kuvamisel erinevates brauserites.

Tänapäeval on brauseritel suurepärased ühtsed lahendused. Saame mugavalt kasutada kõiki ES5 privileege ning meie käsutuses on ka HTML5 API, mis teeb DOM-i elementide töötlemise palju lihtsamaks. Arendajad on unustuse äärel ja eemalduvad mõne projekti puhul jQueryst. Eriti mikroteenuste ja mittekeerukate programmide puhul.

Ärge saage minust valesti aru – Jquery on endiselt suurepärane raamatukogu ja loomulikult peate 70% ajast seda kasutama. Kuigi väikeste lehtede jaoks, millel on piiratud JS, saate kasutada VanillaJS-i või mõnda muud raamistikku. Need sobivad mobiilirakenduste jaoks.

Noh, siin on 10 näidet töötavast koodist, mida saate teha ilma jqueryta.

Lehe laadimise lõpetamise sündmuse jälgimine

Esimene asi, mida jQuery kasutamisel teha, on mähkida kood meetodisse $(document).ready(), et teada saada, millal DOM on manipuleerimiseks valmis. Ilma Jqueryta saame kasutada sündmust DOMContentLoaded. Siin on koodinäide:

// Kuulake sündmust DOMContentLoaded kogu dokumendi jaoks anonüümse funktsiooniga // Saate oma koodi selle funktsiooni haardesse mähkida // ja see käivitub lehe laadimisel. document.addEventListener("DOMContentLoaded", funktsioon () ( // meie Hawaii tere, kuvatakse konsoolis console.log("Aloha"); ));

Elementide valijad ilma Jqueryta

Ühel päeval peame valima elemendid ID, klassi või siltide abil ja jQuery on üks parimaid. Mille valijad on täiesti identsed CSS-i süntaksiga. Tänaseks on brauserid kasutusele võtnud kaks olulist API-d – querySelector ja querySelectorAll.

// Saate kasutada document.querySelectorit, et saada esimene kriteeriumidele vastav element // võtab vaid ühe argumendi – CSS-selektorid. var lochNess = document.querySelector(.koletised"); console.log("See" on Šotimaalt - " + lochNess.textContent); // saame kogu hankida ka kasutades document.querySelectorAll. // tagastab kriteeriumile vastavate dom-elementide loendi var scary = document.querySelectorAll(" .monsters") ; console.log("Peidumise tšempionid: "); for (var i = 0; i< scary.length; i++) { console.log(scary[i].innerHTML); }

  • Nessy
  • Suur jalg
  • La chupacabra

Sündmuste töötlejate loomine ja kustutamine (meetodid)

Sündmuste kuulamine on veebirakenduste loomise oluline osa. Ajalooliselt on olnud kaks suurt leeri – IE ja ülejäänud. Kuid täna kasutame lihtsalt addEventListenerit

Var btn = document.querySelectorAll("nupp"), loend = document.querySelector("ul"); // Kutsuge soovitud sündmusel rakendus addEventListener. // alustab elemendi klikisündmuse jälgimist. btn.addEventListener("click", function () ( // Nupule klõpsamisel tahame käivitada oma loendis sündmuste skaala. // Selleks peame lisama oma loendisse sündmuse // nii et kui hiir liigub elemendi kohal, käivitub funktsioon. list .addEventListener("mouseover", enlarge); )); // Suumisündmuse tühistamiseks kasutage rakendust removeEventListener. btn.addEventListener("click", function () ( // Sündmuste eemaldamine nimetute funktsioonidega ei tööta, kasutage ainult nimetuid list.removeEventListener("mouseover", suurenda; )); // Loome funktsiooni, mis skaleerib. var enlarge = function () ( // Lisa elementide jaoks klass list.classList.add("suumitud"); // kui kursor loendist lahkub, eemaldage klass, et naasta tavaskaalale list.addEventListener("mouseout ", funktsioon ( ) ( list.classList.remove("suumitud") )); ); // Nüüd tahame klõpsamisel nimed esile tõsta. // Kui elemendil käivitatakse klõps, peaks see muutuma roheliseks // Tänu sündmuse delegeerimisele saame lihtsalt lisada põhielemendile töötleja // Selle meetodi puhul ei loo me igale sündmusekuulajaid

  • . list.addEventListener("klõps", funktsioon (e) ( // tõstab roheliselt esile sihtelemendi e.target.classList.add("roheline"); ));

    Luba suum Keela suum

    Nime esiletõstmiseks klõpsake sellel

    • Chewbacca
    • Han Solo
    • Luke
    • Boba Fett

    Roheline ( värv: roheline; ) .suumitud ( kursor: kursor; fondi suurus: 23 pikslit; )

    addEventListener kasutas kolmandat argumenti, kuid see on valikuline. Nagu näete, näeb kood välja üsna sarnane jQueryga.

    Klasside lisamine ja eemaldamine ilma jQueryta puhtas JS-is

    Elementiklasside haldamine ilma jQueryta oli vanasti suur probleem. Aga enam mitte. Tänu classListi atribuudile. Ja kui teil on vaja atribuute muuta, saate kasutada setAttribute.

    Var btn = document.querySelectorAll("nupp"), div = document.querySelector("#myDiv"); btn.addEventListener("klõps", funktsioon () ( // lihtne viis elemendi atribuutide hankimiseks console.log(div.id); )); // Element.classList salvestab kõik DOMTokenListi elemendiklassid. var classes = div.classList; btn.addEventListener("klõps", funktsioon () ( console.log(classes); )); btn.addEventListener("klõps", funktsioon () ( // Klasside lisamine ja eemaldamine classes.add("punane"); )); btn.addEventListener("klõps", funktsioon () ( // Klassi klasside vahetamine.toggle("hidden"); ));

    Kuva ID Kuva klassid Värv punane Lülitab nähtavuse sisse/välja

    Ruut ( laius: 100 pikslit; kõrgus: 100 pikslit; veeris-alumine: 20 pikslit; ääris: 1 pikslit ühtlane hall; äärise raadius: 5 pikslit; ) .hidden ( nähtavus: peidetud; ) .red ( taustavärv: punane; )

    Elemendi HTML-sisu hankimine ja muutmine

    jQueryl on mugavusmeetodid text() ja html(). Selle asemel saate kasutada atribuute textContent ja innerHTML, mis on olnud kasutusel juba ammu enne jQueryt.

    Var myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("button"); // Nii saate hõlpsalt teada kogu elemendipuu teksti var myContent = myText.textContent; console.log("tekstisisu: " + minusisu); // Elemendi teksti asendamiseks kasuta textContent // eemaldab vana, asendades selle uue tekstiga btn.addEventListener("klõps", funktsioon () ( myText.textContent = " Koaalad on parimad loomad "; )); // Kui vajame elemendi HTML-i, kasutage sisemist HTML-i. var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // HTML-i asendamiseks esitage lihtsalt uus btn.addEventListener("click", function () ( myText.innerHTML = " Pingviinid on parimad loomad "; ));

    Millised on parimad loomad?

    Koaalad
    Pingviinid

    Uute lisamine ja olemasolevate elementide kustutamine

    Hoolimata asjaolust, et Jquery lihtsustab oluliselt elementide lisamise ja eemaldamisega tööd, ei öelnud keegi, et seda ei saa teha puhta JavaScripti koodiga. Siin on näide, kuidas lehel elementi lisada, eemaldada või asendada.

    Var lõuna = document.querySelector("#lõuna"); // Oletame, et meil on lõunasöögi menüü // Lisame sellele midagi var addFries = function () ( // Esmalt loome elemendi ja täidame selle sisuga var fries = document.createElement("div"); friikartulid .innerHTML = "

  • Friikartulid
    • "; // Kui see on tehtud, kasutame selle lehele sisestamiseks appendChild. // Meie element kuvatakse lehel menüüs lunch.appendChild(fries); ); // Lisage meie burgerile juustu . var addCheese = funktsioon () ( var beef = document.querySelector("#Beef"), topSlice = document.createElement("li"), bottomSlice = document.createElement("li"); bottomSlice.innerHTML = topSlice.innerHTML = "Juust"; // Sisesta ülemine viil: // Võtke vanemelement beef ja kasutage insertBefore'i. // Meetodi insertBefore esimene argument on meie lisatav element // Teine argument on element, mille ette lisame Created beef.parentNode.insertBefore(topSlice, beef); //Bottom slice : // Peab natuke triki tegema! // Esitage teise parameetrina insertBefore lähim element, // nii sisestame sisu "after " soovitud element beef.parentNode.insertBefore(bottomSlice, beef.nextSibling); ); var removePickles = function () ( // eemaldage element var pickles = document.querySelector("#pickles"); if (marineeritud kurgid) ( hapukurgid.parentNode.removeChild(marinaadid); ) ); // Maitsev! var btn = document.querySelectorAll("nupp"); btn.addEventListener("klõps", addFries); btn.addEventListener("klõps", lisa juust); btn.addEventListener("klõps", eemalda Pickles);

    Lisa lõunasöögile friikartulid Lisa võileivale juustu Eemalda hapukurk Minu lõuna

    • Minu võileib
    • Leib
    • Hapukurgid
    • Veiseliha
    • Mayo
    • Leib

    JQuery tulekuga on veebiprogrammeerijatel võimalus luua muljetavaldavaid visuaalseid efekte ilma välkmälutehnoloogiat kasutamata. Selles artiklis on toodud mitu silmatorkavat näidet selle kohta, milliseid hämmastavaid tulemusi saab standardsete brauseritööriistade ja oma kujutlusvõimega saavutada.

    Suurendusklaasi efekt

    Hästi organiseeritud efekt, mis võimaldab teil suurendada pildi osa, mille kohal kursor asub. CSS3-ga tundmatutes brauserites on suurendusklaas ruudukujuline.

    Aviaslider

    Sellel liuguril on piltide sirvimiseks kaheksa erinevat režiimi, millest igaüks rõõmustab silma oma laitmatult lihvitud dünaamikaga.

    Laiaulatuslik navigeerimine
    Suur piltide slaidiseanss
    Ringipõhine navigeerimine

    Harva satute saidile, millel on palju ümaraid elemente. Bubble Navigation pistikprogramm võimaldab luua dünaamilist navigeerimist, mis põhineb ainult ringidel.

    Rippmenüü sisselogimispaneel
    Ringlema

    Võimaldab käivitada leheelemente ümber ringi ja erinevatel ruumitasanditel.

    Pööratav kast

    Flip-plugin võimaldab elemente ümber pöörata nii, nagu oleksid need kaardid.

    Hõljuv galerii

    Mitteametlik pildigalerii. Sisu eelvaade on rühm hajutatud fotosid, mis on tehtud Polaroid-kaameraga.

    ikarussell

    Lihtne, kuid väga kena pildiliugur.

    Pildivoog

    Slaidiseanss ruumis liikuvate piltidega.

    Interaktiivne pilt

    Väga huvitav viis interaktiivse tootekataloogi tegemiseks.

    Jqfancy üleminekud
    fotosessioon

    Võimaldab pildistada lehel oleva pildi üksikuid osi. Klõpsake pildi soovitud osal ja vaadake tulemust ekraanil.

    Kiire liiv

    Quicksandi pistikprogramm võimaldab teil sorteerida ja filtreerida elementide komplekti, kasutades väga kvaliteetseid efekte.

    Slideout konteksti nõuanded

    See pistikprogramm on väga kasulik keerukate objektide üksikasjalike kirjelduste ja vajaduse korral interaktiivsete ringkäikude koostamiseks, võttes samal ajal võimalikult vähe ruumi suure hulga teabe edastamiseks.

    Lükandkastid

    Liugkastide pistikprogramm aitab teil luua ebatavalise dünaamilise piltide galerii koos nende pealkirjadega.

    suumi galerii

    Pildigalerii, mille elemendid kerkivad rõõmsalt esile, kui hõljutate kursorit nende kohal.

    Selles artiklis vaatleme jQuery AJAX-i otseteede meetodeid: laadimine, hankimine, getJSON, getScript ja postitamine. Need meetodid muudavad vajalike AJAX-i päringute rakendamise väga lihtsaks ja erinevalt ajaxi funktsioonist nõuavad nende kirjutamiseks vähem koodiridu.

    jQuery - laadimismeetod

    Laadimismeetod on mõeldud andmete toomiseks serverist määratud URL-i kaudu ja paigutamiseks ühte või mitmesse valitud elementi.

    Laadimismeetodil on järgmine süntaks:

    Load(url [,data] [,complete]) // nurksulgudes olevad parameetrid on valikulised //url - string, mis sisaldab URL-i, millele päring tuleb saata //andmed (valikuline parameeter) - andmed, mis tuleb saata server (stringi või objekti vormingus) //lõpeta – lisatoimingud, mis tuleb teha pärast päringu täitmist (määratud funktsiooni Function(responseText, textStatus, xhr) abil) // vastusetekst - serveri vastus // textStatus - vastuse olek // xhr - XMLHTTPobjekti taotlemine

    Enamikul juhtudel kasutab laadimismeetod päringu saatmiseks GET-i. Kuid see võib kasutada ka POST-meetodit. See juhtub ainult siis, kui serverisse saadetavad andmed on määratud mitte stringivormingus, vaid läbi objekti.

    Näiteid laadimismeetodi kasutamisest

    1. Pärast lehe DOM-i laadimist sisestage faili asidenav.tpl sisu plokki id="asidenav":

    ... // pärast lehe DOM-i laadimist $(function() ( // sisestage faili asidenav.tpl sisu elementi (#asidenav) // kui fail ei asu HTML-iga samas kataloogis dokument, siis tuleb lisaks määrata ka tee tema juurde $("#asidenav").load("asidenav.tpl"); ));

    2. Laadige osa demo.html failist elementi, kui klõpsate selles asuval nupul:

    Hankige faili demo.html sisu ... $("#ajaxclick").click(function())( // laadige osa failist demo.html (#content1) elementi id="content1" $ (this).parent() .load("demo.html #content1"); ));

    Faili demo.html sisu:

    Fail demo.html ... ...

    3. Laadige vastus content.php elementi, millel on id="result" . See vastus sõltub andmesisu atribuudi väärtusest, mis on serverile AJAX-i päringu saatnud nupul.

    Laadi sisu 1 Laadi sisu 2 Laadi sisu 3 ... // kui klõpsate nupul klassiga load-ajax-click $(".load-ajax-content").click(function())( // määrake väärtus andmeatribuudist -content var dataContent = $(this).attr("data-content"); // taotlege failist andmeid, kasutades atribuudi data-content väärtust, ja väljastage need elemendile id="result " if (andmesisu) ( $ ("#tulemus").load("sisu.php","sisu="+andmesisu); ) ));



    SEOTUD ARTIKLID