15. Mai 2013
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.
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.
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.
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.