jquery - a poderosa biblioteca javascript - minicurso
Post on 21-Dec-2014
4.108 Views
Preview:
DESCRIPTION
TRANSCRIPT
jQueryA poderosa biblioteca JavaScript.
Cloves Moreira Junior
Quem sou Eu?
Faço Sistemas de InformaçãoTrabalho como Desenvolvedor JavaSou um entusiasta jQuery!!!!
jQuery
jQuery é uma biblioteca JavaScript criada por John Resig e disponibilizada como software livre e aberto, ou seja, de emprego e uso regido segundo licença conforme as regras estabelecidas pelo MIT (Massachusetts Institute of Tecnology) e pelo GPL (GNU General Public Licence).
Quem Criou jQuery?
Após cinco meses da publicação de um artigo sobre a sua frustração em escrever código JavaScript no seu blog, apresentou publicamente os resultados de seus estudos em uma palestra com o nome de “jQuery, a nova onda para JavaScript”, proferida no BarCampNYC – Wrap Up, no dia 14 de janeiro de 2006.
“jQuery, a nova onda para JavaScript”,
Porque Surgiu jQuery?
De acordo com John Resig, “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?”, e vemos que isto realmente é real no desenvolvimento hoje em dia.
O Foco de jQuery
Destina-se a adicionar interatividade e dinamismo às páginas web, proporcionando ao desenvolvedor funcionalidades necessárias à criação de scripts que visem a incrementar de forma progressiva e não obstrutiva a usabilidade, a acessibilidade e o design.
É recomendado utilizar jQuery para:Adicionar efeitos visuais e animações;Acessar e manipular o DOM;Realizar requisições AJAX;Prover interatividade;Alterar conteúdosModificar apresentação e estilizaçãoSimplificar tarefas específicas de
JavaScript
OFF – Definição de DOM
Document Object Model- São modelos de objetos( com suas propriedades e métodos), expostos ao programador DHTML. Através do envio de mensagens a estes objetos, o programador a estes objetos, o programador pode explorar como está ocorrendo a interatividade com o usuário.
Como características, pode-se citar que o jQuery
Utiliza seletores CSS para localizar elementos componentes da estrutura de marcação HTML da página;
Possui arquitetura compatível com a instalação de plug-ins e extensões em geral;
É indiferente às inconsistências de renderização entre navegadores;
É capaz de interação implícita;Admite programação encadeada;É extensível.
E AJAX, O Que é?
AJAX é a sigla em inglês para Asynchronous JavaScript and XML e trata-se de uma técnica de carregamento de conteúdos em uma página web com uso de JavaScript e XML, HTML, PHP, ASP, JSON ou qualquer linguagem de marcação ou de programação capaz de ser recuperada de um servidor.
Para carregar a biblioteca é somente efetuar o carregamento externo:
<script type=”text/javascript” src=” jquery.js”>
</script>
Usando a biblioteca:
<script>
$(document).ready(
function(){
$(‘h1’).css({“background”:”#CCCCCC”});
});
</script>
Utilizando jQuery:
O símbolo $ é um pseudônimo ou comumente chamado alias da biblioteca, que por sua vez foi escrita com o identificador jQuery, assim pode-se acessá-la com o símbolo $ ou jQuery.
Existe também a função jQuery.noConflict() que permite criar um pseudônimo diferente para evitar possíveis conflitos.
<html> <head>
<script src="jquery.js"></script>
<script> var $j = jQuery.noConflict(); // Use jQuery via $j(...)
$j(document).ready(function(){ $j("div").css({“color”:”#cccccc”}); });$(‘#meuId').hide();
</script> </head> <body></body> </html>
Voce também pode....
Inserir html passando a marcação html como string.
Ex: $(‘<h1>Oi, eu estudo na PUC</h1>’).prependTo(‘body’);
E também efetuar a alteração em mais elementos ao mesmo tempo:
Ex: $(‘div,li’).css(‘background’,’#fff000’);
Seletores CSS 3
Outra característica que é extremamente expressiva e interessante é que a biblioteca implementa os poderosos seletores CSS 3 mesmo que estas não foram distribuídas ainda, e alguns seletores que pertencem somente à biblioteca.
Vemos um exemplo a seguir:
Pseudoseletor :eq()Uma funcionalidade poderosa da biblioteca jQuery é que
as seleções retornam um conjunto que pode ser manipulado como array. Isto significa que ao contrário do que ocorre com a linguagem JavaScript formal não há necessidade de construção de loops para se percorrer uma seleção de elementos no DOM. O pseudo seletor :eq() permite selecionar uma ou mais ocorrências de uma seleção jQuery, conforme esclarecem os exemplos a seguir.
1. $('h2:eq(0)'); // seleciona a 1a. ocorrência de h2 2. $('ul li:eq(5)'); // seleciona a 6a. ocorrência do item de uma lista3. $('p:eq(2n)'); // seleciona parágrafos de ordem ímpar
Outro exemplo:$('#tres')
next().children('li:first-child').css('fontWeight, 'bold');
Seleciona o elemento com id="tres" (terceira ocorrência de h2), usa o método next() para selecionar o elemento que vem depois dele (lista ul), procura entre os filhos children() de ul aquele que é o primeiro filho first-child e a ele aplica negrito.
Como me encontrar...
Fórum Clube da Programação -> www.clubedaprogramacao.com
clovesmjunior.blogspot.com -> meu blogTwitter-> http://twitter.com/clovesmjunior
Referências Bibliográficas:
http://docs.jquery.com/jQuery: A Bíblia do Programador
JavaScript – Mauricio Samy Silva
Mãos à Obra...
top related