jQuery to JavaScriptowy framework, dostępny pod adresem: www.jquery.com. Jest fajny i w ogóle.

if ($) {
    $(document).ready(
        function() {
            $('p').addClass('tmpFrameworkZaladowany');
            $('p').text('jQuery zaladowane poprawnie!');
        }
);
}

“$” zawiera w sobie całą funkcjonalność jQuery, przez co linijki kodu są krótsze. Zamiast $ można też używać “jQuery” (jQuery(document).ready {}… Zdarzenie jest połączone ze zdarzeniem jQuery ready, które jest uruchamiane gdy DOM jest w pełni załadowany (znaczniki, js, css ale nie obrazki). W naszym przykładzie, jak tylko dokument się załaduje, jQuery wybiera znacznik <p> i nadaje mu klasę tmpFrameworkZaladowany. Następnie zmienia jego tekst na “jQuery zaladowane poprawnie”.

Odpowiednik w JS bez jQuery:

window.onload = function() {
   var $p = document.getElementsByTagName('p')[0];
   $p.className = 'tmpFrameworkZaladowany';
   if ($p.innerText) {
      $p.innerText = 'jQuery zaladowane poprawnie!';
   } else {
      $p.textContent = 'jQuery zaladowane poprawnie!';
   }
};

Zmiana CSS:

$('p a').css('color', 'blue');

var tmpExample = {
    ready : function() {
        // zbierz wszystkie linki
        $('ul#tmpFavorites li a').click(
        function($e) {
            $e.preventDefault();
            window.open(this.href, 'FavoriteLink', '');
        }
    );
    }
};
 
$(document).ready(tmpExample.ready);

Funkcja powyższa służy do otwierania wszystkich linków <a> znajdujących się w <ul> o id=“tmpFavorites” w elementach <li> w nowym oknie (zamiast w tym samym).

Tworzymy nowy obiekt tmpExample, który zawiera jedną metodę, ready. W tej metodzie znajdują się wszystkie instrukcje wykonywane gdy dokument będzie gotowy.

qwerty

Mamy FadeIn, FadeOut, SlideUp, SlideDown, Show, Hide…

$(function() {
   $('a').click(function() {
      $('#box').slideUp(4000);
   });
});

$(function() {
   $('#box').click(function() {
      $(this).animate({"left" : "300px"}, 4000);
      $(this).animate({"width" : "50px"}, 4000);
    });
})

• http://net.tutsplus.com/tutorials/javascript-ajax/10-super-helpful-traversing-functions-in-jquery/