Você não está conectado. Conecte-se ou registre-se

[jQuery] Sobre a biblioteca jQuery

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

Target

avatar
Membro elite

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

Maujor - Spoiler - O nascimento:
No dia 22 de agosto de 2005 John Resig, um desenvolvedor americano profundo conhecedor de JavaScript, autor do livro Pro JavaScript Techniques , membro da Corporação Mozilla e graduado em ciência da computação no Rochester Institute of Technology, escreveu em seu blog um artigo relatando sua frustração com a maneira verbosa de se escrever JavaScript para obter os resultados pretendidos.


Aproximadamente cinco meses após a publicação do artigo, John Resig apresentou publicamente os resultados de seus estudos que visavam a simplificar a criação com aquela linguagem. Os resultados foram apresentados em uma palestra intitulada “jQuery a nova onda para JavaScript“, proferida no BarCampNYC – Wrap Up realizado no dia 14 de janeiro de 2006. Ali nasceu a biblioteca.

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:

O diferencial do jQuery está:
• no suporte total ao CSS3 que permite o uso de seletores para localizar elementos de marcação no HTML da página;
• em sua arquitetura compatível com a instalação de plug-ins e extensões;
• na extensibilidade que permite a adição de novas funcionalidades;
• e na integração com o Ajax e linguagens que permitem buscar informações em um servidor remoto sem que seja necessário recarregar a página.

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.


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! Very Happy
Até a próxima amigos! Wink



Olá Convidado,
Leia as regras.
Leia os termos de uso.
Obrigado por se cadastrar no Best Skins Forums!

Cordialmente,
Target.
Ver perfil do usuário http://bestskins.com.br
Compartilhar este artigo em: BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahoo!Smarking

avatar

Mensagem em Ter Set 16, 2014 12:24 am por Target

Amigos, antes de comentarem, vejam a demo do resultado final:
http://board-test.forum-livre.com/h9-

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

avatar

Mensagem em Ter Set 16, 2014 6:33 am por iLacoste|4i20

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

avatar

Mensagem em Ter Set 16, 2014 6:44 am por iConnect

Olá,
Bem interesante.

Até Mais...

avatar

Mensagem em Ter Set 16, 2014 11:36 am por waghcwb

Legal para o pessoal que ta começando mano Very Happy

avatar

Mensagem em Ter Set 16, 2014 3:35 pm por Target

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

Mensagem  por Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum