jQuery Snippets

Nachfolgend ein paar sehr hilfreiche jQuery-Snippets, die den täglichen Alltag des Webdevelopers streßfreier gestalten können. Demnächst mehr!


Zebrastreifen für ungeordnete Listen oder Tabellen

Der nachfolgende Code fügt jedem ungeraden Element die Klasse „ungerade“ hinzu:

?View Code JAVASCRIPT
1
2
$("tr:odd").addClass("ungerade");
$("li:odd").addClass("ungerade");


Externe Links automatisch in einem neuen Fenster öffnen

Bisher hat man das gerne über die Vergabe des Zieles „_blank“ gemacht, das ist unter XHMTL Strict aber nicht mehr erlaubt. jQuery bietet eine Lösung, die das Öffnen jedes externen Links in einem neuen Fenster (Tab) erzwingt:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
$('a').each(function() {
 var a = new RegExp('/' + [removed].host + '/');
 if(!a.test(this.href)) {
  $(this).click(function(event) {
   event.preventDefault();
   event.stopPropagation();
   window.open(this.href, '_blank');
  });
 }
});


Feststellen, ob ein Element existiert

Hin und wieder ist es hilfreich, festzustellen, ob ein bestimmtes Element überhaupt existiert, beispielsweise weil es durch ein Script erzeugt wird.

?View Code JAVASCRIPT
1
2
3
if ($("#elementid").length) {
     //existiert!
}


Eine Aktion für alle Elemente einer Klasse durchführen

Möchte man eine Aktion für alle Elemente, die dieselbe Klasse besitzen durchführen, dann ist das wie folgt möglich:

?View Code JAVASCRIPT
1
2
3
$('.eineklasse').each(function() {
  //Eigener Code
});


Browser-Erkennung

Das Erkennen des vom Besucher genutzten Browsers bringt einen in vielen Fällen mit Kompatibilitäts-Problemen natürlich schonmal einen gewaltigen Schritt weiter.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
if ($.browser.msie){
  //es handelt sich um den Microsoft Internet Explorer
}
if ($.browser.opera){
  //da haben wir es offensichtlich mit Opera zu tun
}
if($.browser.webkit) {
  //der Browser ist Webkit-basiert
  //alternativ geht auch noch $.browser.safari
  //das ist aber als veraltet (deprecated) gekennzeichnet
}
if($.browser.mozilla &&; $.browser.version >= '3.0') {
  //Mozilla Firefox in einer Version größer oder gleich 3.0
}
if($.browser.msie && $.browser.version > 6) {
  //Internet Explorer in einer Version größer 6, damit kann man leben
}
if($.browser.msie && $.browser.version < 7) {
  //Internet Explorer in einer Version kleiner als 7, igitt!
}

Keinen verwandten Inhalt gefunden.

Ihnen hat dieser Artikel gefallen oder geholfen? Prima! Dann denken Sie doch an mich, wenn Sie eine Webseite benötigen!

Dieser Eintrag wurde veröffentlicht in jQuery und getagged , , , . Bookmarken: Permanent-Link. Kommentieren oder ein Trackback hinterlassen: Trackback-URL.

Ein Kommentar

  1. Erstellt am 16. November 2011 um 12:02 | Permanent-Link

    Super Snippets! Insbesondere für die Browser. Alternativ verwende ich jedoch diesen Snippet meist: http://www.monkey-business.biz/2503/jquery-externe-links-in-neuem-fenster-tab-offnen/

Ihr Kommentar

Ihre E-Mail-Adresse wird niemals veröffentlicht oder verteilt.

Du kannst diese HTML Tags und Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Time limit is exhausted. Please reload CAPTCHA.

Durch die weitere Nutzung der Seite stimmen Sie der Verwendung von Cookies und eingebundenen Skripten zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn Sie diese Website ohne Änderung der Cookie-Einstellungen verwenden (Navigation) oder auf "Akzeptieren" klickst, erklären Sie sich damit einverstanden. Dann können auch Cookies von Drittanbietern wie Youtube oder Google gesetzt werden. Wenn Sie das nicht wollen, sollten Sie entweder nicht auf "Akzeptieren" klicken und die Seite nicht weiter nutzen, oder Ihren Browser im Inkognito-Modus betreiben, und/oder Anti-Tracking- und Scriptblocker-Plugins nutzen.

Mit einem Klick auf "Akzeptieren" werden zudem extern gehostete Javascripte freigeschaltet, die weitere Informationen, wie beispielsweise die IP-Adresse an Dritte weitergeben können. Welche Informationen das genau sind liegt nicht im Einflussbereich des Betreibers dieser Seite, das bitte bei den Anbietern (jQuery, Google, Youtube, Amazon, Twitter *) erfragen. Wer das nicht möchte, klickt nicht auf "akzeptieren" und verlässt die Seite.

Wer wer seine Identität im Web schützen will, nutzt Browser-Erweiterungen wie beispielsweise uBlock Origin oder ScriptBlock und kann dann Skripte und Tracking gezielt zulassen oder eben unterbinden.

* genauer: eingebettete Tweets, eingebundene jQuery-Bibliotheken, Amazon Artikel-Widgets, Youtube-Videos, Vimeo-Videos

Schließen