→ jQuery-voorbeelden voor beginners

jQuery is een javascript-bibliotheek die bestaat uit cross-browser-functies - wrappers voor het manipuleren van DOM-elementen (Document Object Model). Het belangrijkste principe is de automatische toepassing van het vereiste mechanisme, afhankelijk van de browser. Het verkrijgen van een html-element van een document op basis van ID gebeurt bijvoorbeeld anders in verschillende browsers. Vóór jQuery gebruikte ik deze functie:

Functie getObj(objID)( if (document.getElementById) (retourneer document.getElementById(objID);) else if (document.all) (retourneer document.all;) else if (document.layers) (retourneer document.layers;) )

Om dezelfde actie in jQuery uit te voeren, doet u dit:

$("#objID") of jQuery("#objID")

Het aanroepen van de functie $() is gelijk aan jQuery() , aangezien de eerste een alias is voor de tweede. Als u geen andere bibliotheken zoals jQuery gebruikt, kunt u veilig toegang krijgen tot de naamruimte via $(). Anders is het beter om de directe naam van het object te gebruiken: jQuery. Verder gaan we ervan uit dat er geen andere bibliotheken zijn.

Aan de slag met jQuery

Dus laten we aan de slag gaan. Het eerste dat u hoeft te doen, is de nieuwste versie van de jquery-bibliotheek downloaden van de officiële projectwebsite http://jquery.com/ of jquery hier downloaden. Er zijn twee versies in het archief en op de officiële website: gecomprimeerd en ontwikkeld. Op de site is het beter om de gecomprimeerde te gebruiken, en als je wilt experimenteren, gebruik dan de tweede. Allereerst nemen we de jQuery-bibliotheek op in de hoofdtekst van de pagina:

Hierna wordt de javascript-naamruimte zo gedefinieerd dat de aanroep van de functie $() wordt bezet door jQuery en u elk element van het HTML-document als object kunt krijgen met behulp van de uitdrukking $("#objID") . Waar objID de object-ID is.

jQuery en CSS

Laten we als eerste voorbeeld eens kijken hoe jQuery en CSS werken. Er zijn twee manieren om CSS te manipuleren met jQuery: het wijzigen van één attribuut of meerdere tegelijk. Ze worden uitgevoerd via de functie css(). In theorie ziet het er ongeveer zo uit:

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

Voorbeeld van het wijzigen van één CSS-attribuut

Het voorbeeld van het veranderen van één attribuut was een succes!

Broncode:

Het voorbeeld van het veranderen van één attribuut was een succes!

Voorbeeld van het wijzigen van meerdere CSS-kenmerken

Voorbeeld van het wijzigen van meerdere attributen!

Broncode:

function demo_css())( $("#span2").css(( color:"#ffffff", opvulling:"5px", achtergrond:"#980000" )); ) Voorbeeld van het wijzigen van meerdere attributen!

Tekst en html wijzigen

Om tekst of html-code te wijzigen, zijn er functies text() en html() .

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

Echt la la

Bovendien, als u HTML-code probeert in te voegen met de functie text(), ontvangt u deze in de oorspronkelijke vorm. De functie text() ontsnapt aan alles.

Tekst() voorbeeld

Broncode:

function set_text())( $("#span3").text("Bedankt!"); )

Voorbeeld van het gebruik van html()

Broncode:

function set_html())( $("#span4").html("Bedankt! Dit is veel beter."); )

Kenmerken beheren met jQuery

De functie attr() manipuleert de attributen van elk element. Met zijn hulp kunt u titel, href, waarde, src enzovoort toevoegen of wijzigen.

Attr() voorbeeld

Broncode:

function plus_ten())( var cur_value = $("#text").attr("value"); cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); )

Gebeurtenishandlers in jQuery

De volledige lijst is beschikbaar op http://api.jquery.com/category/events/. Ik zal slechts een paar voorbeelden geven. De meest voorkomende onclick-gebeurtenishandler. In jQuery kun je het onderscheppen via de click()-functie.

Klik() Voorbeeld

Broncode:

$("#butt").click(function())( alert("Heb je besloten om het eens te proberen?"); ));

Keyup() voorbeeld

Voer iets in:

Je hebt ingevoerd:

Broncode:

Voer iets in:
Je hebt ingevoerd: $("#text2").keyup(function())( if ($("#text2").val())( $("#text2_target").css((achtergrond:"#980000" ) ) else ( $("#text2_target").css((achtergrond:"#ffffff")); ) $("#text2_target").text($("#text2").val()); );

Voorbeeld van het gebruik van bind()

Klik op mij!

Broncode:

div#log( achtergrond:#1C93A5; breedte:300px; hoogte:100px; vulling:10px; kleur:#fff; ) Klik op mij!
$(document).ready(function() ( $("#log").bind("klik", function(e) ( $("#coord").html("X-coördinaat: "+ e.pageX + " Y-coördinaat: " + e.pageY + "");

JQuery is een geweldige bibliotheek. Het hielp om alle valkuilen van IE6 perfect te vermijden. Vroeger was compatibiliteit tussen browsers een groot probleem voor ontwikkelaars. JQuery kon goed omgaan met alle verschillen in het weergeven van lay-outs in verschillende browsers.

Tegenwoordig hebben browsers uitstekende uniforme oplossingen. We kunnen comfortabel gebruik maken van alle privileges van ES5, en we hebben ook de HTML5 API tot onze beschikking, wat het veel gemakkelijker maakt om DOM-elementen te verwerken. Ontwikkelaars staan ​​op de rand van de vergetelheid en stappen voor sommige projecten af ​​van jQuery. Vooral in het geval van microservices en niet-complexe programma's.

Begrijp me niet verkeerd: JQuery is nog steeds een prachtige bibliotheek, en je zult hem natuurlijk 70% van de tijd moeten gebruiken. Hoewel je voor kleine pagina's met beperkte JS VanillaJS of een ander raamwerk kunt gebruiken. Deze zijn geschikt voor mobiele toepassingen.

Welnu, hier zijn 10 voorbeelden van werkende code die u zonder jQuery kunt doen.

Het bijhouden van de gebeurtenis dat de pagina is geladen

Het eerste dat u doet als u jQuery gebruikt, is de code in een $(document).ready() -methode plaatsen om te weten wanneer de DOM gereed is voor manipulatie. Zonder JQuery kunnen we de DOMContentLoaded-gebeurtenis gebruiken. Hier is een codevoorbeeld:

// Luister naar de DOMContentLoaded-gebeurtenis voor het hele document, met een anonieme functie // U kunt uw code in de armen van deze functie plaatsen // en deze wordt uitgevoerd wanneer de pagina wordt geladen. document.addEventListener("DOMContentLoaded", function () ( // onze Hawaiiaanse begroeting wordt getoond in de consoleconsole.log("Aloha"); ));

Elementkiezers zonder JQuery

Op een dag zullen we elementen moeten selecteren met behulp van id, class of tags, en jQuery is een van de beste. De selectors hiervan zijn volledig identiek aan de CSS-syntaxis. Tegenwoordig hebben browsers twee belangrijke API's geïntroduceerd: querySelector en querySelectorAll.

// U kunt document.querySelector gebruiken om het eerste element te verkrijgen dat aan de criteria voldoet // heeft slechts één argument nodig: CSS-selectors. var lochNess = document.querySelector(".monsters"); console.log("Het komt uit Schotland - " + lochNess.textContent); // we kunnen de verzameling ook ophalen met document.querySelectorAll. // retourneert een lijst met dom-elementen die overeenkomen met het criterium var eng = document.querySelectorAll( ".monsters" ); console.log("Verstoppers: "); (var i = 0; i< scary.length; i++) { console.log(scary[i].innerHTML); }

• Nessy
• Grote voet
• De chupacabra

Gebeurtenishandlers (methoden) maken en verwijderen

Luisteren naar gebeurtenissen is een fundamenteel onderdeel van het bouwen van webapplicaties. Historisch gezien zijn er twee grote kampen geweest: IE en de rest. Maar vandaag gebruiken we alleen addEventListener

Var btn = document.querySelectorAll("knop"), lijst = document.querySelector("ul"); // Roep addEventListener op voor de gewenste gebeurtenis. // begint de klikgebeurtenis op een element te volgen. btn.addEventListener("click", function () ( // Wanneer op een knop wordt geklikt, willen we een gebeurtenisschaal aan onze lijst activeren. // Om dit te doen, moeten we een gebeurtenis aan onze lijst toevoegen // zodat wanneer de muis over een element beweegt, wordt de functie list .addEventListener("mouseover", enlarge )); // Gebruik removeEventListener om de zoomgebeurtenis te annuleren. btn.addEventListener("klik", function () ( // Het verwijderen van gebeurtenissen werkt niet met naamloze functies, gebruik alleen benoemde functies list.removeEventListener("mouseover", vergroten); )); // Laten we een functie maken die schaalbaar is. var enlarge = function () ( // Voeg een klasse toe voor de elementen list.classList.add("zoomed"); // wanneer de cursor de lijst verlaat, verwijdert u de klasse om terug te keren naar de normale schaal list.addEventListener("mouseout ", function ( ) ( list.classList.remove("ingezoomd") )); // Nu willen we namen markeren wanneer erop wordt geklikt. // Wanneer op het element wordt geklikt, moet het groen worden // Dankzij gebeurtenisdelegatie kunnen we eenvoudigweg een handler aan het bovenliggende element toevoegen // Bij deze methode maken we geen gebeurtenislisteners voor elk element

. list.addEventListener("klik", function (e) ( // markeer het doelelement in het groen e.target.classList.add("groen"); ));

Zoom inschakelen Zoom uitschakelen

Klik op een naam om deze te markeren

• Chewbacca
• Han Solo
• Lucas
• Boba fett

Groen ( kleur: groen; ) .zoomed ( cursor: aanwijzer; lettergrootte: 23px; )

addEventListener gebruikte een derde argument, maar dit is optioneel. Zoals u kunt zien, lijkt de code behoorlijk op jQuery.

Klassen toevoegen en verwijderen zonder jQuery in pure JS

Het beheren van elementklassen zonder jQuery was vroeger een groot probleem. Maar niet meer. Dankzij de classList-eigenschap. En als u attributen moet wijzigen, kunt u setAttribute gebruiken.

Var btn = document.querySelectorAll("knop"), div = document.querySelector("#mijnDiv"); btn.addEventListener("click", function () ( // een gemakkelijke manier om elementattributen console.log(div.id); )); // Element.classList slaat alle elementklassen uit de DOMTokenList op. var klassen = div.classList; btn.addEventListener("klik", function () ( console.log(klassen); )); btn.addEventListener("klik", function () ( // Klassen toevoegen en verwijderen klassen.add("rood"); )); btn.addEventListener("klik", function () ( // Schakel klasse klassen.toggle("verborgen"); ));

Weergave-id Weergaveklassen Kleur rood Schakel zichtbaarheid in of uit

Vierkant ( breedte: 100px; hoogte: 100px; marge-onder: 20px; rand: 1px effen grijs; randradius: 5px; ) .hidden ( zichtbaarheid: verborgen; ) .red ( achtergrondkleur: rood; )

De HTML-inhoud van een element ophalen en wijzigen

jQuery heeft gemaksmethoden text() en html(). In plaats daarvan kunt u de eigenschappen textContent en innerHTML gebruiken, die al lang vóór jQuery bestonden.

Var myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("knop"); // Op deze manier kunt u eenvoudig de volledige tekst van de elementenboom achterhalen var myContent = myText.textContent; console.log("textContent: " + mijnContent); // Gebruik textContent om de tekst van het element te vervangen // verwijdert de oude en vervangt deze door nieuwe tekst btn.addEventListener("click", function () ( myText.textContent = " Koala's zijn de beste dieren "; )); // Als we de HTML van het element nodig hebben, gebruik dan innerHTML. var mijnHtml = mijnText.innerHTML; console.log("innerHTML: " + mijnHtml); // Om html te vervangen, geeft u gewoon een nieuwe btn.addEventListener("click", function () ( myText.innerHTML = "Pinguïns zijn de beste dieren"; ));

Wat zijn de beste dieren?

Koala's
Pinguïns

Nieuwe elementen invoegen en bestaande elementen verwijderen

Ondanks het feit dat JQuery het werk met het toevoegen en verwijderen van elementen enorm vereenvoudigt, heeft niemand gezegd dat dit niet in pure JavaScript-code kan worden gedaan. Hier ziet u een voorbeeld van hoe u een element op een pagina kunt toevoegen, verwijderen of vervangen.

Var lunch = document.querySelector("#lunch"); // Laten we zeggen dat we een menu hebben voor onze lunch // Laten we er iets aan toevoegen var addFries = function () ( // Eerst maken we een element en vullen het met inhoud var frietjes = document.createElement("div"); frietjes .innerHTML = "

Frieten

"; // Zodra dit is gebeurd, gebruiken we appendChild om het in de pagina in te voegen. // Ons element verschijnt op de pagina in het menu lunch.appendChild(fries); ); // Voeg kaas toe aan onze burger) var addCheese = function () ( var beef = document.querySelector("#Beef"), topSlice = document.createElement("li"), bottomSlice = document.createElement("li"); bottomSlice.innerHTML = topSlice.innerHTML. = "Cheese"; top slice: // Neem het bovenliggende element beef en gebruik insertBefore. // Het eerste argument in de insertBefore-methode is ons toegevoegde element // Het tweede argument is het element waarvoor we het gemaakte beef.parentNode zullen toevoegen. .insertBefore(topSlice, beef); // Laten we een klein trucje doen! // Geef het volgende dichtstbijzijnde element op als de tweede parameter in insertBefore, // op deze manier voegen we de inhoud in "na" het gewenste element beef.parentNode.insertBefore (bottomSlice, beef.nextSibling); removePickles = function () ( // verwijder het element var pickles = document.querySelector("#pickles");

if (augurken) ( pickles.parentNode.removeChild(augurken); ) ); // Lekker! var btn = document.querySelectorAll("knop"); btn.addEventListener("klik", addFries); btn.addEventListener("klik", addCheese); btn.addEventListener("klik", verwijderPickles);

• Voeg friet toe aan de lunch Voeg kaas toe aan de sandwich Verwijder de augurken Mijn lunch
• Mijn broodje
• Brood
• Augurken
• Rundvlees
• Mijn broodje

Mayo

Met de komst van jQuery hebben webprogrammeurs de mogelijkheid om indrukwekkende visuele effecten te creëren zonder toevlucht te hoeven nemen tot flashtechnologie. Dit artikel presenteert een aantal opvallende voorbeelden van welke verbazingwekkende resultaten kunnen worden bereikt met behulp van standaard browsertools en uw verbeeldingskracht.

Vergrootglaseffect

Een overzichtelijk effect waarmee u het deel van de afbeelding waarover de cursor zich bevindt, kunt vergroten. In browsers die niet bekend zijn met CSS3 is het vergrootglas vierkant.

Aviaslider

Deze schuifregelaar heeft acht verschillende modi om door afbeeldingen te bladeren, die elk een lust voor het oog zijn met hun onberispelijk gepolijste dynamiek.
Brede navigatie
Diavoorstelling met grote afbeeldingen

Cirkelgebaseerde navigatie

Het komt niet vaak voor dat je een site tegenkomt met veel ronde elementen. Met de Bubble Navigation-plug-in kunt u dynamische navigatie creëren die uitsluitend op cirkels is gebaseerd.
Vervolgkeuzelijst inlogpaneel

Hiermee kunt u pagina-elementen rond een cirkel en in verschillende ruimtevlakken lanceren.

Flip-doos

Met de Flip-plug-in kunt u elementen omdraaien alsof het kaarten zijn.

Zwevende galerij

Informele afbeeldingengalerij. Het inhoudsvoorbeeld bestaat uit een groep verspreide foto's gemaakt met een polaroidcamera.

icarousel

Een eenvoudige maar zeer mooie afbeeldingsschuifregelaar.

Beeldstroom

Diavoorstelling met beelden die door de ruimte bewegen.

Interactief beeld

Een zeer interessante manier om een ​​interactieve productcatalogus te maken.

Jqfancy-overgangen
Fotosessie

Hiermee kunt u foto's maken van afzonderlijke delen van een afbeelding op een pagina. Klik op het gewenste deel van de afbeelding en bekijk het resultaat op het scherm.

Snel zand

Met de Quicksand-plug-in kunt u een reeks elementen sorteren en filteren met behulp van effecten van zeer hoge kwaliteit.

Contexttips voor uitschuifbare contexten

Deze plug-in zal zeer nuttig zijn voor het maken van gedetailleerde beschrijvingen van complexe objecten en interactieve rondleidingen wanneer dat nodig is, terwijl hij zo min mogelijk ruimte in beslag neemt om een ​​grote hoeveelheid informatie te bieden.

Schuifdozen

Met de plug-in Schuifdozen kunt u een ongebruikelijke dynamische galerij met afbeeldingen maken met bijschriften ervoor.

zoomer galerij

Een afbeeldingengalerij waarvan de elementen vrolijk verschijnen als je erover beweegt.

In dit artikel bekijken we de AJAX-snelkoppelingsmethoden van jQuery: laden, ophalen, getJSON, getScript en post. Deze methoden maken het zeer eenvoudig om de noodzakelijke AJAX-verzoeken uit te voeren en vereisen, in tegenstelling tot de ajax-functie, minder regels code om te schrijven.

jQuery - laadmethode

De laadmethode is ontworpen om gegevens van de server op een opgegeven URL op te halen en in een of meer geselecteerde elementen te plaatsen.

De laadmethode heeft de volgende syntaxis:

Load(url [,data] [,complete]) // parameters tussen vierkante haken zijn optioneel //url - een string met de URL waarnaar het verzoek moet worden verzonden //data (optionele parameter) - gegevens waarnaar moet worden verzonden de server (in string- of objectformaat) //complete – aanvullende acties die moeten worden uitgevoerd nadat het verzoek is voltooid (gespecificeerd met de functie Function(responseText, textStatus, xhr)) // responseText - serverrespons // textStatus - responsstatus // xhr - XMLHTTPRequest-object

In de meeste gevallen gebruikt de laadmethode GET om een ​​verzoek te verzenden. Maar het kan ook de POST-methode gebruiken. Dit gebeurt alleen als de gegevens die naar de server moeten worden verzonden, niet in stringformaat zijn opgegeven, maar via een object.

Voorbeelden van het gebruik van de laadmethode

1. Voeg de inhoud van het bestand asidenav.tpl in het blok in met id="asidenav" nadat de DOM van de pagina is geladen:

... // na het laden van de DOM van de pagina $(function() ( // plaats de inhoud van het asidenav.tpl-bestand in het element (#asidenav) // als het bestand niet in dezelfde map staat als de HTML document, dan moet u bovendien het pad naar hem opgeven $("#asidenav").load("asidenav.tpl");

2. Laad een deel van het demo.html-bestand in het element wanneer u op de knop daarin klikt:

Haal de inhoud van het bestand demo.html op ... $("#ajaxclick").click(function())( // laad een deel van het bestand demo.html (#content1) in het element id="content1" $ (deze).parent() .load("demo.html #content1" ));

Inhoud van het demo.html-bestand:

Bestand demo.html ... ...

3. Laad het antwoord content.php in het element met id="result" . Dit antwoord zal afhangen van de waarde van het data-content attribuut dat de knop heeft die het AJAX-verzoek naar de server heeft verzonden.

Inhoud laden 1 Inhoud laden 2 Inhoud laden 3 ... // wanneer u op een knop met de klasse klikt load-ajax-click $(".load-ajax-content").click(function())( // definieer de waarde van het data-attribuut -content var dataContent = $(this).attr("data-content"); vraag gegevens op uit het bestand met behulp van de data-content attribuutwaarde en voer deze uit naar het id="result" element if ( dataContent) ( $ ("#result").load("content.php","content="+dataContent) ));