Einbinden vom jQuery über Google:

https://developers.google.com/speed/libraries/devguide#jquery

Link auf Googleapis: https://developers.google.com/speed/libraries/devguide?hl=de

Dies bindet das jQuery-Framework minimiert ein und braucht deshalb weniger Speicherplatz. Die Version 1.8.2 muss gegebenfalls durch die aktuelle Version ersetzt werden. Auf http://jquery.com/ kann man die Versionen prüfen und evtl. die neuste Version auch lokal runterladen, damit sie nicht jedesmal über google geladen werden muss. Empfiehlt sich für den produktiven Einsatz.

 <html>
 <head>
 <script type="text/javascript" src="jquery.min.js">
 </script>
 <style type="text/css">
 #testid {
    background-color:#aaaaaa;
    color:#000000;
    border:1px solid black;
    width:400px;
    height:400px;
 }
 </style>
 </head>
 <body>
 <p id="testid">Hallo Besucher!</p>
 <a href="">Testlink 1</a><br />
 <br />
 <a href="http://www.ql.de">Testlink 2</a><br />
 <br />
 <div>Einfacher Div-Container. Hier kann man auch klicken.</div>
 <br />
 <br />
 <img id="testanim" src='bild.gif' />
 <br />
 <script type="text/javascript">
 $("#testid")
 .css({ "height": "150px","width": "200px","color": "#ff0000" })
 .html("Dieser Text wurde überschrieben (siehe HTML-Source)");
 
 $("a")
 .click(function(event){
    alert("Link geklickt!");
    event.preventDefault(); //Der Link wird nicht ausgeführt
 });
 $("div")
 .click(function(event){
    alert("In den DIV-Container geklickt!");
    event.preventDefault();
    $(this).hide("slow"); 
    //Der Div-Container wird versteckt nach dem Klick.
 });
 
 $('#testanim')
 .click(function() {
    alert("Animation wird gestartet!");
 
    $('#testanim').animate({
        opacity: 0.15,
        left: '+=50',
        height: 'toggle'
    }, 5000, function() {
        // Animation beendet
    });
 });
 
 </script>
 </body>
 </html>


Einbinden von jQuery im <head> und über Google. Achtung auf die neuste Version achten!

<script src="/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/jquery.min.js"></script>

Das $-Zeichen wird für den komfortablen Zugriff auf DOM-Elemente benutzt.
DOM-Elemente (Domain Object Model) einer Webseite sind z. B. DIV, HTML, BODY oder andere HTML-Elemente. Es enhtält die Formatierung von HTML bzw. XML.

Verschiedene Beispielzugriffe mit jquery auf einen Selektor.

$("elementname")
$(".klassenname")
$("#id")
$("div, a, p, li")

Aufbau eines jQueryCodes. Diese Funktion wird erst ausgeführt nachdem die ganze Seite geladen ist:

$(document).ready(function(){
/*hier Code rein*/
});

Value eines Inputfeldes ausgeben:

alert($("#merchantId").val());


Beispiel einer CSS-Definition und dem Zugriff per jQuery darauf:

#testid {
background-color:#f000f0; color:#ff0000; border:2px solid black; width:120px; height:120px; }

Zugriff auf eine CSS-Eigenschaft:

$("#testid").css("color", "#ffff00");

Zugriff auf multiple CSS-Eigenschaften

$("#testid")
.css({ "width": "10px","color": "#f0f0ff" });

Zugriff auf mehrere CSS-Eigenschaften und ändern des Textes

$("#testid")
.css({ "height": "150px","width": "150px","color": "#ffff00" })
.html("Text wird geändert");

Beim Klick auf einen Link, eine Alertbox anzeigen und das Ausführen des Links verhindern.

$("a").click(function(event){
   alert("Link geklickt!");
   event.preventDefault(); 
   //verhindert das ausführen des Links
});
$("div").click(function(event){
   alert("In diesen DIV geklickt!");
   event.preventDefault(); 
});

Ausgeben einer CSS-Eigenschaft

alert($("#testid").css("color"));

Ausgeben eines Attributes

alert ($('#ql_cycler').attr('name'));

Mit next() das nächste Element einlesen

var $active = $('#ql_cycler .active');
var $next =$active.next();
alert ($next.attr('name'));

Das erste Element

alert($('#ql_cycler img:first').attr('name'));

Prüfen wieviel Elemente das nächste Objekt hat, falls 0 dann ist es leer.

if ($active.next().length > 0)

Prüfen, ob eine Datei auf dem Server existiert, nutzt jQuery und geht natürlich nur auf der Domain auf der das Script liegt.

 <script type="text/javascript">
    $.ajax({
        url:'http://ql.de/images/testbild.jpg',
        type:'HEAD',
        error: function(){
            // Datei wurde nicht gefunden, und nun?
            alert('ne');
        },
        success: function(){
            alert('ok');
 
        // Datei vorhanden, weiter im Text
        }
 });

jQuery-Ajax-Beispiel für das Validieren einer Emailadresse. Zuerst ein Formular zur Eingabe erstellen.

<html>
<head>
<script src="/jquery.min.js"></script>
<script>
function checkValue() {
   var strEmail=($("#email").val());
   $.get( "check.php", { email: strEmail, } )
   .done(function( data ) {
       alert( "Data: " + data );
   });
}
</script>
</head>
<body>
<form action="" method="post" target="_blank">
<input id="email" type="text" name="email" value="" />
<button onclick="checkValue();return(false);"
class="button" onclick="" >Check</button>
</form>
</body>
</html>

Und die dazugehörende PHP-Datei check.php

<?php
//Ein Logger ist keine schlechte Idee um den php-code
//zu debuggen ist aber kein muss
final class Ajaxlog {
 private static $_instance;
 private function __construct() {
 }
 static function instance() {
   if (!isset(self::$_instance)) {
     $log = __CLASS__;
     self::$_instance = new $log;
   }
   return self::$_instance;
 }
 public function __clone() {
   throw new Exception('Dont clone logger!');
 }
 public function log($strMsg = ) {
   $strFilename = 'log.txt';
   if ($file = fopen($strFilename, 'a+')) {
       fwrite($file, $strMsg."\r\n");
       fclose($file);
   }
 }
}
//ein paar ausgaben ins log
Ajaxlog::instance()->log('Log start');
Ajaxlog::instance()->log(print_r($_POST,true));
Ajaxlog::instance()->log(print_r($_GET,true));
Ajaxlog::instance()->log(print_r($_SERVER,true));
//wurde die emailadresse ordentlich übergeben
Ajaxlog::instance()->log($_GET['email']);
//Die Rückgabe an Javascript per echo, man könnte 
//hier aber auch mehrer Werte zB. per JSOn zzurückgeben 
if (isset($_GET['email']) && !empty($_GET['email'])) {
   if (filter_var($_GET['email'], FILTER_VALIDATE_EMAIL)) echo "1";
   else echo "0";
} else echo "0";
?>