jQuery

Introductie

jQuery is een zeer veel gebruikte library (jquery.com) voor het ontwikkelen van rich interface applications met JavaScript en Ajax. jQuery zelf biedt niet zozeer de rich JavaScript componenten. Er zijn wel veel van deze componenten verkrijgbaar die jQuery als basis gebruiken. Zo zijn er jQuery UI (jqueryui.com) en jQuery EasyUI (jeasyui.com). Deze bevatten diverse widgets om i.s.m. jQuery te gebruiken. jQuery zelf bevat vooral de functionaliteit om DOM en CSS elementen te benaderen en bewerken en om Ajax calls naar de server uit te voeren en af te handelen. De kracht van jQuery zit in de transparantie van de DOM bewerkingen over de verschillende browser producten en versies heen. En erg belangrijk: er is ook een jQuery Mobile framework.

Het Library bestand

jQuery is een library die bestaat uit een gewoon tekstbestand met JavaScript code,
bijv jquery-1.8.2.js of jquery-1.8.2.min.js : te downloaden via jquery.com.
Om jQuery te gebruiken moet de library worden worden toegevoegd :

<script type="text/javascript" src="jquery-1.8.2.js"></script>

Hierbij gaan we er vanuit dat het jquery bestand lokaal op de website staat.
Het is ook mogelijk om te refereren naar een jquery bestand op een google site, bijv :

https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

De jQuery bronnen zijn beschikbaar in 2 formats:

  • Compressed : een stuk kleiner.
  • Uncompressed : goed voor debugging en een kijkje achter de schermen

De compressed vorm heeft de toevoeging “.min.” in de naam.

jQuery gebruiken

jQuery kan events definiëren en er kunnen, los van events, effecten worden uitgevoerd.
De effecten kunnen uiteraard ook binnen de events worden uitgevoerd maar dat hoeft niet.
Een stukje script in een pagina kan ook een jQuery functie aanroepen om een effect te maken.
Het definiëren van jQuery events wordt gestart met een standaard stukje JavaScipt wat wordt gehangen aan het “ready” event van de pagina. Omdat nagenoeg alle jQuery acties bewerkingen zijn op de DOM elementen van een pagina, moet het zeker zijn dat de pagina helemaal is geladen. Onderstaand stukje code is het startpunt voor jQuery event definities:

$(document).ready(function() {
   // verdere jQuery acties als DOM gereed
 });

In onderstaande code wordt een event gedefinieerd binnen <script> tags in de pagina zelf:

<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>

<script>
$("button").click(function () {
   $("p").toggle();
});
</script>

jQuery DOM referenties : $()

jQuery bewerkt vooral DOM elementen en refereert naar deze elementen met $() notatie.
Bijv. $(document) of $(“css-ref”). In het laatste geval wordt tussen quotes een referentie conform CSS standaarden gebruikt. Dus element (bijv “h1”, “div”, “a”, ,..) of een class (“.myclass”) of een element id ( “#myid”). Zie voor meer toelichting op CSS referenties het artikel CSS Introductie.

Dus als we bijv. een een HTML page hebben met een <a> hyperlink element:

<a href="">Link</a>

Dan kunnen we deze als volgt benaderen binnen de ready event function :

$(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });

In dit geval wordt aan de click event van alle links een function met alert gehangen.

Locatie jQuery(document).ready(function() {}

Het startpunt “jQuery(document).ready(function() {}” voor events kan meerdere keren op verschillende plaatsen worden gedefinieerd. Zo kan deze in een specifieke menu.js zitten voor het menu specifieke gedrag. Aanvullend kan deze per pagina in scipt tags het ready() event zetten voor pagina specifiek gedrag.
Of de pagina’s maken aanvullend gebruik van een common.js voor generiek gebruik.
Daarmee is het dus niet nodig om alle jQuery code op een plaats te zetten.

Verder kun je in een pagina ook met het script tag in de body events toevoegen. In onderstaande code wordt een event gedefinieerd binnen script tags in de pagina zelf:

<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>

<script>
$("button").click(function () {
$("p").toggle();
});
</script>

jQuery Events

Een van de belangrijkste toepassingen betreft het definiëren van events die gedrag afhandelen van events die een gebruiker van een pagina veroorzaakt door met de muis elementen aan te klikken of hierover heen te bewegen. De events worden afgevangen door deze te definiëren voor het element via de $(selector) en vervolgens het event er aan te koppelen, bijv $(selector).click();
Als parameter van het event wordt vervolgens een functie() meegegeven met het uit te voeren gedrag.

In het volgende voorbeeld komen 2 verschillende (geneste) events voor:

jQuery(document).ready(function() {
  $('.toplevel li').hover(
    function () {
      $('.sublevel', this).show();
    },
    function () {
      $('.sublevel', this).hide();
    }
  );
});

In het voorbeeld zien we :

  • het ready() event op het document object zelf. De implementatie is een functie die een nieuw event “hover()” definieert.
  • Het hover() event op li elementen. De implementatie zijn 2 functies die resp. een show() en een hide() functie uitvoeren op een class “sublevel”.

Voorbeeld events

  • click(), dblclick() : het klikken, dubbelklikken op een element. Een klik is een mousedown (inklik) en mouseup (uitklik) combinatie
  • submit() : submit van een form, bijv. als gevolg van een klik op een submit element.
  • focus() : het met muis of tab binnengaan van een (form) element (input, select) of link.
  • blur() : het verlaten van de focus van een element door tab of muisklik op ander element
  • mouseover() : het met de muis pointer over een element gaan
  • mouseout() : het met de muis pointer verlaten van een element
  • mousedown() : het met de muis pointer een element inklikken.
  • mouseup() : het met de muis pointer een element uitklikken.
  • hover() : koppelt 2 handlers : het met de muis binnengaan en weer verlaten
  • select() : het selecteren van een tekst in een input of textarea element
  • change() : het wijzigen van een (input) element. Bij checkbox, radiobutton direct als de klik plaatsvindt. Bij text en textarea pas als de focus is verdwenen.
  • resize() : het resizen van de browser window : $(window).resize().
  • scroll() : het scrollen van elementen of browser window $(‘elem’).scroll() , $(window).scroll().

jQuery Effecten

In het eerder beschreven voorbeeld komen 2 verschillende effecten voor:

jQuery(document).ready(function() {
  $('.toplevel li').hover(
    function () {
      $('.sublevel', this).show();
    },
    function () {
      $('.sublevel', this).hide();
    }
  );
});

In het voorbeeld zien we :

  • het show() event op op de sublevel class. Die maakt het element zichtbaar.
  • het hide() event op op de sublevel class. Die maakt het element onzichtbaar.

Voorbeeld effecten:

  • show() : maakt een element zichtbaar
  • hide() : maakt een element onzichtbaar
  • toggle() : wijzigt element per klik. Zonder argument wordt zichtbaarheid gewijzigd. Met argumenten wordt dit bepaalt door de argumenten.
  • fadeIn() : maak langzaam zichtbaar
  • fadeOut() : maak langzaam onzichtbaar
  • fadeToggle() : langzame versie van toggle().
  • slideDown() : maakt een element (bijv. picture) langzaam zichtbaar van boven naar beneden
  • slideUp() : maakt een element (bijv. picture) langzaam zichtbaar van beneden naar boven
  • slideToggle() : toggle versie van slide

Voorbeeld toggle:
In onderstaande code wordt beurteling de 1e en de 2e <p> element zichtbaar en onzichtbaar gemaakt. Initieel is het ene <p> element onzichtbaar gemaakt.

<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>

<script>
$("button").click(function () {
$("p").toggle();
});
</script>

Lezen / Aanpassen van HTML elementen:

  • text() : leest / schrijft de text inhoud van een element.
  • html() : leest / schrijft de html inhoud van een element
  • val() : leest / schrijft de waarde van een form element
  • attr(attribute name, “value”) : leest / schrijft de waarde van het aangegeven attribuut

Bijv. van een element

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

leest

$(“#test”).text() de string zonder html markup elementen
$(“#test”).html() de string met html markup elementen

schrijft

$(“#test”).text(“Hallo”) de string zonder html markup elementen
$(“#test”).html(“<b>Hallo</b>”) de string met html markup elementen

Bijv. van het element :

<input type="text" id="test" value="Mickey Mouse">

leest

	$("#test").val() //de ingevulde tekst in het veld : "Mickey Mouse"

schrijft

	$("#test").val(“Hallo”) //de ingevuld tekst in het veld

Toevoegen / Verwijderen HTML elementen

  • .append() : voegt content toe aan het eind van de geselecteerde elementen
  • .prepend() : voegt content toe aan het begin van de geselecteerde elementen
  • .after() : voegt content toe achter de geselecteerde elementen
  • .before() : voegt content toe voor de geselecteerde elementen
  • .remove() : verwijdert het element (incl. kind elementen)
  • .empty() : verwijdert de kind elementen van een element

append en prepend worden gebruikt om bijv. een <li> element toe te voegen aan een <ul> element.
after en before zullen in dat geval het nieuwe item geheel voor het <ul> resp achter het </ul> element plaatsen

Aanpassen element dimensies

  • height() : Leest / schrijft de hoogte van elementen
  • width() : Leest / schrijft de breedte van elementen
  • innerHeight() : Leest de hoogte van een element (incl padding, zonder border)
  • innerWidth() : Leest de breedte van een element (incl padding, zonder border)
  • outerHeight() : Leest de hoogte van een element (incl padding en border)
  • outerWidth() : Leest de breedte van een element (incl padding en border)

CSS Manipulatie

  • .addClass() : voegt een class toe aan een element
  • .removeClass() : verwijdert een class van een element
  • .toggleClass() : toggelt tussen verwijderen / toevoegen van een class
  • .css() : schrijft / leest het style attribuut van een element

jQuery en Ajax

De volgende call laadt data van een server, en plaatst deze in een element:

.load(URL,data,callback) :

URL : de server url waar het request naar toe gaat
data : optioneel : de data die meegezonden moet worden
callback: de naam van de functie die uitgevoerd moet worden na terugkeer van het request

bijv.

$("div").load('test1.txt');

Dit zal het bestand test1.txt lezen en de inhoud in het div element plaatsen.

De volgende call is de uitgebreidere ajax versie.

.ajax()

bijv.

  $.ajax({url:"test1.txt",success:function(result){
    $("div").html(result);
  }});

Onderstaand voorbeeld roept een REST webservice url aan en krijgt JSON resultaat terug.
De ontvangen lijst wordt met een .each() functie doorlopen, waarbij voor elk item een option element wordt aangemaakt binnen een bestaande combo box.
De combo box is :

<select id = "cboDepartments" name = "cboDepartments"></select>
        $.ajax(
            {
                type: "GET",
                url: 'http://localhost:8082/JEE62/emp/list',
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                	//alert('data received : ' + data.Employee[0].firstName);
                    $.each(data.Employee, function (i, item) {
                        var combo = document.getElementById("cboEmployees");
                        var option = document.createElement("option");

                        $("#ulist").append('<li id="' + i + '">' + item.firstName + ' ' + item.lastName + '</li>');

                        option.text = item.firstName + ' ' + item.lastName;
                        option.value = item.firstName + ' ' + item.lastName;
                        try {
                            combo.add(option, null); // Other browsers
                        }
                        catch (error) {
                            alert('error found');
                            combo.add(option); // really old browser
                        }
                    });
                },
                error: function (msg, url, line) {
                    alert('error trapped in error: function(msg, url, line)');
                    alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);

                }
            });

This entry was posted in JavaScript and tagged , . Bookmark the permalink.

Geef een reactie

Je e-mailadres wordt niet gepubliceerd.

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>