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

[jQuery] Sobre a biblioteca jQuery

Ir em baixo  Mensagem [Página 1 de 1]

1 [jQuery] Sobre a biblioteca jQuery em Ter Set 16, 2014 12:05 am

Target

Target
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

2 Re: [jQuery] Sobre a biblioteca jQuery em Ter Set 16, 2014 12:24 am

Target

Target
Membro elite

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.



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

3 Re: [jQuery] Sobre a biblioteca jQuery em Ter Set 16, 2014 6:33 am

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



E Meu Fã ? use e abuse :3
Ver perfil do usuário http://samptutors.forumeiros.com

4 Re: [jQuery] Sobre a biblioteca jQuery em Ter Set 16, 2014 6:44 am

iConnect

iConnect
Membro elite

Olá,
Bem interesante.

Até Mais...



Respeite as nossas regras e leia as Conheça a nossa staff
Ver perfil do usuário http://zz168.com

5 Re: [jQuery] Sobre a biblioteca jQuery em Ter Set 16, 2014 11:36 am

waghcwb

waghcwb
Membro elite

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



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

6 Re: [jQuery] Sobre a biblioteca jQuery em Ter Set 16, 2014 3:35 pm

Target

Target
Membro elite

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



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

Conteúdo patrocinado


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