Webtechnologien Wintersemester 2024

jQuery

  • freie JavaScript-Bilbiothek (Werkzeugsammlung)
  • DOM-Navigation, -Manipulierung, Animation, Events, Helfer (each), Ajax
  • nivelliert Browser-Unterschiede und -Fehler
  • 2006 von John Resig veröffentlicht
  • Meistverwendete Bibliothek: Drei Viertel der Top 10k nutzen sie
  • Reichhaltiges Plugin-Ökosystem

Traversieren

$('#id .klasse element[attr]:special-jquery-stuff');

$('#container .panel h1:first');

$('.panel').find('h1').parent().eq(2).next().each(function(index) {
   console.log( index + ': ' + $(this).text() );
});
  • Fluent Interfaces / Chaining

Manipulieren

$('#id .klasse element[attr]:special-jquery-stuff');

$('#container .panel h1:first').css('color', 'red');

$('.panel').toggleClass('active').empty().html('Stille');

Events

$('.btn').on('click', function(e) {
   if (Math.random() > 0.5) {
      e.preventDefault();
      $('input').val('')
      alert('Hupsi ...');
   }
});

$('.message').on('keyup', 'input', function(e) {
   $('.counter').html(this.value.length + ' Zeichen');
});
  • Event-Delegation: Ausnutzen des Event-Bubblings, indem von höher gelegenem Element Events seiner Kinder überwacht werden
  • Ganz toll, wenn dynamisch Elemente hinzugefügt, weil höher gelegener Listener diese automatisch mit überwacht

Effekte

$('input').on('keyup', function(e) {
   if (this.value === 'sesam öffne dich')
     $('.sesam').slideDown(1000).delay(3000).fadeOut(1000);
});

$('input').on('keydown', function(e) {
   if (this.value === 'swoosh')
      $('.sesam').animate({
         width: ['toggle', 'swing'],
         height: ['toggle', 'swing'],
         opacity: 'toggle'
      }, 2000);
});

Ajax mit jQuery

jQuery.ajax( url, settings );

jQuery.post( url, data, success(data, textStatus, jqXHR), dataType );
jQuery.get( url, data, success(data, textStatus, jqXHR), dataType );

jQuery.getJSON( url, data, success( data, textStatus, jqXHR ) );
jQuery.getScript( url, success(script, textStatus, jqXHR) );

$('.element').load(
   url, data, complete(responseText, textStatus, XMLHttpRequest)
);

jQuery: ajax

$.ajax({
   url: 'api/createUser.php',
   data: {
      name: user.name,
      age: 42,
   },
   datatype: 'json',
   type: 'POST',
   success: function(data) {
      console.log('Response', data);
   }
});

jQuery: get und post

Kurzformen von $.ajax() für HTTP GET und POST.

$.get('ajax/test.html', function(data) {
   $('.result').html(data);
});

$.get( 'test.php', { name: 'John', time: '2pm' } );

$.post('ajax/test.html', function(data) { $('.result').html(data); });

$.post( 'test.php', $( '#testform' ).serialize() );

jQuery: getJSON

// Kurzform von
$.ajax({ dataType: 'json', url: url, data: data, success: success });

// url + '?callback=funktionsName' → JSONP
$.getJSON('ajax/options.json', function(data) {
   var options = ';
   $.each(data, function(key, val) {
      options += '<option value="' + key + '">' + val + '</option>';
   });
   $('.dropdown').html(options);
});
// options.json: { 'one': 'Einer', 'two': 'Zwei', 'three': 'Drei' }

jQuery: Ajax Promises

Load JSON-encoded data from the server using a GET HTTP request.

var jqxhr = $.get('example.php', function() {
   alert('success');
})
.done(function() { alert('second success'); })
.fail(function() { alert('error'); })
.always(function() { alert('finished'); });

// ... andere Answeisugen ...
jqxhr.always(function() { alert('second finished'); });