[jQuery] Sobre a biblioteca jQuery

Neste tópico irei falar sobre a jQuery e as funcionalidades do mesmo.

Maujor - Spoiler - O nascimento:

1º Começando
Bem, a jQuery é uma das bibliotecas do JavaScript; com ela pode-se fazer coisas dinamicamente e animadas. É utilizada em muitos sites (exemplo da BestSkins); e vamos ser sinceros, tudo com jQuery fica mais fácil e simples não é?
Pois é. Uma das coisas mais fascinante que tem nessa linguagem é a sua simplicidade e facilidade. Começando sempre com o [codebox]$(document).ready(function(){ conteúdo });[/codebox].
Não é necessário começar desse jeito, existe outros jeitos de programar em jQuery, mas isso não vem ao caso (não nesse tópico).

“O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?” – JohnResig.

2º Interagindo
A jQuery, como já foi dito, é uma biblioteca JS cujo foco é a simplicidade em criar códigos.
Interagir com ela não é de todo difícil, é simples, rápido e fácil. Qualquer pessoa capacitada e disposta poderá aprender a criar códigos dinâmicos.
A jQuery nos possibilita muitas coisas, vamos pensar assim "Eu quero adicionar um texto depois de uma div mais sem usar o html", podemos fazer com jQuery:

Código:


<div> Aqui vai um texto</div>


Código:


$(document).ready(function(){
$('div').after('<p> Aqui vai o texto </p>');
});


Este código faz com que todas as divs recebam o parágrafo contendo "Aqui vai o texto".

Bem simples e rápido, não?

O diferencial:

3º Analisando um código jQuery

Se fosse pretende aprender mais sobre a jQuery recomendo-lhe aprender mais sobre JS, assim, quando for aprender jQuery irá ter muitas poucas dúvidas, quase nenhuma.
Como já disse, esse é um tópico pra falarmos sobre jQuery, e por que não falarmos sobre como analisar um código?

Vejamos um código aqui bem simples:

Código:


$(function(){ //Lembra que eu disse que não existia só o $(document).ready(){ ? Então...
var $div = $('.div');
$div.addClass('hover');
$('.hover').css('cssText', 'color:white!important;background:#000!important');
$('.hover').click(function(){
$div.after('<p> Este é um texto chato!</p>');
});
$('.hover').css('cursor', 'pointer');
});


Analisando:

Código:


$(function(){ //Lembra que eu disse que não existia só o $(document).ready(){ ? Então...


O início já se pode ser analisado, aqui ele diz "Ei jQuery, faça tal efeito antes da página ser carregada!"
A jQuery irá ignorar o que tiver escrito em "//", isso será descartado do código.

Código:


var $div = $('.div');


Este com toda a certeza você já deve ter visto, o "var".
O var nada mais é que uma variável, ela substitui o código para a variável tal.
O exemplo mostra melhor, seria algo como:
variável $div = $('.div');
Aqui a jQuery diz algo como "Ei, a $div é igual ao $('div')", é bom para economizar linhas.

Código:


$div.addClass('hover');


Uma classe também muito usada! [codebox]addClass[/codebox] nos permite adicionar uma classe em um determinado elemento, neste caso no elemento com classe "div" (o que seria: [codebox]<*div class="div"><*/div>[/codebox]);
Ai adicionamos mais uma classe dentro da .div chamada "hover".

Código:

$('.hover').css('cssText', 'color:white!important;background:#000!important');

Esta parte é bem interessante, começando com o css, e é exatamente isso que você pensou, ela adiciona um CSS na determinada classe (no caso .hover); começamos com o 'cssText', ela nos diz que esta vai receber um texto em CSS, podendo utilizar o !important (em algumas outras não se pode usar, mais pra frente irei falar a respeito); e depois vem o nosso css, nos mostrando que a cor da div que recebeu a classe hover tem que ser branca e o fundo preto, e isso é importante!

Código:

$('.hover').click(function(){

Aqui é uma função chamada de "click", ela nos diz que quando uma determinada classe for clicada, algo acontecerá.

Código:

$div.after('<p> Este é um texto chato!</p>');

Lembra sobre o que eu acabei de digitar acima ? Então, quando a div que recebeu a classe for clicada, a nossa .div receberá um parágrafo logo após.

Código:

$('.hover').css('cursor', 'pointer');

O que eu disse ainda agora, algumas classe do css (na jquery) não poderão receber o !important, na verdade eu só conheço a cssText que pode receber o !important, mas farei pesquisas pra ver se outras podem receber também.
Neste nos diz que a div que recebeu a classe .hover irá ter o cursor como pointer assim que ele tiver em cima da div.
O cursor é pointer, entendeu?

Bem está é a analise do código, pra mais testes crie um novo HTML com o conteúdo:

Código:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ //Lembra que eu disse que não existia só o $(document).ready(){ ? Então...
var $div = $('.div');
$div.addClass('hover');
$('.hover').css('cssText', 'color:white!important;background:#000!important');
$('.hover').click(function(){
$div.after('<p> Este é um texto chato!</p>');
});
$('.hover').css('cursor', 'pointer');
});
</script>

<style>
  div {
  background: #eee;
  color: #000!important;
  }
</style>

<div class="div"> Aqui vai um texto</div>
<div> Aqui vai um texto</div>


Use pra testar.
Espero que tenham entendido um pouco mais sobre jQuery!

-> E se eu quiser remover este parágrafo?

Bem simples!
Depois da $div.after, vamos adicionar este código:

Código:


$('p').click(function(){
  $(this).remove();
  });


Assim quando um parágrafo for clicado, irá só remover ele.
O $(this) faz com que só este parágrafo clicado seja removido, sem mexer nos outros, só este.

Não entendeu?
O código inserido depois:

Código:


$('.hover').click(function(){
$div.after('<p> Este é um texto chato!</p>');
$('p').click(function(){
  $(this).remove();
  });
});


O código completo é este, faça o teste na HTML:

Código:


$(function(){ //Lembra que eu disse que não existia só o $(document).ready(){ ? Então...
var $div = $('.div');
$div.addClass('hover');
$('.hover').css('cssText', 'color:white!important;background:#000!important');
$('.hover').click(function(){
$div.after('<p> Este é um texto chato!</p>');
$('p').click(function(){
  $(this).remove();
  });
});
$('.hover').css('cursor', 'pointer');
});


Mais pra frente vou explicar melhor sobre a jQuery, por enquanto é apenas uma introdução do poder da nossa jQuery.

Uma dica aos iniciantes, façam este curso: codecademy.com/pt-BR, vai ajudar muito, muito mesmo!
Até a próxima amigos!

Amigos, antes de comentarem, vejam a demo do resultado final:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Lembrando que este é apenas um tópico falando sobre a nossa biblioteca jQuery e explicando o pouco sobre ela e o surgimento dela.

Ótimo tutorial, Jon .... perfeito pra mim que estou aprendendo jQuery.

Olá,
Bem interesante.

Até Mais...

Legal para o pessoal que ta começando mano

Hehe fico feliz que tenham gostado, mais pra frente vou está postando mais tutoriais