Redescobrindo o Javascript com JQuery

Já ouviu falar em JQuery? Não?!? Então não sabe o que está perdendo. Hoje, não consigo me imaginar fazendo Javascript de outra maneira. Só para você ter uma idéia, um script que eu tinha feito para um projeto que pretendo colocar no ar em breve tinha por volta de 130 linhas de código. Utilizando JQuery caiu para 20 linhas!!!

Toda a parte burocrática do DOM (criar elementos, selecioná-los, etc) é feito de maneira genial, utilizando notação CSS 1.3 ou XPath básico. Não sabe do que estou falando? Veja um exemplo:

<div id="content">
	<p>This is the first line.</p>
	<p>And this is the <strong>second one</strong>.</p>
</div>

Se quisessemos adicionar um terceiro parágrafo, da maneira tradicional teríamos algo como:

var p = document.createElement('p');
p.appendChild(document.createTextNode("Hi! I'm the third paragraph"));
 
var div = document.getElementById('content');
div.appendChild(p);

ou, se você não liga muito para DOM:

var div = document.getElementById('content');
div.innerHTML += "<p>Hi, I'm the third paragraph.</p>";

Agora, se fossemos fazer isto em JQuery, seria mais ou menos assim:

$('div#content').append("<p>Hi, I'm the third paragraph. And powered by JQuery.</p>");

Sentiu a diferença? Você pode dizer que utilizando innerHTML nem fica tão dispendioso, mas algo muito errado poderia acontecer (anular eventos adicionados ao elemento, por exemplo). Com JQuery, isso nunca acontecerá, pois ele cria um elemento temporário e depois clona cada nodo, adicionando-o ao elemento-alvo. Simplesmente, perfeito!

Quer mais? Ele possui apenas 16kb, já com o módulo de AJAX. Nada mal se compararmos com os 60kb do Prototype (somente ele, sem o Script.aculo.us).

Uma coisa é certa: você ainda vai ouvir falar muito bem de JQuery.

JavaScript Avançado

O JavaScript é a única linguagem que muitos acreditam saber sem nunca terem parado para realmente aprendê-la. Neste workshop rápido você entenderá de verdade todos os conceitos avançados do JavaScript em 4 horas puramente práticas.

Comentários #

#1 Edu Ottaviani disse:

28 Out 06, 08:27PM

Cara, interessante, gostei disso =). Confesso que eu sou preguiçoso e costumo (quando é possível) usar o innerHTML. Mas além de anular certos eventos também tem o caso de que queira, por algum motivo, mudar o parágrafo do meio, ou os parágrafos que não são o primeiro ou o último =s.

Grande Blog =). E muito bem indicado pelo outro excelente blog do Elcio. Já vai entrar pro meu del.icio.us =P.

Ainda bem que peguei no comecinho! É horrível entrar num blog que já tem trocentos posts desde mil novecentos e tra lá lá rsrsrs. É informação demais e vc se perde ! Pelo menos eu que sou mais burrinho =(.

Abraços e sucesso.

#2 Rafael Sá disse:

09 Nov 06, 12:41AM

Pois é...jQuery in my vains... já amo mto o jQuery, a alguns meses, já testei de tudo nele, to com um conhecimento legal pra compartilhar.... topas??

Libera trackback no blog ai =)

#3 Rafael Sá disse:

09 Nov 06, 12:46AM

Pra incluir um em determinada posicao... com jQuery pode-se fazer:

$("div").prepend("boa noifiu!!!");
ou
$("div:first").append("boa noifiu!!!");
ou
$("div:Nth").append("boa noifiu!!!"); //ainda nao manjei como especificar essa posicao Nth no caso de 1st, 2nd e 3rd... mas xego lá

#4 Alexandre Ferreira disse:

05 Jan 07, 04:57PM

http://www.htmlstaff.org/ver.php?id=4435

Copiaram de voce ou voce que copiou deles?

#5 Nando Vieira disse:

06 Jan 07, 02:35PM

@Alexandre: se você notar, ele coloca um link para o meu blog no fim do artigo.

"Autor/fonte do artigo: Nando Vieira"

#6 Alexandre disse:

07 Jan 07, 12:06AM

Nando, colocaram depois que eu post esse texto nos 2 topicos!!!
Juro para voce, que nao tinha visto isso antes!!
Tanto que nao aceitaram meu comentario...
Deprimente isso!! Parabens pelo trabalho!!!!

Amigo, aproveitar: Eu segui o mini-tuto, e resolvi um problema que eu estava. Eu precisava adicionar varias linhas para as parcelas de comprar de um formulario meu.
Porem crio id dinamicos , assim id=id+1 . Como faria para remover. Estou tendo muito problemas =/

#7 Nando Vieira disse:: 07 Jan 07, 11:26AM; @Alexandre: pegue o ID do elemento que você está querendo remover com o $('regra').id().
Joga o que você fez em algum lugar, para eu dar uma olhada!

#8 Alexandre disse:

07 Jan 07, 07:55PM

http://pastebin.com/853860

O + id + no value é uma forma de eu "debugar" .
O o problema é que se a pessoa add alguns , remover alguns e depois add e tentar remover dinovo ele se perde nos ID mais depois de alguns click ele remove certo...
Acho que esta horrivel =/

#9 Alexandre disse:: 07 Jan 07, 07:56PM; Bugou o comentario =/ vou passar pro seu email...

#10 Nando Vieira disse:: 07 Jan 07, 08:09PM; Eu faria da seguinte maneira: http://pastebin.com/853864
Você precisa realmente dos ids?

#11 Nando Vieira disse:

07 Jan 07, 08:13PM

Ops! Agora vi que poderia remover de uma maneira muito mais elegante.

$("#RMV").click(function() {
$('#abc tbody tr:last-child').not(':first-child').remove();
});

#12 Alexandre disse:: 07 Jan 07, 08:29PM; Posso falar um palavrao de emocao??? SE NAO PUDER FOI MAL
PUTA QUE PARIUUUUUUU
RESOLVEU O PROBLEMAAAAAAAAAAAAAAAA!

#13 Alexandre disse:

07 Jan 07, 08:32PM

Que parada é essa de pastebin?
E voce que colocou esses thead e tbody mesmo??

Pode informar onde voce leu essa solucao...fui na api, na documentacao e nada =/

#14 Nando Vieira disse:: 07 Jan 07, 09:57PM; @Alexandre: eu que postei o seu código no pastebin. E o tbody e thead é para facilitar o manuseio dos elementos. Eu sempre uso ambos, pois além do motivo anterior, é ótimo para formatar com CSS. Quanto à API: provavelmente você não irá achar nada disso por lá. Na página inicial diz que o JQuery suporta CSS 1/2/3 e XPath 1.3, portanto, é legal você dar uma lida nessas documentações.

#15 Alexandre disse:

09 Jan 07, 06:11AM

Entendi Nando...
Vou te falar que o form esta funcionando muito bem...

Obrigado amigo..

Sou a favor de uma materia ou de mais alguns relatos no uso do JQuery no seu dia a dia.

#16 Enilton disse:

02 Jul 07, 07:59PM

Adorei a explicação realmente esta de parabens e como disse o amigo acima ainda bem que peguei no inicio LoL

[]'s

#17 Eric Saboia disse:: 06 Ago 07, 01:33PM; Fugindo um pouco do assunto... a biblioteca tem uma verção compacta bem menor... alguém sabe como aplicar algo do tipo em meus códigos JS? Obrigado.

#18 Nando Vieira disse:

06 Ago 07, 02:50PM

Eric, usa o Packer[1] do Dean Edwards.

[1] http://dean.edwards.name/packer/

#19 Eric Saboia disse:

29 Ago 07, 11:38AM

Nando muito obrigado pela dica, acabei achando seu blog procurando outra coisa de javascript e li sobre o JQuery, hoje estou usando ele, reduzindo em muito meu códigos… até gravei um exemplo aqui de uma redução que fiz pois achei fascinante:

http://pastebin.com/f270e1aa4

essa função eu criei pra transferir itens de uma lista para outra... realmente incrível.

#20 Fabricio Furtado disse:: 05 Dez 07, 10:44AM; Legal Uma informação postada no final de 2006 mais valida ate hoje... tive problemas com perfomance utilizando o innerHTML por ser mais "facil" de se escrever. Com o JQuery sinceramente ficou mais de 30X mais rapido aconselho a usarem o String Builder para javascript pois assim como no java o metodo append salva a patria(http://www.codeproject.com/KB/scripting/stringbuilder.aspx).

#21 Utilize jQuery e seja feliz - Cleiton.net disse:: 22 Mar 08, 02:16PM; [...] da sua escolha. Vejo que jQuery tem uma ótima comunidade e eu já conheço muita gente boa que também a utiliza. As características dela que mais me chamaram atenção [...]

#22 Tudo sobre jQuery - Cleiton.net disse:: 18 Maio 08, 08:17PM; [...] Redescobrindo o Javascript com JQuery [...]

#23 Leonardo Luis disse:

19 Ago 08, 08:17PM

CARA VALEU POR SUAS DICAS !

show();

#24 Mateus Souza » Arquivos do Blog » Sites em Portugues ... disse:: 25 Ago 08, 08:37PM; [...] Redescobrindo o Javascript com JQuery Breve introdução [...]

#25 Alexandre Martins » Blog Archive disse:: 07 Mar 09, 12:52PM; [...] Redescobrindo o Javascript com JQuery Breve introdução [...]

#26 jQuery - Um novo jeito de escrever JavaScript - atualizado | Cesa... disse:: 15 Abr 09, 01:30PM; [...] que achei muito clara para quem está iniciando no jQuery está no artigo "Redescobrindo o JavaScript com jQuery Breve introdução", leitura mais que recomendada para quem esta [...]

#27 Paulo Victor disse:: 08 Maio 10, 01:33AM; Como faço pra manipular um pedaço de texto dentro do input.
Ate agora sei que com o ID do input eu pego seu value, mas quero apenas um pedaço do value do input.
Aguem tem ideia de como faço isso?

#28 Leandro disse:

17 Maio 10, 10:26PM

Incrivel pensar q esse topico ja tem 4 anos e eu to dando os primeiros passos em jQuery. E me faz acreditar mais ainda em cada linha do codigo atual. Afinal é framework feito por toda a comunidade de desenvolvedores web.

Perfeito cara vc preveu bem o quanto jQuery era e viria a ser importante para designer (web) e developers.

#29 Samuel Sardinha disse:: 06 Jul 10, 12:50AM; Interessante sua visão antecipada do que o Jquery prometia no momento de postar este mesmo.
Gostaria de conhecer mais sobre o XPath 1.3 (documentação) se tiver uma boa fonte sobre tal assunto ficamos todos gratos. Enquanto isso vou pesquisando pelos motores de busca.
Obrigado.
E viva a internet livre!