Javascript para CSharpers - Append B - jQuery

• Biblioteca JavaScript.
• Cross-browser.
• Múltiplas funcionalidade:
• Manipulação do DOM
• Eventos
• Efeitos
• Chamadas ao servidor (Ajax)
• Plugins
• Altamente utilizado pela comunidade web.
• Comportamento extensível via plugins.
jQuery

Window
Frame
Document
Ancher
Form
Text
Textarea
Checkbox
Radio
Select
Reset
Button
Password
submit
Link
image
Location
history
Linguagem Javascript

jQuery
• É possível manipular elementos no html através de
• $(‘seletor’).método();
Seleções
<h3 class="teste">cabeçalho
<p> Subtitulo</p>
</h3>
<h3 id="teste">id</h3>
<h3 teste="">atributo</h3>
$('h3'); //Todos os h3
$('h3#teste'); //Todos os h3 com id = 'teste'
$('#teste'); //Todos os elementos com id = 'teste'
$('.teste'); //Todos os elementos com classe = 'teste'
$('h3[teste]'); //Todos os h3 com que contenham atributo 'teste'
$('h3:even');//todos os h3 pares
$('h3:odd');//todos os h3 impares
$('h3 > p');//todos os 'p' que sejam filhos de 'h3'
$('qualquer seletor css');

jQuery
• Pseudo-Seletores
Seleções
$('a.external:first'); // primeiro <a> com classe "external"
$('tr:odd'); // <tr>s impares
$('#myForm :input'); // todos os elementos input num formulário
$('div:visible'); // apenas divs visiveis
$('div:gt(2)'); // todos exceto as três primeiras divs
$('div:animated'); // todas as divs com animação
$('div:nth-child(3)'); // terceiro filho do elemento selecionado

jQuery
• Pseudo-Seletores para formulários
Seleções
:button
:checkbox
:checked
:disabled
:enabled
:file
:image
:input
:password
:radio
:reset
:selected
:submit
:text

jQuery
• Se movendo pelo DOM
Seleções
$('h1').next('p');
$('div:visible').parent();
$('input[name=first_name]').closest('form');
$('#myList').children();

jQuery
• Getters e Setters
Ao invocar um valor sem passar argumentos, automaticamente subentende-se que
é um get de propriedade.
Ao passar um valor por parâmetro, o comportamento é de sobreescrever o valor
anterior, pois é interpretado como um set.
$('div').html();
$('p').text();
$('input').val();
$('div').html (“novo");
$('p').text (“texto");
$('input').val(“aqui");

jQuery
• Alterando propriedades
Sintaxe
$('h1').attr('class');//get
$('h1').attr('class', "teste");//set
$('h1').removeAttr('class');
$('h1').css('font-weigth',"bold");
$('h1').html();
$('h1').text('class');
$(‘input').val('class');

jQuery
Atributos
Classes
var $h1 = $('h1');
$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');
$h1.hasClass('big');
Dimensões
$('h1').width('50px'); // seta a largura de todos os elementos h1
$('h1').width(); // obtém a largura do primeiro h1
$('h1').height('50px'); // seta a altura de todos os elementos h1
$('h1').height(); // obtém a altura do primeiro h1
$('h1').position(); // retorna um objeto contendo informações
// sobre a posição do primeiro h1 relativo
// a seu pai

jQuery
• Encapsulando seleções
Seleções
O valor da seleção pode ser encapsulado numa variável qualquer
Por convenção usa-se $ antes da variável para identificar que é um
Objeto jQuery
var $linhas = $('tr>td');
console.log($linhas.length);
$linhas.text();

Usando o arquivo index.html, faça o seguinte:
1. Selecione todos os elementos DIV que têm a classe "module".
2. Obtenha o terceiro item na lista não-ordenada #myList.
3. Selecione o label para o input de busca usando um seletor de atributo.
4. Encontre quantos elementos na página estão escondidos (dica: .length).
5. Encontre quantos elementos na página têm um atributo alt.
6. Selecione todas as linhas ímpares no corpo da tabela.

1. Selecione todos os elementos de imagem na página; logue o atributo alt de cada
imagem.
2. Selecione a caixa de texto de busca, então vá para o form e adicione uma classe nele.
3. Selecione o item de lista dentro de #myList que possui uma classe "current" e remova
esta classe dele; adicione uma classe "current" no próximo item de lista.
4. Selecione o elemento select dentro de #specials; se mova para o botão de submit.
5. Selecione o primeiro item de lista no elemento #slideshow; adicione a classe "current" a
ele e então adicione a classe "disabled" para seus elementos sibling.

jQuery
• Movendo Elementos
• Clonando Elementos
Manipulação do DOM
// faz o primeiro item da lista se tornar o último
var $li = $('#myList li:first').appendTo('#myList');
// outra forma de resolver o mesmo problema
$('#myList').append($('#myList li:first'));
// copia o primeiro item da lista para o fim
$('#myList li:first').clone().appendTo('#myList');
Se você precisa copiar dados e eventos relacionados, esteja certo de passar true como um
argumento para $().clone.

jQuery
• Removendo elementos
• .remove() elimina o elemento da pagina junto com seus eventos
• .detach() apenas remove o elemento daquele contexto especifico
• Prefira .detach() se pretende usar os elementos com seus eventos em outro
lugar
var $li = $('#myList li:first').remove();
$('#myList').detach();

jQuery
• Criando elementos
$('<p>Este é um novo parágrafo</p>');
$('<li class="new">novo item de lista</li>');
//Criando um novo elemento com um objeto
$('<a/>', {
html : 'Este é um link <strong>new</strong>',
'class' : 'new',
href : 'foo.html' });

jQuery
• Manipulando atributos
//Manipulando um único atributo
$('#myDiv a:first').attr('href', 'novoDestino.html');
//Manipulando múltiplos atributos
$('#myDiv a:first').attr({
href : 'novoDestino.html',
rel : 'super-special‘
});
//Usando uma função para determinar um novo valor de atributo
$('#myDiv a:first').attr({
rel : 'super-special',
href : function() {
return '/new/' + $(this).attr('href');
}
});
$('#myDiv a:first').attr('href', function() {
return '/new/' + $(this).attr('href');
});

1. Adicione cinco novos itens de lista no fim da lista não ordenada #myList. Dica:
for (var i = 0; i<5; i++) { ... }
2. Remova os itens ímpares
3. Adicione outro h2 e outro parágrafo à última div.module
4. Adicione outra opção para o elemento select; dê ao option o valor "Quarta-Feira".
5. Adicione uma nova div.module à página depois da última; coloque uma cópia de uma
das imagens
existentes dentro dela.

jQuery
• $.trim() – remove o espaço em branco de um texto
• $.each() ou $(‘seletor’).each() – aplica um call-back à todos os
elementos da lista
Métodos Utilitários
$.trim(' espaços em branco '); // retorna 'espaços em branco‘
$.each(['foo', 'bar', 'baz'], function (id, val) {
console.log('elemento ' + id + 'é ' + val);
});
$.each({ foo: 'bar', baz: 'bim' }, function (prop, val) {
console.log(prop + ' : ' + val);
});

jQuery
• $.extend() – estende as propriedades de um objeto baseado no outro
var objA = { nome: 'junior', idade: '14' };
var objB = { nome: 'lucas' };
var objAB = $.extend({}, objA, objB);
console.log(objAB); // nome:"lucas",idade:14

Estado
Civil Novo
Profissão
Nova
Nome
Idade
Estado
Civil
Profissão
{}
jQuery
ObjBObjA
Nome
Idade
Estado
Civil
Profissão
$.extend(objA, objB); var objC = $.extend({},objA, objB);
ObjA
Nome
Idade
Estado
Civil
Profissão
ObjC
Estado
Civil Novo
Profissão
Nova
ObjB
Estado
Civil Novo
Profissão
NovaProfissão
Nova
Estado
Civil Novo

Profissão
Nova
Estado
Civil Novo
Estado
Civil Novo
Profissão
Nova
Nome
Idade
Estado
Civil
Profissão
{}
jQuery
ObjBObjA
Nome
Idade
Estado
Civil
Profissão
ObjA
Nome
Idade
Estado
Civil
Profissão
ObjC
Estado
Civil Novo
Profissão
Nova
ObjB
Estado
Civil Novo
Profissão
Nova

Profissão
Nova
Estado
Civil Novo
Estado
Civil Novo
Profissão
Nova
Nome
Idade
Estado
Civil
Profissão
{}
jQuery
ObjBObjA
Nome
Idade
Estado
Civil
Profissão
ObjA
Estado
Civil
Profissão
ObjC
Estado
Civil Novo
Profissão
Nova
ObjB
Estado
Civil Novo
Profissão
Nova
Nome
Idade
Estado
Civil
Profissão

Estado
Civil Novo
Profissão
Nova
Nome
Idade
Estado
Civil
Profissão
{}
jQuery
ObjBObjA
Nome
Idade
Estado
Civil
Profissão
ObjA
Nome
Idade
Estado
Civil
Profissão
ObjC
Estado
Civil Novo
Profissão
Nova
ObjB
Estado
Civil Novo
Profissão
NovaProfissão
Nova
Estado
Civil Novo
Nome
Idade

jQuery
Tipos
var meuValor = [1, 2, 3];
// Usando o operador typeof do JavaScript para testar tipos primitivos
typeof meuValor == 'string'; // false
typeof meuValor == 'number'; // false
typeof meuValor == 'undefined'; // false
typeof meuValor == 'boolean'; // false
// Usando o operador de igualdade estrita para verificar null
meuValor === null; // false
// Usando os métodos do jQuery para verificar tipos não primitivos
jQuery.isFunction(meuValor); // false
jQuery.isPlainObject(meuValor); // false
jQuery.isArray(meuValor); // true

jQuery
• jQuery fornece atalho para a maioria dos eventos convenientes
$(‘seletor’).click(callback);
$(‘seletor’).change(callback);
$(‘seletor’).keypress(callback);
$(‘seletor’).submit(callback);
$(‘seletor’).focus(callback);
Para eventos gerais:
$(‘seletor’).on(‘evento’,callback);
$(‘seletor’).bind(‘evento’,callback);
Eventos
//Vinculando Eventos Usando um Método próprio
$('p').click(function() {
console.log('clique');
});
//Vinculando eventos usando o método $().on
$('p').bind('click', function() {
});
// Vinculando eventos usando o método $().bind com dados
$('input').bind( 'click change',
{ foo : 'bar' }, // passa dados
function(eventObject) {
console.log(eventObject.type, eventObject.data);
} );

jQuery
• Remover um evento
$(‘seletor’).off(‘evento’);
$(‘seletor’).unbind(‘evento’);
• Configurar para chamar uma
única vez
$(‘seletor’).one(‘evento’);
• Disparar
$(‘seletor’).trigger(‘evento’);
Eventos
//Vinculando Eventos Usando um Método próprio
$('p').click(function() {
});
//Vinculando eventos usando o método $().on
$('p').bind('click', function() {
});
// Vinculando eventos usando o método $().bind com dados
$('input').bind( 'click change',
{ foo : 'bar' }, // passa dados
function(eventObject) {
console.log(eventObject.type, eventObject.data);
} );

1. Adicione um evento no onChange do campo de
pesquisa para alterar o conteúdo do botão abaixo para
“Go to: <termo>”
2. Crie um bind do evento click no item de lista que:
• Adicione uma classe "current" para o item de lista clicado.
• Remova a classe "current" do outro item de lista.

Efeitos
• jQuery fornece métodos que deixam efeitos visuais são triviais que
nem parece que é feito de tanto CSS

Efeitos
• Principais efeitos
• $().show;
• $().hide;
• $().fadeIn;
• $().fadeOut;
• $(‘h1’).fadeIn(300)
• $(‘h1’).fadeIn(slow)
• $().effect(tempo, callback);

jQuery
• Realizar chamadas ao servidor.
• Independente de back-end.
• Execução assíncrona.
• As chamdas ajax sempre retornam promises.
• Restrição ao mesmo domínio.
• Requisições cross-domain são rejeitadas por padrão.
• Carrega vários tipos de dados
• html
• xml
• json
• csv
Ajax

$.ajax({
type: “GET",
url: "http://echo.jsontest.com/nome/wesley/idade/22",
data: { "Note": 10, "Comment": “Show de bola" }
})
.done(function (result) {
alert("Sucesso");
})
.fail(function (err, textStatus) {
alert("Erro");
});
jQuery
Ajax - Exemplo
$.get('/users.php', { userId: 1234 }, function (resp) {
console.log(resp);
});

jQuery
• Extensões desenvolvidas pela comunidade para a biblioteca jQuery.
• Grande maioria são grátis.
• Métodos estáticos
• Criados utilizando o objeto $.
• Disponíveis através da sintaxe $.nomeDoPlugin(...)
• Métodos de instancias.
• Criados utilizando o objeto $.fn.
• Disponíveis através da sintaxe $(“seletor”).nomeDoPlugin(...)
Plugins

jQuery
Plugins – Melhores práticas
• Básico
• Cadeia de chamadas
• Protegendo o escopo
• Aceitando opções
• Minimizando a poluição
• Preparando para múltiplos
elementos
• Esqueleto padrão
• Versão final

jQuery
• Inicialização do jQuery.
• Funciona bem se:
• Tem total controle do ambiente a ser executado.
• A performance de carregamento não é importante.
Melhores práticas
$("document").ready(function() {
// Pagina esta carregada
//O resto do código
});
$(function() {
// Pagina esta carregada
});
// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// A variável $ esta no escopo local
// Cria o handler do evento da página carregada
$(function() {
// Página carrega
});
}(window.jQuery, window, document));
// O objecto global jQuery é passado como parâmetro

jQuery
• Manipulação do DOM.
• Gosta de código repetitivo.
• A performance de carregamento não é importante.
• Boas práticas não é uma preocupação.
Melhores práticas
$(".container input#elem").attr("title", $(".container input#elem").text());
$(".container input#elem").css("color", "red");
$(".container input#elem").fadeOut();
var $elem = $("#elem");
$elem.attr("title", elem.text())
.css("color", "red")
.fadeOut();

jQuery
• Manipulação do DOM.
• Gosta de ficar mudando o DOM repetidamente.
• Gosta de websites lentos.
• Seu cliente possui um alienware.
Melhores práticas
var localArr = ["Item 1", "Item 2", "Item 3", "Item 4"],
$list = $("ul.items");
$.each(localArr, function(index, value) {
$list.append("<li id=" + index + ">" + value + "</li>");
});
var localArr = ["Item 1", "Item 2", "Item 3", "Item 4"],
$list = $("ul.people"),
dynamicItems = "";
$.each(localArr, function(index, value) {
dynamicItems += "<li id=" + index + ">" + value + "</li>";
});
$list.append(dynamicItems);

jQuery
• Manipulação de eventos
• Gosta de usar muita memória pra gerenciar os eventos.
• Possui poucos elementos DOM.
• Nunca vai precisar alterar esses seletores.
Melhores práticas
$("#longlist li").on("mouseenter", function() {
$(this).text("Evento de mouse hover");
});
$("#longlist li").on("click", function() {
$(this).text("Evento de click");
});
var list = $("#longlist");
$list
.on("mouseenter", "li", function(){
$(this).text("Evento de mouse hover");
})
.on("click", "li", function() {
$(this).text("Evento de click");
});

jQuery
• Documentação oficial:
• http://api.jquery.com/
• Melhores práticas para criação de plugins:
• http://learn.jquery.com/plugins/
• Melhores práticas de jQuery:
• http://lab.abhinayrathore.com/jquery-standards/
• http://gregfranko.com/jquery-best-practices/
Referências

Quiz
O que esse seletor irá retornar?
$('h1.header>p#information');
1. uma <header>
2. uma <p> com id information
3. uma <h1> com a classe header dentro de um <p>

Quiz
E essa?
$('li#activated').parent().children()
• uma <ul>
• uma <li>
• uma lista com <li>s
• uma lista com <ul>s

Quiz
Todo evento atribuído com bind deve ser removido com unbind, e não
com outros, o mesmo serve para on e off.
• Verdadeiro
• Falso

Javascript para CSharpers - Append B - jQuery

Mais conteúdo relacionado

Mais procurados (20)

Destaque (9)

Semelhante a Javascript para CSharpers - Append B - jQuery (20)

Mais de Wesley Lemos (14)

Último (7)

Javascript para CSharpers - Append B - jQuery

Notas do Editor