Wer nutzt JQuery?<\/h3>\n
Vorwiegend Web-Entwickler, die auf einer etwas niedrigeren Ebene ein Javascript-Framework ben\u00f6tigen. JQuery ist kein High-Level-Framework mit WYSIWYG-Editor.<\/p>\n
Moderne AJAX\/DHTML-Webanwendungen nutzen immer h\u00e4ufiger High-Level-Frameworks wie GWT, ASP.NET<\/a>, JSF usw… Man ben\u00f6tigt 2 Dinge um mit JQuery zu beginnen<\/p>\n Hierf\u00fcr f\u00fcgen wir zwischen die HEAD-Tags des HTML-Dokuments die folgenden Skripte hinzu:<\/p>\n Hierf\u00fcr gibt es 3 M\u00f6glichkeiten<\/u><\/p>\n 1. Vollst\u00e4ndig:<\/em><\/p>\n 2. Mit $ als Alias f\u00fcr die jQuery-Klasse<\/em><\/p>\n 3. Kurzform:<\/em><\/p>\n Die READY-Methode ist das erste Event, was auftreten kann. Das Ereignis tritt ein, wenn auf das DOM zugegriffen werden kann. Ein ALERT-Fenster in dieser Methode aufzurufen macht nicht viel Sinn, da es nicht notwendig ist auf das geladene DOM zugreifen zu m\u00fcssen. Dies k\u00f6nnte auch fr\u00fcher passieren.<\/p>\n Beim DOM handelt es sich um ein Modell, welches den Zugriff auf Elemente, Teilb\u00e4ume oder Teil-XML-Strukturen erlaubt. Grunds\u00e4tzlich sieht das DOM eine HTML-Dokumentes mit einer Tabelle folgenderma\u00dfen aus:<\/p>\n Bei den Beispielen werde ich nur noch die Kurzform der READY-Methode nutzen.<\/p>\n Wer den obigen Code bereits versteht, hat auch das Selektions-Konzept von JQuery verstanden.<\/p>\n Der erste Aufruf ist immer eine Selektion auf das DOM\/HTML-Dokument. Mit $(„a“) (alternativ auch jQuery(„a“) ) wurden alle Man kann grunds\u00e4tzlich alle Doch was gibt es f\u00fcr M\u00f6glichkeiten der Selektion?<\/p>\n Oberfl\u00e4chlich gesehen gibt es 2 M\u00f6glichkeiten…<\/p>\n Die Raute # sagt der Selektion, das sie ein Attribut id=“..“ suchen soll. Die Selektion beinhaltet dann das Element (z.B. ein DIV). Hier wird diesem DIV die CSS-Klasse .red zugewiesen.<\/p>\n Beispiel: Unter Verwendung vom HOVER-Event, welches 2 Parameter onMouseOver\/onMouseOut als „functions“ \u00fcbergeben bekommt, wird ein Mouse-Over-Event auf alle letzten Zeilen aller Tabellen gelegt. F\u00e4hrt man mit der Maus dr\u00fcber nimmt dieses die Farben\/Styles an, die in der CSS-Klasse .green definiert wurden. Ist die Maus wieder au\u00dferhalb der Zeile wird die Klasse entfernt.<\/p>\n<\/dd>\n -Tags, die ein Class-Attribut haben<\/dt>\n Selektiert alle p-Tags im Dokument, die ein Attribut f\u00fcr eine CSS-Klasse vorgegeben haben class=“…“ und versteckt diese.<\/p>\n<\/dd>\n -Tag einer Seite<\/dt>\n -Tags mit einer CSS-Klasse „foo“, die einen Link haben<\/dt>\n Selektionen nach Stylesheet folgen der Syntax<\/p>\n wobei E ein HTML-Element\/HTML-Tag bezeichnet.<\/p>\n -Element als einziges Kind-Element seines Eltern-Tags<\/dt>\n -Tag als letztes Kind-Element seines Eltern-Elements<\/dt>\n … z.B. bei der Suche nach Attributen<\/p>\n -Tags dessen Attribut „foo“ mit „bar“ beginnt<\/dt>\n -Tags dessen Attribut „foo“ mit „bar“ endet<\/dt>\n … will be continued (Fortsetzung folgt…)<\/p>\n
\nDiese Frameworks bieten UI-Komponenten (z.B. Kalender, Tabellen mit DB-Anbindung, B\u00e4ume…) an, die herk\u00f6mmlichen HTML-Seiten durch simples „Draufziehen“ (in einem WYSIWYG-Editor) oder Instanzierung neuer Teile (z.B. in einem UI-Composite-Pattern) die F\u00e4higkeit verleiht sich durch Nutzerinteraktion (z.B. Mausklicks, Tastatureingaben…) zu ver\u00e4ndern, ohne die Seite komplett neu zu laden (AJAX\/DHTML).
\nHierbei findet im Hintergrund eine DOM-Manipulation statt (h\u00e4ufig per AJAX – hier werden z.B. asynchron Abschnitte aus der Datenbank nachgeladen). Der Browser zuckt dabei nicht\/Die Seite verschwindet bei einem Klick nicht kurz. Wenn man solche Komponenten selber entwickelt, ist JQuery eine ausgezeichnete Erweiterung zu herk\u00f6mmlichen Javascript-Funktionen.
\nMicrosoft hat in seiner IDE Visual Studio JQuery integriert<\/a> und verwendet es bei der Entwicklung von Drag-And-Drop-UI-Komponenten. Aus diesem Grund ist ein Zugriff in Visual Studio auf die Funktionen m\u00f6glich.<\/p>\nTutorial<\/h1>\n
Zu Beginn…<\/h3>\n
\n
…JQuery erm\u00f6glichen…<\/h3>\n
\r\n<script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.5\/jquery.min.js">\/\/ <![CDATA[\r\n \r\n\/\/ ]]><\/script><script type="text\/javascript">\/\/ <![CDATA[\r\n \r\n\t\/\/ Hier kommt die READY-Methode (s.u.) hin \r\n \r\n\/\/ ]]><\/script>Hello World<\/pre>\n
… und die Ready-Methode implementieren<\/h3>\n
\r\njQuery(document).ready(function() {\r\n \/\/ Code hier einf\u00fcgen\r\n})\r\n<\/pre>\n\r\n$(document).ready(function() {\r\n \/\/ Code hier einf\u00fcgen\r\n})\r\n<\/pre>\n\r\n$(function() {\r\n \/\/ Code hier einf\u00fcgen\r\n})\r\n<\/pre>\nEinschub: Was ist DOM?<\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2011\/10\/Zeichnung1.jpg?resize=454%2C241&ssl=1\" "\\"Zeichnung1\\"")
<\/p>\nVerwendung des Selektions-Teils f\u00fcr den DOM<\/h3>\n
\r\n$(function() {\r\n \/\/ W\u00e4hle alle <a>-Tags aus und definiere ein CLICK-Ereignis\r\n $("a").click(function(event){\r\n \/\/ wird bei jedem klick auf einen Link aufgerufen\r\n alert('Hello JQuery!');\r\n\r\n \/\/ verhindert das Aufrufen des in Link-Zieles\r\n event.preventDefault();\r\n });\r\n});\r\n<\/a><\/pre>\n<\/code>-Tags im gesamten HTML-Dokument ausgew\u00e4hlt. Das Anh\u00e4ngen von .click h\u00e4ngt dann an die Selektion (also alle Links, bzw. <\/code>-Tags) ein onClick-Ereignis, welches ein ALERT-Fenster \u00f6ffnet. Die Methode preventDefault() des Event-Objektes verhindert das Standardverhalten des Links, n\u00e4mlich den Aufruf der Seite. Somit k\u00f6nnte man f\u00fcr alle Links die Zielseite \u00e4ndern oder abfangen. Der Funktionsk\u00f6rper function() deklariert eine anonyme, namenlose Methode die ausgef\u00fchrt wird, wenn das onClick-Ereignis des Links (also des <\/code>-Tags) aufgerufen wird.<\/p>\n<\/code>– oder XML-Tags eines „Baumes“ (n\u00e4mlich dem DOM) selektieren.<\/p>\n\n
Selektion …<\/h3>\n
\n
\n<\/code><\/p>\n\u00a0<\/code> aller Tabellen eines Dokumentes<\/dt>\n
\n<\/code>-Element aller Tabelle eines Dokumentes<\/dt>\n<\/code>-Tags die unter einem <\/code>-Tag sind<\/dt>\n<\/code>-Tags mit einem Link mit dem Text „Register“<\/dt>\n<\/code>-Tags mit dem Name „bar“<\/dt>\nCSS Selektoren<\/h3>\n
E:STYLE<\/code><\/p>\n\n
Mit regul\u00e4ren Vergleichsoperatoren…<\/h3>\n
\n
<\/code>-Tags, in deren href-Attribut der String \/content\/gallery vorkommt<\/dt>\n