Netzwerkstatt.de
  – hier wird geschraubt

 

Willkommen

Werkstatt

JavaScript

jQuery

jQ: Einführung mit Firebug

jQ: Muster mit Firebug

jQ: Beispiele

NicEdit

Ereignisse

Dingsen

Js und Css

Tiddlywiki

Uhr

CSS

Bilderrahmen

Farbmeister

Silbentrennung

Inhalteverwaltung (CMS)

GD2

Fachwörter / Glossar

Meister

Sozialmathe

Herausgeber


 
Fahne Deutschland Fahne Norwegen Fahne UK GB Fahne Frankreich
Kurzanleitung für Feuerkäfer / Firebug

Firebug ist ein Stöpsel / plugin zum Feuerfuchs / Firefox von Mozilla.
Mittels des Feuerkäfers kann man sehr komfortabel auf das DOM (den inneren Seitenaufbau von HTML-Seiten) zugreifen.
Dieser Zugriff ist sowohl im HTML-Code wie auch über JavaScript (und damit jQuery) möglich.

A. Firebug einrichten:

http://getfirebug.com > Firebug 1.3 laden, der Anweisung folgen, Firefox neu starten.
Auf jeder Seite rechts unten ist ein Käfer-Symbol; durch Klicken wird der Feuerkäfer eingeschaltet.

B. Firebug nutzen:

Der Feuerkäfer hat 6 Karteikartenreiter (in der zweiten Zeile; die Unter-Karteikarten stehen idiotischerweise obendrüber):

1. 'Konsole'
1.1 Kommandozeile ganz unten mit >>>. Es können beliebige Js-Befehle ausgeführt werden; das ist sehr komfortabel zum Lernen und Entwickeln.
1.1a. Beispiel: Klicke auf 'Konsole', trage bei >>> ein:
alert('Hallo Welt') (=Zeilenschaltung)
1.1b. Trage ein:
window ;
Es erscheint eine Zeile
Window meinSeitentitel ,
durch Klicken faltet sich das gesamte DOM für diese Seite aus.

1.2 Zuordnung von HTML-Code und dargestellter Seite:
Klicke auf 'Konsole' und dann auf 'Untersuchen', fahre dann mit der Maus über die Seitendarstellung -- der zugehörige Quellcode wird angezeigt; klicke auf ein Element: die Quellcode-Anzeige rastet ein.

2. 'HTML'
HTML ändern -- das Ergebnis wird sofort angezeigt.

3. 'CSS'
CSS ändern -- das Ergebnis wird sofort angezeigt.

4. 'Skript'
Skripte im Lauf verfolgen

5. 'DOM'
Siehe z.B. 1.1b

6. 'Netzwerk'
Nachgeladene Skripte und Dateien sichtbar machen;
Ladedauer messen, falls die Seite schneckt.

C. Zusammenarbeit mit jQuery

Weil jQuery lupenreines JavaScript ist, kann es voll luxuriös in der Feuerkäfer-Kommandozeile ausgeführt werden. Die jQ-Bibliothek muß natürlich in der HTML-Datei geladen sein (siehe unten)

   

jQuery

jQuery ist eine JavaScript-Bibliothek.
Wenn ich sie nutzen will, binde ich z.B. folgende Zeile in die Seite ein:
<script type='text/javascript' src='mein/Pfad/zu/jquery.js'>
oder
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'>

jQuery kommt sehr objektig daher.
Ich gebe einige Anwendungsbeispiele:
$('*')     // ist die Menge aller Objekte (div, span, p, input, ...).
$('div')     // ist die Menge aller DIV-Objekte (DIV-Flächen).
$('div').css('border','#cc0000 dotted 3px')     // punktelt den Rand aller Divs;
$('div').css({'border': '2px #ff4400 dotted', 'background':'#ffdd00'})     // färbt auch noch den Hintergrund ein.
$('div.Flaeche').css('background':'#ddeeff')     // färbt nur diejenigen Divs ein, die die Css-Klasse 'Flaeche' haben, als z.B. <div id='Otto' class='Flaeche'>).
$('#Kasten1') wählt nur das eine Dingen aus, das 'Kasten1' heißt.

Ereignisse:

$('div').bind('dblclick', function(){$(alert('Es wurde doppelgeklickt in einem '' + this.tagName + '' mit Namen '' + this.id + '' und Klasse '' + this.className + ''. '));});

$('div').bind('click', function(){$('#Bericht').text('Es wurde geklickt in einem '' + this.tagName + '' mit Namen '' + this.id + '' und Klasse '' + this.className + ''.');})
$('div').bind('click', function(){$(this).text($(this).text() + ' KLICK. ');}); // Im geklickten Ding wird der Wortlaut 'KLICK.' angehängt.

... und rund 100 weitere Funktionen.

Außerdem:

Stöpsel / plugins

Auf http://plugins.jquery.com sind 2451 Stöpsel (plugins) in 20 Sachgruppen verzeichnet. Dies läßt vermuten, daß das Schreiben eines Stöpsels nicht gar so schwierig ist.

Zappelkram:

$('div').bind('click', function(){$(this).hide('slow');});
$('div').show('slow')

jQ-Nutzer-Schnittstelle / jQ UI
Allerlei Nützlichkeiten: Ziehen und ablegen, Größe verändern, ...
* Interactions: Draggable, Droppable, Resizable, Selectable, Sortable
* Widgets: Accordion, Datepicker, Dialog, Progressbar, Slider, Tabs // sehr schöne, nützliche Programmlein
* Der geniale Farbwähler: js/jQ/Farbtastic.demo1.html
* Effects: // noch mehr (mäßiger) Zappelkram

Handbuch

http://docs.jquery.com