Zur Machart Studios Website
Back to top

Mit jQuery den DOM manipulieren ohne programmieren zu können

Zugegeben, das mit dem Programmieren ist Definitionssache. Denn ich setze hier schon voraus, dass der Webdesigner mit CSS und HTML umgehen kann und Firebug nutzt. Ebenso natürlich weiß, wie man JavaScripts einfügt und ein bisschen etwas von jQuery (als unterstützende Bibliothek) versteht. Mehr braucht man für das Tutorial nicht.

Es geht los mit jQuery

Als erstes brauchen wir jQuery selbst, diesmal google gehostet:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

Der Code kommt in den <head> vor andere JavaScripts. Natürlich kann jQuery auch auf dem eigenen Server gehostet werden.

Die HTML-CSS-Basis

Dann brauchen wir natürlich erstmal unser HTML und CSS, dass wir dann manipulieren können. Stellen wir uns vor, wir haben ein Content Management System, dass eine <ul><li>… Menunavigation ausgibt und sich dies auch nicht ändern lässt.

Unser Copytext…

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<style>
	header{
		float:left; 
		width:100%;
		background:#fff;
	}
	header li{
		float:left; 
		width:90px;
		border-right:1px solid #ccc;
		text-align:center;
	}
	.logo{
		padding:10px;
		margin:10px;
		background:#ccc;
	}
	.ContentofPageId_88{
		float:left; 
		width:100%;
		background:#ccc; 
		padding:10px 0;
		text-indent:10px;
		color:#333;
	}
</style>
<header> 
  <a href="#/" class="logo">Logo</a>
  <ul>
    <li><a href="#menu1">Motorroller</a></li>
    <li><a href="#menu2">Rasenmäher</a></li>
    <li><a href="#menu3">Pocketbikes</a></li>
    <li><a href="#menu4">RC-Racing</a></li>
    <li><a href="#menu5">Kontakt</a></li>
  </ul>
</header>
<div class="ContentofPageId_88">
  <p>Unser Copytext...</p>
</div>

Diesen Code manipulieren wir nun mit den einfachsten jQuery Funktionen. Ich lasse hier alle Codes auf das Resultat ganz unten los.

ready();

Damit beginnt fast jedes jQuery. Die Funktion „document ready“ umschließt den eigenen Code damit er erst ausgeführt wird, wenn der DOM vollständig geladen ist. Damit ist nicht gemeint, dass Bilder schon geladen wurden. Gemeint ist einfach, dass das HTML schon geladen ist, damit wir nicht zu früh mit unserem Code angreifen.

$(document).ready(function() {
   // Hier kommt der Code von uns rein
});

append(); und prepend();

Mit den beiden Funktionen können wir in einem HTML-Element Code ganz am Anfang oder ganz am Ende hinzufügen. Das brauchen wir um in der nicht mehr beeinflussbaren Navigation unseres CMS einen Link zu Home hinzufügen zu können.

$(document).ready(function() {
   $('header ul').prepend('<li><a href="#/">Home</a></li>');
});

html();

Mit der Funktion html(); können wir nun den Inhalt unseres Logos anpassen.

$(document).ready(function() {
   $('header a.logo').html('Firmenname');
});

css();

Wenn wir nun unser Logo mit einem dunklen Hintergrund anzeigen wollen, könnten wir dies per CSS erledigen. Aber auch per jQuery ist das möglich.

$(document).ready(function() {
   $('header a.logo').css('background','#333');
});

attr();

Nun wollen wir im Copytext noch zusätzlich den Hinweis unterbringen, welche Farbe das Logo hat.

$(document).ready(function() {
   var farbe = $('header a.logo').attr('style');
   $('.ContentofPageId_88 p').append(farbe);
});

Unser Copytext…

Taaaadaa – so einfach funktioniert dann schon das Ganze.

Von Eduard Weber

Ein Machart-Macher mit ungestilltem Tatendrang, dazu voll Herz, Tiefe, Mut und Laune. Als gelernter Mediengestalter und Vollblutwerber im positiven Sinn, arbeitet er effizient und kundenorientiert. Kundenzufriedenheit ist eben das A und O für ihn. Eduard Weber ist zuständig für die strategische und kreative Kundenberatung, der seine Fäden im ganzen WorldWideWeb spinnt. Eduard Weber bei Google+

3 Kommentare

  1. 14. Mai 2013 hakan yilmaz Antworten

    Hi Eduard,
    hier meine konstruktive Kritik:

    – müsste es in der Überschrift nicht „das“ DOM (Document Object Model) heißen?
    – in deinem Code fehlt das Protokoll (zB http:) zum jQuery Framework
    – desweiteren schreibt man heutzutage keinen Script Aufruf mehr in den Header der Seite, sondern ans Ende

    Liebe Grüße aus Köln.

  2. 14. Mai 2013 Eduard Weber Antworten

    Hi Hakan,

    ja, könnte sein, dass es das DOM heißt…. genau gesagt habe ich den Beitrag aber aus Versehen gepostet und war damit noch garnicht fertig Oo…
    Nein, das Protokoll fehlt nicht. Das hat den Vorteil, dass SSL auch funktioniert ohne https direkt anzugeben. Das kann jeder selbst für sich und das Projekt entscheiden. Auch gehört meiner Meinung nach kein Code ans Seitenende. Das hat ja mit jQuery auch gar keinen Effekt mehr. Denn die domready Funktion macht ja genau das. Sie führt das Script erst aus wenn „das“ DOM fertig ist. Somit gibt es in meinen Augen keine Gründe dafür, dass der Code von diesem Artikel in den Footer gehört (es gibt auch Fälle in denen das Sinn macht, keine Frage) da ich hier nur Basic-jQuery Funktionen erleutere, die alle in das domready gehören.

  3. 17. Mai 2013 Manuel Bachl Antworten

    Scripte landen heutzutage doch nur am Seitenende wegen der Ladezeiten… geladen werden muss die Geschichte in jedem Fall. Wenn man sich mit $(document).ready(function({}); was bastelt spielt es in keiner Weise eine Rolle wo und wann das Script tatsächlich geladen wird. Bei riesig großen Seiten macht es natürlich schon Sinn, die Scripte erst nach dem (?) DOM zu laden, wobei ich hier fast eher darüber nachdenken würde wie ich die Ladezeiten im Allgemeinen reduzieren kann. Wenn meine Skripte ladeintensiver sind als meine Bilder habe ich wahrscheinlich irgendwas falsch gemacht.
    Ach ja, wer seine Scripte erst ausführen möchte, wenn auch die Bilder fertig geladen sind, dem sei kurz notiert:
    $(window).load(function({}); statt $(document).ready(function({}); verwenden, dann wartet jQuery bis alle inhalte komplett fertig geladen wurden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Machart Studios Werbeagentur