anzeigenwerbung.net

JQuery

07.05.2012 @ 11:42, Nightfly85,

{{SEITENTITEL:jQuery}}
{{Infobox Software
| Name = jQuery
| Logo = 230px
| Hersteller = John Resig
| AktuelleVersion = 1.7.2
| AktuelleVersionFreigabeDatum = 23. März 2012
| Genre = Web application framework
| Programmiersprache = JavaScript
| Lizenz = Wahlweise:
GPL oder MIT
| Betriebssystem = plattformunabhängig
| Kategorie = Klassenbibliothek
| Sprache = Englisch
| Website = [http://jquery.com/ www.jquery.com]
| Beschreibung = JavaScript-Framework

}}

jQuery ist eine freie, umfangreiche JavaScript-Klassenbibliothek, welche komfortable Funktionen zur DOM-Manipulation und -Navigation zur Verfügung stellt. Die von John Resig entwickelte Klassenbibliothek wurde im Januar 2006 auf dem BarCamp (NYC) in New York veröffentlicht und wird laufend weiterentwickelt.

Verbreitung

Im September 2008 haben Microsoft und Nokia angekündigt, jQuery in ihren Produkten zu verwenden.{{cite web|url=http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/|title=jQuery, Microsoft, and Nokia|last=Resig|first=John|publisher=jQuery|date=2008-09-28|accessdate=2011-04-14}}

Microsoft hat jQuery in der Entwicklungsumgebung Visual Studio{{cite web|url=http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx|title=jQuery and Microsoft|last=Scott|first=Guthrie|date=2008-09-28|accessdate=2008-09-29}} in Verbindung mit dem ASP.NET MVC Framework und ASP.NET Ajax integrierthttp://download.microsoft.com/download/7/1/A/71A105A9-89D6-4201-9CC5-AD6A3B7E2F22/ASP_NET_4_and_Visual_Studio_2010_Web_Development_Overview.pdfhttp://msdn.microsoft.com/en-us/magazine/ee336135.aspx#MainContent und Nokia plant es in seine Web-Runtime-Plattform zu integrieren. jQuery wird in vielen Content-Management-Systems und Webframeworks bereits mitgeliefert (z.B. WordPress[http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_scripts_included_with_WordPress Nutzung von jQuery in WordPress] , MediaWiki[http://www.mediawiki.org/wiki/JQuery www.mediawiki.org/wiki/JQuery jQuery im MediaWiki] oder Drupalhttp://drupal.org/node/171213).

jQuery ist die meistverwendete JavaScript-Bibliothek,{{cite web|url=http://w3techs.com/technologies/overview/javascript_library/all|title=Usage of javascript libraries for websites|accessdate=2010-05-07}} fast 40 Prozent aller JavaScript-unterstützten Webseiten nutzen jQuery als Framework (Stand: April 2010).[http://t3n.de/news/jquery-javascript-nutzungszahlen-270720/ Webentwicklung: jQuery ist der Quasi-Standard in Sachen JavaScript] Rund 57 Prozent der 10.000 meistbesuchten Webseiten nutzen jQuery[http://trends.builtwith.com/javascript/JQuery jQuery Usage Statistics (english) auf buildwith.com]Stand: 28. April 2012.

Funktionen

jQuery beinhaltet folgende Funktionen:
* Elementselektion im Document Object Model über die Sizzle Selector Engine, die weitgehend den CSS-3-Selektoren entspricht
* Document Object Model-Manipulation
* Erweitertes Event-System
* Hilfsfunktionen wie zum Beispiel die each-Funktion
* Effekte und Animationen
* Ajax-Funktionalitäten

* Erweiterbarkeit durch zahlreiche freie Plug-ins, die bekannteste ist jQuery UI für Benutzeroberflächen

Benutzung

Die jQuery-Basisbibliothek besteht aus einer JavaScript-Datei, in der alle grundlegenden DOM-, Ereignis-, Effekt- und Ajax-Funktionen enthalten sind.

Um jQuery benutzen zu können, muss man es in eine HTML-Datei einbinden.

Typischerweise wird durch den Zugriff auf Objekte mit der $-Funktion oder, um Kompatibilitätsproblemen mit anderen Bibliotheken aus dem Weg zu gehen und eine bessere Lesbarkeit zu erreichen, mit der jQuery-Funktion ein jQuery-Objekt erzeugt. Ein jQuery-Objekt kann durch Fluent Interfaces an andere Funktionen übergeben werden.

Um mit mehreren Bibliotheken, die das $-Zeichen als Aufruf nutzen, arbeiten zu können, kann man dieses bei jQuery deaktivieren.

// gibt das $-Zeichen für andere Bibliotheken frei (kann auch mit der $-Notation aufgerufen werden)
jQuery.noConflict();

Eine typische Manipulation von DOM-Elementen beginnt mit der $- oder jQuery-Funktion, die mit einem Selektor aufgerufen wird. Zurückgegeben werden dann 0 oder mehrere DOM-Elemente, die dann direkt oder über jQuery-Methoden manipuliert werden können.
Beispiel:

$("div.test").add("p.quote").addClass("blue").slideDown("slow");
// oder auch
jQuery("div.test").add("p.quote").addClass("blue").slideDown("slow");

In diesem Beispiel werden alle div-Elemente mit der Klasse test und alle p-Elemente mit der Klasse quote selektiert. Dann wird jedem der gefundenen Elemente die Klasse blue hinzugefügt und es wird die slideDown-Animation darauf ausgeführt.

Mit Hilfe der $- und add-Funktion werden die gewünschten Elemente selektiert.

Mit der addClass-Funktion wird nun die CSS-Klasse den Elementen hinzugefügt. Die slideDown-Funktion führt dann die Animation aus, mit dem Parameter "slow" wird die Geschwindigkeit der Animation festgelegt.

Zusätzlich existieren globale Hilfsfunktionen. Diese können mit Hilfe des $-/jQuery-Objekts aufgerufen werden. In folgendem Skript-Beispiel wird die each-Funktion demonstriert:

var meinArray = [1, 2, 3];
$.each(meinArray, function() {
document.write(this + 1);
});

Dieses Beispiel schreibt 234 in das Dokument.

Ajax-Funktionalitäten können mit Hilfe von $.ajax oder auch jQuery.ajax aufgerufen werden, um Daten zu laden und Aktionen auszuführen, dabei werden die Parameter in einem JSON Objekt übergeben.
Beispiel:

$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

Dieses Beispiel ruft den URL some.php mit den Parametern name=John und location=Boston auf und gibt den Rückgabewert davon in einer Meldung aus.

Mithilfe von jQuery können den DOM-Elementen auch Aktionen hinzugefügt werden.
Beispiel:

$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

In diesem Beispiel wird nach Laden der DOM-Struktur jedem „a“-Element eine Funktion hinzugefügt, die beim Daraufklicken eine „Hello World!“-Messagebox ausgibt.

Der Vorteil dieser Umsetzung besteht darin, dass das Verhalten an einer zentralen Stelle gesteuert werden kann.

Der Name jQuery

Ursprünglich sollte die Bibliothek jSelect genannt werden. Da die Domain für diesen Namen schon vergeben war, entschied sich Entwickler John Resig für den Namen jQuery[http://ejohn.org/blog/barcampnyc-wrap-up/ Kommentar des Entwicklers John Resig].

Literatur

* Bibeault, Bear; Katz, Yehuda: jQuery in Action. 2nd edition. (28. Mai 2010). Manning, ISBN 1-93518-232-3
* Chaffer, Jonathan; Swedberg, Karl: Learning jQuery. Packt Publishing 2007, ISBN 1-84719-250-5
* Darie, Cristian: AJAX and PHP: Building Responsive Web Applications. Packt Publishing 2006, ISBN 1-904811-82-5
* Heilmann, Christian: Beginning JavaScript with DOM Scripting and Ajax. Apress 2006, ISBN 1-59059-680-3
* Heilmann, Christian: Web Development Solutions. Apress 2007, ISBN 1-59059-806-7
* Resig, John: Pro JavaScript Techniques. Apress 2006, ISBN 1-59059-727-3

* Steyer, Ralph: jQuery: Das neue JavaScript-Framework für interaktives Design. Addison-Wesley 2009, ISBN 978-3-8273-2887-8

Weblinks

* [http://jquery.com/ Offizielle Website] (Englisch)
* [http://docs.jquery.com/Main_Page Offizielle Dokumentation] (engl.)
* [http://docs.jquery.com/Tutorials#Tutorials_auf_Deutsch Deutsche Tutorialübersicht]
* [http://jquerymobile.com/ jQuery Mobile] (Englisch) - Touchoptimiertes Framework für Smartphones und Handhelds

* [http://www.1stwebdesigner.com/tutorials/53-jquery-tutorials-resources-tips-and-tricks-ultimate-collection/ Sammlung von Einführungen in jQuery (engl.)]

Einzelnachweise

{{SORTIERUNG:Jquery}}
Kategorie:Freies Webframework
Kategorie:Bibliothek (Programmierung)

Kategorie:ECMAScript

ar:جي كويري
bg:JQuery
ca:JQuery
cs:JQuery
JQuery
es:JQuery
eu:Jquery
fa:جی‌کوئری
fi:JQuery
JQuery
he:JQuery
hu:JQuery
id:JQuery
it:JQuery
ja:JQuery
ka:JQuery
ko:JQuery
ml:ജെക്വറി
mn:JQuery
nl:JQuery
no:JQuery
pl:JQuery
pt:JQuery
ro:JQuery
ru:JQuery
sk:JQuery
sv:Jquery
ta:யேகுவெரி
th:เจเควียรี
uk:JQuery
vi:JQuery
zh:JQuery

weiter