jQuery

Introdução

Biblioteca criada com o propósito de tornar o desenvolvimento em JavaScript mais rápido, fácil e direto.

Provê uma série de funções/métodos que tornam mais simples a realização de tarefas rotineiras.

Introdução

Principais recursos:

• Manipulação HTML/DOM
• Manipulação CSS
• Eventos HTML
• Efeitos e animações
• AJAX
• Utilitários

Sintaxe Básica

        
$("seletor").acao();
        
      

• $ Acesso a biblioteca jQuery
• "seletor" Lista de seletores onde a ação será executada
• acao(); Ação a ser executada sobre os elementos

Sintaxe Básica

        
$("#myBtn").click(function(){
        $("p").hide();
});
        
      

A Função document.ready()

Muitas das ações em jQuery envolverão manipulação do DOM. Logo, as ações devem ser realizadas somente depois do DOM estar carregado. Isso pode ser feito por meio da função document.read().

        
$(document).ready(function(){
   // suas ações aqui...
});
        
      

A Função document.ready()

        
$(document).ready(function(){
    $("button").click(function(){
        $("p:first").hide();
    });
});
        
      

Manipulação DOM

jQuery fornece formas mais fáceis de se recuperar e manipular elementos no DOM

Para encontrar elementos no DOM:

        $("selector")
      

Manipulação DOM: Ancestrais

Buscar o pai de um elemento no DOM:

        $("selector").parent()
      

Buscar os ancestrais de um elemento no DOM:

        $("selector").parents()
      

Buscar os ancestrais de um elemento até um elementos específico:

        $("selector").parentsUntil("selector")
      

Manipulação DOM: Descendentes

Buscar os filhos de um elemento no DOM:

        $("selector").children()
      

Busca elementos que são descendentes no DOM:

        $("selector").find("selector")
      

Manipulação DOM: Vizinhos

Busca o próximo elemento:

        $("selector").next()
      

Busca o elemento anterior:

        $("selector").prev()
      

Busca todos os elementos vizinhos:

        $("selector").siblings()
      

Manipulação CSS

Uma vez encontrado os elementos desejados, podemos customizá-los facilmente via jQuery!!

        
$("selector").css("propriedade"); // lê uma propriedade CSS
$("selector").css("propriedade", "valor"); // customiza uma propriedade CSS
$("selector").css({"p":"v", "p":"v", "p":"v"}); // customiza várias propriedades
        
      

Manipulação CSS

        
alert($("div").css("background-color"));

$(".lead").css("font-size", "20px");

$("div").css({"margin": "2%", "padding": "5%"});
        
      

Eventos

jQuery possui uma série de funções que tratam eventos dos componentes HTML.

Lista de eventos disponíveis aqui.

Eventos

        
$( "#bomb" ).click(function() {
  alert( "The bomb has been planted" );
});
        
      

Eventos

        
$( "div:first" ).dblclick(function() {
  $(this).toggleClass( "dbl" );
});
        
      

Eventos

        
$( "tr" ).hover(
  function() {
    $( this ).fadeOut("slow");
  }, function() {
    $( this ).fadeIn("slow");
  }
);
        
      

Referências

jQuery: Official Documentation

w3schools: jQuery Tutorial