Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Jquery Aula 1
2
O que é jQuery e uma biblioteca do javascript que permite uma forma muito mais poderosa e simples de implementar recursos de programação.
3
O que é O objetivo do jquery e implementar recursos de script na sua aplicação web de uma forma muito mais rapida e direta. Tarefas que exigem a implementação de diversas linhas no javascript são transcritas para uma unica linha de script jquery. jQuery também simplifica a implementação de tarefas complicadas como AJAX emanipulação de DOM. As bibliotecas do jquery implementam: HTML/DOM CSS HTML eventos e metodos Efeitos e animações AJAX
4
Por que Jquery ? Jquery e a biblioteca mais popular e flexivel do mercado, muitas empresas de tecnologia utilizam e implementam compatibilidades com as suas tecnologias: Google Microsoft IBM Netflix
5
Adicionando Jquery a sua página
Você pode fazer o download da biblioteca do jquery atraves do site: jQuery.com Existem diversas versões de produção e teste Coloque o arquivo na mesma pasta de sua página e adicione a referencia: <head> <script src="jquery min.js"> </script></head>
6
Sintaxe do Jquery Jquery e baseado em eventos relacionados a um determinado seletor. Sintaxe basica: $(seletor).action() O simbolo $ define que a sintaxe pertence ao jQuery. O (seletor) permite a busca dos elementos HTML. O action() e o evento iniciado o metodo a ser executado pelo elemento HTML
7
Sintaxe do JQuery Exemplos: $(this).hide() – esconde o elemento atual.
$("p").hide() – esconde todas as tags <p>. $(".test").hide() – esconde todos os elementos com a prpriedade class="test". $("#test").hide() – esconde todos os elementos com id="test". jQuery utiliza a sintaxe dos seletores CSS.
8
Evento Document Ready Todo conteúdo do jquery deve estar contida em um evento que identifica que a página já foi totalmente carregada e pronta. $(document).ready(function(){ // jQuery methods go here });
9
Seletores E uma dos recursos mais importantes do jquery
O seletor são utilizados para procurar ou selecionar um elemento em HTML e baseado no: id, classes, tipos, atributos, Valores de atributos. São baseados nos seletores do CSS porem permite uma gama maior de implentações. Todos seletores tem esta caracteristica: $().
10
Seletores $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
11
Seletores Seletor por ID Ente aspas em com o simbolo de #
$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
12
Seletores Seletor por classe
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
13
Outros Seletores $("*") Seleciona todos os elementos
$(this) Elemento atual $("p.destaque") seleciona todas as tags p com a classe destaque $("p:first") seleciona a primeira ocorrencia da tag <P> $("ul li:first") seleciona a primeira tag <li> de uma lista <ul> $("[readonly]") Seleciona todas as tags que contem o atributo readonly $("[size]") Seleciona todas as tags que contem o atributo size
14
Outros Seletores $("input[size=50]") selecina todos os objetos
do tipo input com o atributo size = 50 $("tr:even") seleciona todas as linhas pares de uma tabela $("tr:odd") seleciona todas as linhas impares
![Outros Seletores $( input[size=50] ) selecina todos os objetos](http://slideplayer.com.br/slide/7312929/24/images/14/Outros+Seletores+%24%28+input%5Bsize%3D50%5D+%29+selecina+todos+os+objetos.jpg "do tipo input com o atributo. size = 50. $( tr:even ) seleciona todas as linhas pares. de uma tabela. $( tr:odd ) seleciona todas as linhas impares.")
Apresentações semelhantes
