jQuery podstawy

• Selektory:

$(document).ready(function(){   
   $("*").css("border","2px dotted red") //-dodanie ramki do wszytkich elementów na stronie   
   $("p").css("border","2px dotted red") //-dodanie ramki do wszytkich paragrafów na stronie   
   $(".tekst").css("border","2px dotted red") //-dodanie ramki do wszytkich klas tekst   
   $("#papu").css("border","2px dotted red") //-dodanie ramki do wszytkich elementów o id papu   
   $("#papu,p,.tekst").css("border","2px dotted red") //-dodanie ramki do wszytkich elementów podanych jako selektory   
  }   

• Selektory hierarchiczne:

$(document).ready(function(){
$(#test p).css("background","#fffff"); //- wszytkie paragrafy w kontenerze o id test niezależnie jak głęboko się znajdują
$(#test > p).css("background","#fffff"); //- bezpośrednie dzieci, paragrafy poniżej kontenera o id test
$(h1 > p).css("background","#fffff"); //- kolejny element za h1 na tym samym poziomie
$(h1 ~ p).css("background","#fffff"); //- każdy następny paragraf znajdujący się ZA h1
$(h1 ~ p).css("background","#fffff"); //- każdy następny paragraf znajdujący się ZA h1
$(#test > h1 ~ p).css("background","#fffff"); //- każdy następny paragraf znajdujący się ZA h1 będący  dzieckiem kontenera o id test
}

• This w jQuery(kliknięty obiekt zostanie ukryty):

 $(document).ready(function(){  
   $(this).hide(slow);  
 }  

• Filtry

 $(document).ready(function(){    
   $("p:first").css("border","2px dotted red") //-dodanie ramki do pierwszego paragrafu  
   $("p:last").css("border","2px dotted red") //-dodanie ramki do ostattniego paragrafu  
   $("p:not(.test)").css("border","2px dotted red") //-dodanie ramki do wszystkich paragrafów za wyjątkiem tego z klasą test    
   $(":header").css("border","2px dotted red") //-dodanie ramki tylko do nagłówków  
   $("p:eq(2)").css("border","2px dotted red") //-dodanie ramki do drugiego elementu na stronie  
   $("p:gt(2)").css("border","2px dotted red") //-dodanie ramki do paragrafów o indeksie większym niż 2  
   $("p:lt(2)").css("border","2px dotted red") //-dodanie ramki do paragrafów o indeksie mniejszym niż 2  
   $("p:even(2)").css("border","2px dotted red") //-dodanie ramki do paragrafów o indeksie parzystym  
   $("p:odd(2)").css("border","2px dotted red") //-dodanie ramki do paragrafów o indeksie nieparzystym  
 }    

• Łączenie filtrów:
• paragrafy większe od indeksu 2 , pierwszy i ostatni element

 $(document).ready(function(){    
   $("p:gt(2):first:last").css("border","2px dotted red")  
  }   

• Filtry potomków

  $(document).ready(function(){    
   $("#test :first-child").css("border","2px dotted red") //-pierwsze dziecko kontenera o id test lub głębiej  
   $("#test > :first-child").css("border","2px dotted red") //-pierwsze dziecko kontenera o id test  
   $("#test :last-child").css("border","2px dotted red") //-ostatnie dziecko kontenera o id test lub głębiej  
   $("#test :only-child").css("border","2px dotted red") //-ostatnie dziecko kontenera o id test lub głębiej  
   $("#test th:nth-child(3n)").css("border","2px dotted red") //- co trzecie dziecko kontenera o id test lub głębiej  
   $("#test th:nth-child(3n+2)").css("border","2px dotted red") //- co trzecie dziecko kontenera o id test lub głębiej zaczynając od elementu drugiego  
  }