JQUERY Introduo seletores e eventos O que j
![Outros Seletores $("input[size=50]") selecina todos os objetos do tipo input com o atributo size](https://slidetodoc.com/presentation_image_h/0c1560180420518aee23fcd477bcd483/image-14.jpg "Outros Seletores $(\"input[size=50]\") selecina todos os objetos do tipo input com o atributo size")
- Slides: 22
JQUERY Introdução, seletores e eventos
O que é j. Query e uma biblioteca do javascript que permite uma forma muito mais poderosa e simples de implementar recursos de programação.
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. j. Query 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
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
Adicionando Jquery a sua página Você pode fazer o download da biblioteca do jquery atraves do site: j. Query. 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-1. 10. 2. min. js"> </script></head>
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 j. Query. O (seletor) permite a busca dos elementos HTML. O action() e o evento iniciado o metodo a ser executado pelo elemento HTML
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". j. Query utiliza a sintaxe dos seletores CSS.
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(){ // j. Query methods go here. . . });
Seletores E um dos recursos mais importantes do jquery Os seletores 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 permitem uma gama maior de implentações. Todos os seletores tem esta caracteristica: $().
Seletores $(document). ready(function(){ $("button"). click(function(){ $("p"). hide(); });
Seletores Seletor por ID Ente aspas em com o simbolo de # $(document). ready(function(){ $("button"). click(function(){ $("#test"). hide(); });
Seletores Seletor por classe $(document). ready(function(){ $("button"). click(function(){ $(". test"). hide(); });
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 ocorrência 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
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 de uma tabela
Eventos Evento e uma ação do cliente em relação com elementos da tela. Estes eventos no jquery podem ser associados a funções especificas Exemplos: � Movendo o mouse sobre um elemento � Selecionando uma opção � Clicando em objeto da tela
Eventos de Mouse � click Eventos de Formulário � dblclick � submit � mouse. Enter � change � mouse. Leave � focus Eventos de Teclado � blur � keypress Eventos de Janela � keydown � load � keyup � resize � Scroll � unload
Eventos Click $("p"). click(function(){ $(this). hide(); }); dbl. Click $("p"). dblclick(function(){ $(this). hide(); });
Eventos mouseenter – evento e iniciado quando o ponteiro do mouse fica sobre um elemento $("#p 1"). mouseenter(function(){ alert("You entered p 1!"); }); mouseleave – evento e iniciado quando o ponteiro do mouse abandona um item html $("#p 1"). mouseleave(function(){ alert("Bye! You now leave p 1!"); });
Eventos Mousedown – evento iniciado quando o botão esquerdo e pressionado $("#p 1"). mousedown(function(){ alert("Mouse down over p 1!"); }); Mouse. Up – evento iniciado quando o botão esquerdo do mouse e liberado após ser pressionado $("#p 1"). mouseup(function(){ alert("Mouse up over p 1!"); });
Eventos hover – primeira função quando o mouse fica sobre um elemento, segunda função quando o mouse sai. $("#p 1"). hover(function(){ alert("You entered p 1!"); }, function(){ alert("Bye! You now leave p 1!"); }); focus– função executada quando o objeto fica em destaque $("#p 1"). mouseup(function(){ alert("Mouse up over p 1!"); });
Eventos blur – função iniciada quando o objeto perde o foco $("#p 1"). mousedown(function(){ alert("Mouse down over p 1!"); });
Fonte http: //w 3 schools. com/jquery
J
Ajax sqlite
Jquery selectors tutorial
Prepend jquery
Technology applications examples
Infolight
Parallax transition
Jquery mobile
Ajax async
Jquery optimization selectors
Eventos mutuamente excluyentes e independientes
Organizacion de eventos deportivos y recreativos
Imagenes de mini atletismo
Eventos discretos ejemplos
Plan de contingencia contra incendios
Taxa de mortalidade geral formula
El abe
Invitaciones para eventos
Mc azabache eventos
Spa siglo 21
Mc azabache eventos
Foreia 001
Evento centinela
