SlideShare uma empresa Scribd logo
1 de 60
Baixar para ler offline
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
Javascript para CSharpers - Append B - jQuery
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();
Javascript para CSharpers - Append B - jQuery
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.
Usando o arquivo index.html, faça o seguinte:
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.
Javascript para CSharpers - Append B - jQuery
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
Manipulação do DOM
var $li = $('#myList li:first').remove();
$('#myList').detach();
jQuery
• Criando elementos
Manipulação do DOM
$('<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
Manipulação do DOM
//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');
});
Javascript para CSharpers - Append B - jQuery
Usando o arquivo index.html, faça o seguinte:
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.
Javascript para CSharpers - Append B - jQuery
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
Métodos Utilitários
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
• $.extend() – estende as propriedades de um objeto baseado no outro
Métodos Utilitários
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
• $.extend() – estende as propriedades de um objeto baseado no outro
Métodos Utilitários
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
Nova
Profissão
Nova
Estado
Civil Novo
Estado
Civil Novo
Profissão
Nova
Nome
Idade
Estado
Civil
Profissão
{}
jQuery
• $.extend() – estende as propriedades de um objeto baseado no outro
Métodos Utilitários
ObjBObjA
Nome
Idade
Estado
Civil
Profissão
$.extend(objA, objB); var objC = $.extend({},objA, objB);
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
• $.extend() – estende as propriedades de um objeto baseado no outro
Métodos Utilitários
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
Nome
Idade
Estado
Civil Novo
Profissão
Nova
Nome
Idade
Estado
Civil
Profissão
{}
jQuery
• $.extend() – estende as propriedades de um objeto baseado no outro
Métodos Utilitários
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
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
Javascript para CSharpers - Append B - jQuery
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() {
console.log('clique');
});
// 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() {
console.log('clique');
});
//Vinculando eventos usando o método $().on
$('p').bind('click', function() {
console.log('clique');
});
// 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);
} );
Javascript para CSharpers - Append B - jQuery
Usando o arquivo index.html, faça o seguinte:
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.
Javascript para CSharpers - Append B - jQuery
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);
Javascript para CSharpers - Append B - jQuery
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
Ajax - Serialize
Javascript para CSharpers - Append B - jQuery
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
Javascript para CSharpers - Append B - jQuery
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
//O resto do código
});
// 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
});
//O resto do código
}(window.jQuery, window, document));
// O objecto global jQuery é passado como parâmetro
jQuery
• Manipulação do DOM.
• Funciona bem se:
• 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.
• Funciona bem se:
• 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
• Funciona bem se:
• 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
Javascript para CSharpers - Append B - jQuery
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
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
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
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

jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajoliCaue Fajoli
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jqueryYuri Costa
 
Turbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com KotlinTurbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com KotlinNelson Glauber Leal
 
Persistência de Dados no SQLite com Room
Persistência de Dados no SQLite com RoomPersistência de Dados no SQLite com Room
Persistência de Dados no SQLite com RoomNelson Glauber Leal
 
T04_LM3: Javascript (2013-2014)
T04_LM3: Javascript (2013-2014)T04_LM3: Javascript (2013-2014)
T04_LM3: Javascript (2013-2014)Carlos Santos
 
JavaScript - Objectos e Arrays
JavaScript - Objectos e ArraysJavaScript - Objectos e Arrays
JavaScript - Objectos e ArraysValter Cinquenta
 
Apostila de ext js com php e postgresql v1.1
Apostila de ext js com php e postgresql v1.1Apostila de ext js com php e postgresql v1.1
Apostila de ext js com php e postgresql v1.1Luciano Marwell
 
Apostila de ext js com php e postgresql v1.2
Apostila de ext js com php e postgresql v1.2Apostila de ext js com php e postgresql v1.2
Apostila de ext js com php e postgresql v1.2Luciano Marwell
 
Apostila de ext js com php e postgresql v1.3
Apostila de ext js com php e postgresql v1.3Apostila de ext js com php e postgresql v1.3
Apostila de ext js com php e postgresql v1.3Luciano Marwell
 
Criando controle de acesso com php e my sql
Criando controle de acesso com php e my sqlCriando controle de acesso com php e my sql
Criando controle de acesso com php e my sqlPaulo Damas
 
Apostila de ext js com php e postgresql v1.0
Apostila de ext js com php e postgresql v1.0Apostila de ext js com php e postgresql v1.0
Apostila de ext js com php e postgresql v1.0Luciano Marwell
 
jQuery básico (parte 1)
jQuery básico (parte 1)jQuery básico (parte 1)
jQuery básico (parte 1)Luís Cobucci
 

Mais procurados (20)

Curso de PHP - Objetos
Curso de PHP - ObjetosCurso de PHP - Objetos
Curso de PHP - Objetos
 
Aprenda jQuery 1.3
Aprenda jQuery 1.3Aprenda jQuery 1.3
Aprenda jQuery 1.3
 
J query 1
J query 1J query 1
J query 1
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
 
Turbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com KotlinTurbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com Kotlin
 
Meta-programacao em python
Meta-programacao em pythonMeta-programacao em python
Meta-programacao em python
 
Persistência de Dados no SQLite com Room
Persistência de Dados no SQLite com RoomPersistência de Dados no SQLite com Room
Persistência de Dados no SQLite com Room
 
CSS & JQquery
CSS & JQqueryCSS & JQquery
CSS & JQquery
 
Workshop Django
Workshop DjangoWorkshop Django
Workshop Django
 
Introdução à JQuery
Introdução à JQueryIntrodução à JQuery
Introdução à JQuery
 
T04_LM3: Javascript (2013-2014)
T04_LM3: Javascript (2013-2014)T04_LM3: Javascript (2013-2014)
T04_LM3: Javascript (2013-2014)
 
JavaScript - Objectos e Arrays
JavaScript - Objectos e ArraysJavaScript - Objectos e Arrays
JavaScript - Objectos e Arrays
 
Apostila de ext js com php e postgresql v1.1
Apostila de ext js com php e postgresql v1.1Apostila de ext js com php e postgresql v1.1
Apostila de ext js com php e postgresql v1.1
 
Apostila de ext js com php e postgresql v1.2
Apostila de ext js com php e postgresql v1.2Apostila de ext js com php e postgresql v1.2
Apostila de ext js com php e postgresql v1.2
 
Apostila de ext js com php e postgresql v1.3
Apostila de ext js com php e postgresql v1.3Apostila de ext js com php e postgresql v1.3
Apostila de ext js com php e postgresql v1.3
 
Criando controle de acesso com php e my sql
Criando controle de acesso com php e my sqlCriando controle de acesso com php e my sql
Criando controle de acesso com php e my sql
 
Apostila de ext js com php e postgresql v1.0
Apostila de ext js com php e postgresql v1.0Apostila de ext js com php e postgresql v1.0
Apostila de ext js com php e postgresql v1.0
 
jQuery básico (parte 1)
jQuery básico (parte 1)jQuery básico (parte 1)
jQuery básico (parte 1)
 

Destaque

Brasil 2014 Digital Future in Focus
Brasil 2014 Digital Future in FocusBrasil 2014 Digital Future in Focus
Brasil 2014 Digital Future in FocusSkrol Salustiano
 
Brasil, o país dos trinta Berlusconi
Brasil, o país dos trinta BerlusconiBrasil, o país dos trinta Berlusconi
Brasil, o país dos trinta BerlusconiSkrol Salustiano
 
O novo universo multitelas: entendendo o comportamento do consumidor multipla...
O novo universo multitelas: entendendo o comportamento do consumidor multipla...O novo universo multitelas: entendendo o comportamento do consumidor multipla...
O novo universo multitelas: entendendo o comportamento do consumidor multipla...Skrol Salustiano
 
Node.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizarNode.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizarFilipe Falcão
 
Arquitetura JavaScript Escalável da Netflix
Arquitetura JavaScript Escalável da NetflixArquitetura JavaScript Escalável da Netflix
Arquitetura JavaScript Escalável da NetflixBruno Tavares
 
Web Semântica: uma introdução
Web Semântica: uma introdução Web Semântica: uma introdução
Web Semântica: uma introdução Yasodara Cordova
 

Destaque (9)

CSS 3
CSS 3CSS 3
CSS 3
 
Brasil 2014 Digital Future in Focus
Brasil 2014 Digital Future in FocusBrasil 2014 Digital Future in Focus
Brasil 2014 Digital Future in Focus
 
Brasil, o país dos trinta Berlusconi
Brasil, o país dos trinta BerlusconiBrasil, o país dos trinta Berlusconi
Brasil, o país dos trinta Berlusconi
 
O novo universo multitelas: entendendo o comportamento do consumidor multipla...
O novo universo multitelas: entendendo o comportamento do consumidor multipla...O novo universo multitelas: entendendo o comportamento do consumidor multipla...
O novo universo multitelas: entendendo o comportamento do consumidor multipla...
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
Node.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizarNode.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizar
 
Arquitetura JavaScript Escalável da Netflix
Arquitetura JavaScript Escalável da NetflixArquitetura JavaScript Escalável da Netflix
Arquitetura JavaScript Escalável da Netflix
 
Android Firebase
Android FirebaseAndroid Firebase
Android Firebase
 
Web Semântica: uma introdução
Web Semântica: uma introdução Web Semântica: uma introdução
Web Semântica: uma introdução
 

Semelhante a Javascript para CSharpers - Append B - jQuery

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

Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
JQuery
JQuery JQuery
JQuery
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Javascript + jQuery
Javascript + jQueryJavascript + jQuery
Javascript + jQuery
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
 
Minicurso javascript
Minicurso javascriptMinicurso javascript
Minicurso javascript
 
Introdução ao JQuery e AJAX
Introdução ao JQuery e AJAXIntrodução ao JQuery e AJAX
Introdução ao JQuery e AJAX
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
 
Plone e JQuery ao gosto do Cliente
Plone e JQuery ao gosto do ClientePlone e JQuery ao gosto do Cliente
Plone e JQuery ao gosto do Cliente
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
Web 3.0
Web 3.0Web 3.0
Web 3.0
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
Palestra - Iniciando no Jquery
Palestra - Iniciando no JqueryPalestra - Iniciando no Jquery
Palestra - Iniciando no Jquery
 
Doctrine for dummies
Doctrine for dummiesDoctrine for dummies
Doctrine for dummies
 

Mais de Wesley Lemos

Javascript para CSharpers - Append A - DOM
Javascript para CSharpers - Append A - DOM Javascript para CSharpers - Append A - DOM
Javascript para CSharpers - Append A - DOM Wesley Lemos
 
Javascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosJavascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosWesley Lemos
 
Javascript para CSharpers 4 - POO
Javascript para CSharpers 4 - POOJavascript para CSharpers 4 - POO
Javascript para CSharpers 4 - POOWesley Lemos
 
Javascript para CSharpers 2 - Functions
Javascript para CSharpers   2 - FunctionsJavascript para CSharpers   2 - Functions
Javascript para CSharpers 2 - FunctionsWesley Lemos
 
Javascript para CSharpers 1 - Comparando
Javascript para CSharpers   1 - ComparandoJavascript para CSharpers   1 - Comparando
Javascript para CSharpers 1 - ComparandoWesley Lemos
 
Dicas sobre amamentar
Dicas sobre amamentarDicas sobre amamentar
Dicas sobre amamentarWesley Lemos
 
Apresentação VideoSis
Apresentação VideoSisApresentação VideoSis
Apresentação VideoSisWesley Lemos
 
Learn with portals!
Learn with portals!Learn with portals!
Learn with portals!Wesley Lemos
 
Asus a7 v400 mx se
Asus a7 v400 mx seAsus a7 v400 mx se
Asus a7 v400 mx seWesley Lemos
 
Como fazer uma apresentação de sucesso
Como fazer uma apresentação de sucessoComo fazer uma apresentação de sucesso
Como fazer uma apresentação de sucessoWesley Lemos
 

Mais de Wesley Lemos (14)

Javascript para CSharpers - Append A - DOM
Javascript para CSharpers - Append A - DOM Javascript para CSharpers - Append A - DOM
Javascript para CSharpers - Append A - DOM
 
Javascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosJavascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - Conceitos
 
Javascript para CSharpers 4 - POO
Javascript para CSharpers 4 - POOJavascript para CSharpers 4 - POO
Javascript para CSharpers 4 - POO
 
Javascript para CSharpers 2 - Functions
Javascript para CSharpers   2 - FunctionsJavascript para CSharpers   2 - Functions
Javascript para CSharpers 2 - Functions
 
Javascript para CSharpers 1 - Comparando
Javascript para CSharpers   1 - ComparandoJavascript para CSharpers   1 - Comparando
Javascript para CSharpers 1 - Comparando
 
Dicas sobre amamentar
Dicas sobre amamentarDicas sobre amamentar
Dicas sobre amamentar
 
Apresentação VideoSis
Apresentação VideoSisApresentação VideoSis
Apresentação VideoSis
 
Lição ebd
Lição ebdLição ebd
Lição ebd
 
Learn with portals!
Learn with portals!Learn with portals!
Learn with portals!
 
Go project
Go projectGo project
Go project
 
Criatividade
CriatividadeCriatividade
Criatividade
 
Asus a7 v400 mx se
Asus a7 v400 mx seAsus a7 v400 mx se
Asus a7 v400 mx se
 
Como fazer uma apresentação de sucesso
Como fazer uma apresentação de sucessoComo fazer uma apresentação de sucesso
Como fazer uma apresentação de sucesso
 
Hotelaria
HotelariaHotelaria
Hotelaria
 

Javascript para CSharpers - Append B - jQuery

  • 2. • 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
  • 5. 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');
  • 6. 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
  • 7. jQuery • Pseudo-Seletores para formulários Seleções :button :checkbox :checked :disabled :enabled :file :image :input :password :radio :reset :selected :submit :text
  • 8. jQuery • Se movendo pelo DOM Seleções $('h1').next('p'); $('div:visible').parent(); $('input[name=first_name]').closest('form'); $('#myList').children();
  • 9. 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");
  • 10. 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');
  • 11. 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
  • 12. 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();
  • 14. 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.
  • 15. Usando o arquivo index.html, faça o seguinte: 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.
  • 17. 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.
  • 18. 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 Manipulação do DOM var $li = $('#myList li:first').remove(); $('#myList').detach();
  • 19. jQuery • Criando elementos Manipulação do DOM $('<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' });
  • 20. jQuery • Manipulando atributos Manipulação do DOM //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'); });
  • 22. Usando o arquivo index.html, faça o seguinte: 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.
  • 24. 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); });
  • 25. jQuery • $.extend() – estende as propriedades de um objeto baseado no outro Métodos Utilitários var objA = { nome: 'junior', idade: '14' }; var objB = { nome: 'lucas' }; var objAB = $.extend({}, objA, objB); console.log(objAB); // nome:"lucas",idade:14
  • 26. Estado Civil Novo Profissão Nova Nome Idade Estado Civil Profissão {} jQuery • $.extend() – estende as propriedades de um objeto baseado no outro Métodos Utilitários 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
  • 27. Profissão Nova Estado Civil Novo Estado Civil Novo Profissão Nova Nome Idade Estado Civil Profissão {} jQuery • $.extend() – estende as propriedades de um objeto baseado no outro Métodos Utilitários 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 Nova
  • 28. Profissão Nova Estado Civil Novo Estado Civil Novo Profissão Nova Nome Idade Estado Civil Profissão {} jQuery • $.extend() – estende as propriedades de um objeto baseado no outro Métodos Utilitários ObjBObjA Nome Idade Estado Civil Profissão $.extend(objA, objB); var objC = $.extend({},objA, objB); 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
  • 29. Estado Civil Novo Profissão Nova Nome Idade Estado Civil Profissão {} jQuery • $.extend() – estende as propriedades de um objeto baseado no outro Métodos Utilitários 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 Nome Idade
  • 30. Estado Civil Novo Profissão Nova Nome Idade Estado Civil Profissão {} jQuery • $.extend() – estende as propriedades de um objeto baseado no outro Métodos Utilitários 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 Nome Idade
  • 31. 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
  • 33. 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() { console.log('clique'); }); // 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); } );
  • 34. 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() { console.log('clique'); }); //Vinculando eventos usando o método $().on $('p').bind('click', function() { console.log('clique'); }); // 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); } );
  • 36. Usando o arquivo index.html, faça o seguinte: 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.
  • 38. Efeitos • jQuery fornece métodos que deixam efeitos visuais são triviais que nem parece que é feito de tanto CSS
  • 39. Efeitos • Principais efeitos • $().show; • $().hide; • $().fadeIn; • $().fadeOut; • $(‘h1’).fadeIn(300) • $(‘h1’).fadeIn(slow) • $().effect(tempo, callback);
  • 41. 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
  • 42. $.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); });
  • 45. 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
  • 46. 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
  • 48. 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 //O resto do código }); // 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 }); //O resto do código }(window.jQuery, window, document)); // O objecto global jQuery é passado como parâmetro
  • 49. jQuery • Manipulação do DOM. • Funciona bem se: • 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();
  • 50. jQuery • Manipulação do DOM. • Funciona bem se: • 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);
  • 51. jQuery • Manipulação de eventos • Funciona bem se: • 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"); });
  • 52. 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
  • 54. 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>
  • 55. 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>
  • 56. Quiz E essa? $('li#activated').parent().children() • uma <ul> • uma <li> • uma lista com <li>s • uma lista com <ul>s
  • 57. Quiz E essa? $('li#activated').parent().children() • uma <ul> • uma <li> • uma lista com <li>s • uma lista com <ul>s
  • 58. 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
  • 59. 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

Notas do Editor

  1. <h1 id="#title">Register Yourself</h1> <p class="required">Required Field</p> <form > <div> <label for="name">Name: </label> <input type="text" name="name">* </div> <div> <label class="email">Email:</label> <input type="email"name="email">* </div> <div> <label id="website">Website:</label> <input type="text" name="website"> </div> <div> <label for="comment">Comment:</label> <textarea type="textarea" name="comment"></textarea> </div> <div> <label for="gender">Gender:</label> <input type='radio' name="gender" id="female">Female</input> <input type='radio' name="gender" id="male">Male</input> </div> <button type="submit">Submit</button> </form>
  2. <h1 id="#title">Register Yourself</h1> <p class="required">Required Field</p> <form > <div> <label for="name">Name: </label> <input type="text" name="name">* </div> <div> <label class="email">Email:</label> <input type="email"name="email">* </div> <div> <label id="website">Website:</label> <input type="text" name="website"> </div> <div> <label for="comment">Comment:</label> <textarea type="textarea" name="comment"></textarea> </div> <div> <label for="gender">Gender:</label> <input type='radio' name="gender" id="female">Female</input> <input type='radio' name="gender" id="male">Male</input> </div> <button type="submit">Submit</button> </form>
  3. <h1 id="#title">Register Yourself</h1> <p class="required">Required Field</p> <form > <div> <label for="name">Name: </label> <input type="text" name="name">* </div> <div> <label class="email">Email:</label> <input type="email"name="email">* </div> <div> <label id="website">Website:</label> <input type="text" name="website"> </div> <div> <label for="comment">Comment:</label> <textarea type="textarea" name="comment"></textarea> </div> <div> <label for="gender">Gender:</label> <input type='radio' name="gender" id="female">Female</input> <input type='radio' name="gender" id="male">Male</input> </div> <button type="submit">Submit</button> </form>
  4. Exercícios Selecionando Abra o arquivo/exercises/index.html no seu navegador. Use o arquivo /exercises/js/ sandbox.js ou trabalhe no Firebug para fazer o seguinte: 1. Selecione todos os elementos DIV que têm a classe "module". 2. Escreva três seletores que você pode usar para obter o terceiro item na lista não-ordenada #myList. Qual é o melhor para se usar? Por quê? 3. Selecione o label para o input de busca usando um seletor de atributo. O básico de jQuery 35 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 de uma tabela. Atravessamento Abra o arquivo/exercises/index.html no seu navegador. Use o arquivo /exercises/js/ sandbox.js ou trabalhe no Firebug para fazer o seguinte: 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 atravesse 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; atravesse 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. Manipulando Abra o arquivo/exercises/index.html no seu navegador. Utilize o arquivo /exercises/js/ sandbox.js ou use o Firebug para realizar o seguinte: 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.
  5. <h1 id="#title">Register Yourself</h1> <p class="required">Required Field</p> <form > <div> <label for="name">Name: </label> <input type="text" name="name">* </div> <div> <label class="email">Email:</label> <input type="email"name="email">* </div> <div> <label id="website">Website:</label> <input type="text" name="website"> </div> <div> <label for="comment">Comment:</label> <textarea type="textarea" name="comment"></textarea> </div> <div> <label for="gender">Gender:</label> <input type='radio' name="gender" id="female">Female</input> <input type='radio' name="gender" id="male">Male</input> </div> <button type="submit">Submit</button> </form>
  6. Criando uma dica de Input Abra o arquivo /exercises/index.html no seu navegador. Use o arquivo /exercises/js/ inputHint.js ou trabalhe no Firebug. Sua tarefa é usar o texto do label para o input da busca para criar um texto de "hint" para o input da busca. Os passos são os seguintes: 1. Sete o valor do input de busca para o texto do elemento label 2. Adicione uma classe "hint" ao input de busca 3. Remova o elemento label 4. Faça um Bind do evento focus no input de busca que remove o texto de hint e a classe "hint". 5. Faça um bind do evento blur para o input de busca que restaura o texto de hint e a classe "hint" se nenhum texto for informado. Quais outras considerações poderiam haver se você estivesse criando esta funcionalidade para um site real? Adicionando navegação por abas Abra o arquivo/exercises/index.html no seu navegador. Use o arquivo /exercises/js/ tabs.js. Sua tarefa é criar uma navegação por abas para os dois elementos div.module. Para fazer isto: 1. Esconda todos os modules. 2. Crie uma lista não-ordenada antes do primeiro módulo. 3. Itere sobre os módulos usando $.fn.each. Para cada módulo, use o texto para o elemento h2 como o texto para um item da lista. 4. Crie um bind do evento click no item de lista que: • Exiba o módulo relacionado e esconda qualquer outro módulo. • Adicione uma classe "current" para o item de lista clicado. • Remova a classe "current" do outro item de lista. 5. Por último, mostre a primeira tabela.
  7. <h1 id="#title">Register Yourself</h1> <p class="required">Required Field</p> <form > <div> <label for="name">Name: </label> <input type="text" name="name">* </div> <div> <label class="email">Email:</label> <input type="email"name="email">* </div> <div> <label id="website">Website:</label> <input type="text" name="website"> </div> <div> <label for="comment">Comment:</label> <textarea type="textarea" name="comment"></textarea> </div> <div> <label for="gender">Gender:</label> <input type='radio' name="gender" id="female">Female</input> <input type='radio' name="gender" id="male">Male</input> </div> <button type="submit">Submit</button> </form>