Wissensarchiv für Entwickler jquery https://www.wissensarchiv.org/ 2026-04-13T02:33:49+02:00 Wissensarchiv für Entwickler https://www.wissensarchiv.org/ https://www.wissensarchiv.org/ttps://www.wissensarchiv.org/lib/tpl/dokuwiki/images/favicon.ico text/html 2020-09-25T15:45:21+02:00 jquery:agb https://www.wissensarchiv.org/doku.php?id=jquery:agb&rev=1601041521&do=diff Zeitpunkt der Akzeptierung der AGB's festhalten Um auf der Rechtssicheren Seite zu sein ist es empfehlenswert, den Zeitpunkt, zu dem der User die AGB's oder auch Teilnahmebedingungen akzeptiert hat, nachträglich vorlegen zu können. Hierfür wird im folgendem Beispiel der Zeitpunkt exakt beim Anklicken der Checkbox durch jQuery festgehalten und kann so mit den restlichen Formulardaten übergeben und ggf. gespeichert oder in einer E-Mail weitergeleitet werden. text/html 2024-02-02T12:24:30+02:00 jquery:ajax https://www.wissensarchiv.org/doku.php?id=jquery:ajax&rev=1706873070&do=diff Ajax-Aufruf mit jQuery Beispiel: <html> <head> <title>Ajax mit jQuery-Demo</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <form> <h1>Zahlen addieren:</h1> <label for ="number_1">1. Zahl: <input type="text" id="number_1" /> </label> + <br/> <label for ="number_2">2. Zahl: <input type="text" id="number_2" /> </label> = <br/> <hr/> <label for ="result">Ergebnis: <input type="text"… text/html 2017-06-07T00:00:00+02:00 jquery:click https://www.wissensarchiv.org/doku.php?id=jquery:click&rev=1496786400&do=diff click handler in einer FOR-Schleife erstellen <script> function createClickHandlers() { for ( i = 1; i <= 12; i++ ) { (function( id ) { $( '#wuerfel_' + id ).click( function () { setRandomNumbers( id ); } ); })( i ); } } function setRandomNumbers( row ) { $( '#Gewinnzahl_' + row ).val( 'X' ); } createClickHandlers(); </scri… text/html 2018-10-03T00:12:00+02:00 jquery:datepicker https://www.wissensarchiv.org/doku.php?id=jquery:datepicker&rev=1538518320&do=diff jQuery user interface: Datepicker Um die Funktionen von „jQuery user Interface“ (kurz: jQuery UI) nutzen zu können muss zusätzlich zur jQuery Bibliothek die UI und das zugehörige Style-Sheet in die Webseite eingebunden werden: <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> text/html 2016-01-08T00:00:00+02:00 jquery:each https://www.wissensarchiv.org/doku.php?id=jquery:each&rev=1452207600&do=diff Elemente mit jQuery durchlaufen (iterieren) Analog zur foreach-Schleife in PHP können in jQuery mit der each-Funktion DOM-Elemente durchlaufen werden, die vorher selektiert wurden. Beispiel HTML <ul> <li>Listenpunkt 1</li> <li>Listenpunkt 2</li> <li>Listenpunkt 3</li> </ul> text/html 2020-07-28T14:36:11+02:00 jquery:event https://www.wissensarchiv.org/doku.php?id=jquery:event&rev=1595939771&do=diff Event-Handler mit jQuery Die Zeiten, in der die Event-Handler, wie z. B. der Click-Handler*, sich im HTML-Quellcode befinden, gehören der Vergangenheit an. Für eine saubere Trennung zwischen Auszeichnungssprache und Programmiersprache sowie eine bessere Übersichtlichkeit ist es empfehlenswert, die Event-Handler an einer zentralen Stelle zu pflegen. Um dies zu ermöglichen stehen uns ab text/html 2016-01-13T00:00:00+02:00 jquery:faq https://www.wissensarchiv.org/doku.php?id=jquery:faq&rev=1452639600&do=diff FAQ mit jQuery erstellen Das folgende exemplarische Beispiel zeigt, wie man mit jQuery ein pflegeleichtes FAQ erstellen kann. JavaScript-Teil: <script language="javascript" type="text/javascript"> $(document).ready( function() { // erst, wenn der Quellcode fertig geladen wurde $(".FAQ").each( function( index ) { // alle Elemente (Fragen) mit der Klasse "FAQ" durchlaufen $( this ).click( function() { // wenn die Frage angeklickt wurde if( $( "#FAQ_" + index ).is( ":hidden" ) ) /… text/html 2021-04-07T12:03:35+02:00 jquery:formular https://www.wissensarchiv.org/doku.php?id=jquery:formular&rev=1617789815&do=diff Formular mit jQuery versenden (mit hidden-Field) HTML-Formular: <form method="post"> <div class="adressen"> <div class="delete" title="löschen" data-id="1">delete</div> </div> </form> ---------- jQuery: $( '.adressen' ).on( 'click', '.delete', function() { var id = $( this ).data( 'id' ); var form = $(this).closest("form"); $('<input>').attr({ type: 'hidden', name: 'delete', value: id }).appendTo( form ); form.submit(); }); text/html 2017-06-07T00:00:00+02:00 jquery:include https://www.wissensarchiv.org/doku.php?id=jquery:include&rev=1496786400&do=diff jQuery in die Internetseite einbinden jQuery kann, wie alle anderen Java-Scripte auch, lokal oder direkt von einem anderen Server eingebunden werden. Für die 2. Methode stellt jquery.com sowie Google den Java-Script-Quellcode zum Einbinden per Link zur Verfügung. Empfehlung: Die direkte Einbinung von Google bringt sicherlich Performance-Vorteile, da anzunehmen ist, das Google die schnelleren (und auch mehr) Server zur Verfügung hat. text/html 2016-01-13T00:00:00+02:00 jquery:position https://www.wissensarchiv.org/doku.php?id=jquery:position&rev=1452639600&do=diff Wohin kommt der jQuery-Code? (Positionierung im Quelltext) Technisch gesehen muss der jQuery-Code, wenn er auf DOM-Elemente der Webseite zugreift, am Ende der Seite platziert werden, wenn alle angesprochenen Elmente bereits vom Web-Browser geladen wurden. Allerdings wird JavaScript aus Gründen der Übersichtlichkeit eher im <head>-Bereich der Seite integriert. text/html 2016-04-09T00:00:00+02:00 jquery:scrolltop https://www.wissensarchiv.org/doku.php?id=jquery:scrolltop&rev=1460152800&do=diff scrollen mit jQuery Das folgende Beispiel scroll beim Anklicken der Schaltfläche mit der ID „move“ zum HTML-Objekt mit der ID „target“: <script type="text/javascript"> <!-- $('#move').click( function() { $('html, body').animate({ scrollTop: ( $('#target').offset().top)}, 'slow'); }); //--> </script> text/html 2017-06-07T00:00:00+02:00 jquery:select https://www.wissensarchiv.org/doku.php?id=jquery:select&rev=1496786400&do=diff Elemente mit jQuery selektieren Übersicht Auswahl durchBeispiel für Schreibweise Tag-Name $(„form“) Element-Name $(„[name='kundendaten']“) Element-ID $(„#kundendaten“) Klassennamen $(„.hinweistext“) Ausführliches Beispiel text/html 2016-01-12T00:00:00+02:00 jquery:slide https://www.wissensarchiv.org/doku.php?id=jquery:slide&rev=1452553200&do=diff jQuery: Elemente ein- und ausblenden jquery in die Internetseite einbinden HTML-Formular-Elemente <p><input type="checkbox" value="1" id="slideLieferanschrift">abweichende Lieferanschrift eingeben</p> <div id="Lieferanschrift" style="display:none;"> ... </div> jQuery mit JavaScript aufrufen