O documento fornece uma introdução ao jQuery, abordando conceitos como seletores, manipulação de elementos DOM, eventos e animações.

1. JQuery
Luciano Borges
lucianosantosborges@gmail.com

2. Agenda

3. Hora da
Revisão

4. JavaScript OO
Construtor
NEW só é necessário
function Pessoa(){} quando a função não
var eu = new Pessoa(); retorna o objeto recém-
criado.
function Pessoa(){ return this }
var eu = Pessoa();
THIS refere-se ao
próprio objeto.

5. JavaScript OO
Propriedades
function Pessoa(){
this.olhos = 2
}
var eu = new Pessoa();
var ciclope = new Pessoa();
ciclope.olhos = 3;
alert(ciclope.olhos); //3

6. JavaScript OO
Propriedades
function Pessoa(pNome){
this.nome = pNome
}
var eu = new Pessoa(“Luciano”);

7. JavaScript OO
Métodos
function Pessoa(){
this.fala = function(mensagem){
alert(mensagem);
}
}
luciano.fala(“The Book is on the table!”);

8. JavaScript OO
Encapsulamento
function Pessoa(){
this.publica = “Variável Pública”;
var privada = “Variável Privada”;
this.metodoPublico = function(){
alert(this.publico);
alert(privada);
}
var metodoPrivado = function(){ var eu = new Pessoa();
alert(privada); alert(eu.publica);
} alert(eu.privada);
this.chamePrivada = function(){ eu.metodoPublico();
alert(privada); eu.metodoPrivado();
} eu.chamePrivado();
}

9. JavaScript OO
Objetos Literais
var Pessoa = { var Instrutores = {
nome : "Luciano", instrutor1 : {
nome : "Luciano",
idade: 34 idade : 34
} },
instrutor2 : {
nome : "Marcelo",
email : "37"
},
instrutor3 : {
nome : "Márcio",
email : "43"
}
}

10. Formato de troca de dados leve em relação ao XML
Uma coleção de pares nome/valor
Um objeto JSON inicia com { e termina com }
Cada nome é seguido por : (dois pontos)
Os pares nome/valor são separados por , (vírgula)
É um subconjunto dos objetos literais do JavaScript

14. Compatibilidade

15. simplicidade

16. Filosofia jQuery
Ache Algo
Faça Algo
Fonte: Richard Worth

17. Filosofia jQuery
$(Ache Algo)
.Faça Algo();
Fonte: Richard Worth

18. Vantagens

19. Vantagens
Acesso direto aos componentes DOM

20. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações

21. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações
Suporte aos eventos de interação com o usuário

22. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações
Suporte aos eventos de interação com o usuário
Grande variedade de efeitos de animação

23. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações
Suporte aos eventos de interação com o usuário
Grande variedade de efeitos de animação
Uso simplificado e sem restrições com AJAX

24. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações
Suporte aos eventos de interação com o usuário
Grande variedade de efeitos de animação
Uso simplificado e sem restrições com AJAX
Simplificação na criação de scripts

25. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações
Suporte aos eventos de interação com o usuário
Grande variedade de efeitos de animação
Uso simplificado e sem restrições com AJAX
Simplificação na criação de scripts
Emprego cross-browser

28. Antes do JQuery
Escondendo DIVs
divs = document.getElementByTagName('div');
for(i = 0; i < divs.length; i++){
divs[i].style.display = 'none';
}
Fonte: Marc Grabanski

29. Depois do JQuery
Escondendo DIVs
$(“div”).hide();
Fonte: Marc Grabanski

30. Seletores

31. Seletores
$(“elemento”) $(“.classe”) $(“#id”)

32. Funções &
Eventos

33. Exemplos
$(“div”).hide();
$(“button”).remove();
$(“form”).submit();
$(“p”).addClass(“special”);
$(“span”).show(“fast”);

34. Exemplos
$("p").addClass("special")
.css("color", "red")
.append("hello")
.show("slow");

36. Exemplos Reais
function validacaoRespostas(){
var selecionado = null;
var i;
for(i = 0; i < document.frm.elements.length; i++){
if(document.frm.elements[i].name.substr(0,9) == “resp”){
if(document.frm.elements[i].checked){
selecionado = document.frm.elements[i].value;
break;
}
}
}
if(selecionado == null){
alert(“É necessário escolher pelo menos um quesito.”);
} else {
document.frm.submit();
}
}

37. Exemplos Reais
function validacaoRespostas(){
var selecionado = null;
var i;
for(i = 0; i < document.frm.elements.length; i++){
if(document.frm.elements[i].name.substr(0,9) == “resp”){
if(document.frm.elements[i].checked){
selecionado = document.frm.elements[i].value;
break;
}
}
}
if(selecionado == null){
alert(“É necessário escolher pelo menos um quesito.”);
} else {
document.frm.submit();
}
}

38. Exemplos Reais
function validacaoRespostas(){
var selecionado = null;
var i;
for(i = 0; i < document.frm.elements.length; i++){
if(document.frm.elements[i].name.substr(0,9) == “resp”){
if(document.frm.elements[i].checked){
selecionado = document.frm.elements[i].value;
break;
}
}
}
if(selecionado == null){
alert(“É necessário escolher pelo menos um quesito.”);
} else {
document.frm.submit();
}
}
($(“input:checked”).length == 0) ? alert (“msg”) :
$(“form:first”).submit();

39. Exemplos Reais
function Limpar(){
var v_input = document.getElementsByTagName(‘input’);
for(var i = 0; i<v_input.length; i++){
switch(v_input[i].type){
case ‘radio’:
v_input[i].checked = ‘’;
break;
case ‘checkbox’:
v_input[i].checked = ‘’;
break;
}
}
}

40. Exemplos Reais
function Limpar(){
var v_input = document.getElementsByTagName(‘input’);
for(var i = 0; i<v_input.length; i++){
switch(v_input[i].type){
case ‘radio’:
v_input[i].checked = ‘’;
break;
case ‘checkbox’:
v_input[i].checked = ‘’;
break;
}
}
}
$(“input:checked”).each(function(){
this.checked = false;
});

41. Exemplos Reais
function Limpar(){
var v_input = document.getElementsByTagName(‘input’);
for(var i = 0; i<v_input.length; i++){
switch(v_input[i].type){
case ‘radio’:
v_input[i].checked = ‘’;
break;
case ‘checkbox’:
v_input[i].checked = ‘’;
break;
}
}
}
$(“input:checked”).each(function(){
this.checked = false;
});

43. $.get("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.post("test.php",
{ name: "John", time: "2pm" },
function(data) {
alert("Data Loaded: " + data);
}
);

46. Um conjunto completo de componentes cross-
browser de interface de usuário.
Drag, Drop, Sort, Select, Resize.
Accordion, Autocomplete, Button, Datepicker,
Dialog, Progressbar, Slider, Tabs.

49. j Q u e r y U I C S S F ra m e wo rk

50. Accordion
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>

51. Autocomplete

52. Datepicker
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker"></p>

53. Tabs
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu ...</p>
</div>
</div>

54. Quer mais?

55. PLUGINS

56. DataTable
PLUGINS

57. Flot
PLUGINS

58. jsTree
PLUGINS

60. CODING DOJO

61. Problema