Html dom, eventos, jquery

HTML DOMRicardo Cavalcantikvalcanti@gmail.com

Algumas Ferramentas“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page!”http://getfirebug.com

JavacriptBasico: tag <script><script type="text/javascript">document.write("Hello World!");</script>É executadoassimquecarregadoSe o script alterar a página, coloque no finalColocar no final é sempreuma boa práticadocument.write()Output para a página

Javascript Básico: arquivo .jsPara incluir arquivos externos<script type="text/javascript“ src="xxx.js"></script>Boa prática: minifique e unifique os arquivos .jsYUI Compressor e Google ClosureCompiler

Browser objects: windowRepresenta uma janela aberta no browseralert( msg )confirm()window.locationInformações sobre a URLwindow.screenwindow.historywindow.navigator

Browser objects: window.navigatorInformações sobre o browsercookieEnabledappNameuserAgent

Browser objects: window.historyPara navegar pelo históricoback()forward()go()

DOM: introduçãoDocumentObjectModel: um conjunto de interfacesUma API para HTML e XMLRepresentação estrutural do documentoPermite modificação do conteúdo e do visualLiga as páginas aos scripts

DOM: documento HTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ToDolist</title> </head> <body> <div>What I need to do.</div> <p title="ToDolist">Mylist:</p> <ul> <li>Finishpresentation</li> <li>Cleanupmy home.</li> <li>Buy a bottleofmilk. (Maybebeerwillbebetter?;)</li> </ul> </body></html>htmlHeadbodyMetatitledivPultitleli

DOM: encontrando elementos<input type="text" id="message" value="Messagesgoeshere..."/>...var msgInput = document.getElementById("message");<ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul>...var items = document.getElementsByTagName("li");

DOM: elements<p title="ToDo list">My tasks</p>Tipos de nodesHTML elementAttributeTextnodeptitleTextnodeToDo listMy tasks

DOM: atributos de ElementnodeNamenodeValuenodeTypeparentNodechildNodesﬁrstChildlastChildpreviousSiblingnextSiblingattributesownerDocument

DOM: objeto documentA raiz para a árvore DOMdocument.getElementByIddocument.getElementsByNamedocument.getElementsByTagName

DOM: manipulação do DOMvar item = document.createElement("li");var text = document.createTextNode(message);item.appendChild(text);parent.appendChild(item);parent.insertBefore(someNode, item);parent.innerHTML = parent.innerHTML + ("<li>"+message+"</li>");parent.removeChild(item);

DOM: element.styleÉ possível mudar o visual do elemento através do javacriptvar el = document.getElementById(“myDiv”);el.style.display= “none”;

Eventos: introduçãoPara tornar páginas dinâmicasFunções que executarão quando eventos ocorreremO retorno da função pode bloquear a execução de uma ação posterior

Eventos: definindo eventosInline, na tag html<input type="text" size="30" id="email" onchange="checkEmail()">functioncheckEmail(){ //...}Não use! É ruim escrever código javascript no meio do html

Eventos: definindo eventosDiretamente no elemento<input type="text" size="30" id="email" >var elEmail = document.getElementById(“email”);elEmail.onchange = function(){ ...};Posso executar a função do eventoelEmail.onchange()thisé o elemento onde ocorreu o eventoDesvantagem: apenas uma função por evento.

Eventos: modelos avançadosAdicionando um eventhandlervar addBtn = document.getElementById("addBtn");//...addBtn.addEventListener('click', function(){ //codegoeshere},false);addBtn.attachEvent('click', function(){ //codegoeshere});thisé o elemento onde ocorreu o evento

Eventos: capturing & bubblingSe ambos tiverem onclick, qual é executado primeiro?Capturing: div a primeiroBubbling: div b primeiroW3C definiu as duas possibilidadesaddEventListener(“click”, fn, boolean)False: capturingTrue: bubling

Eventos: eventos de mousemousedownmouseupclickdblclickmousemoveA cada pixelmouseovermouseout

Eventos: teclaskeydownkeypresskeyupfunctionnoNumbers(e) {var keynum, keychar, numcheck;if(window.event) { // IE keynum = e.keyCode}elseif(e.which) { //FFkeynum = e.which }keychar = String.fromCharCode(keynum);numcheck = /\d/;return !numcheck.test(keychar);}<input type="text" onkeydown="return noNumbers(event)" />

Eventos: outros eventosblurfocus

jQuery: introduçãoEscondendo divs com javacriptdivs = document.getElementByTagName(‘div’); for (i = 0; i < divs.length; i++) {divs[i].style.display = ‘none’;}

jQuery: introduçãoEscondendo divs com javacriptdivs = document.getElementByTagName(‘div’); for (i = 0; i < divs.length; i++) {divs[i].style.display = ‘none’;}Escondendo divs com jquery$(‘div’).hide();

jQuery: filosofiaEncontre HTMLFaça alguma coisa$() função seletoraO mesmo que jQuery()Incluam na páginahttp://code.jquery.com/jquery-1.4.3.min.jsOu baixem em http://jquery.com/

jQuery: seletores CSSUm pouco de CSS#myId encontra o elemento com o id ‘myId’.myClass encontra todos os elementos com a class ‘myClass’table encontra todos os elementos com a tagtabletable#myId encontra a tabela com id ‘myId’table #myId encontra o elemento com id ‘myId’ que esteja dentro de um table

jQuery: seletores$(‘#myId’) pega o elemento com o id ‘myId’$(‘li:first’) pega o primeiro li$(‘tr:odd’) pega todas as tablerows ímpares$(‘a[target=_blank]’) pega todos os a cujo target é _blank$(‘form[id^=step]’) pega todos os forms cujo id começa com ‘step’

jQuery: seletores CSSDepois de achar$(‘#myId’)Fazer$(‘#myId’).addClass(‘redbox’);

jQuery: coisas legaisMétodos encadeados$(“div”).addClass(“redbox”) .fadeOut();Um método, várias aplicações$(...).html();$(...).html(“<p>hello</p>”);$(...).html(function(i, oldHtml){return “<p>hello “ + i + “</p>”; });

jQuery: métodosMovingElements: append(), appendTo(), before(), after(), Attributescss(), attr(), html(), val(), addClass()Traversingfind(), is(), prevAll(), next(), hasClass()Eventsbind(), trigger(), unbind(),, click()Effectsshow(), fadeOut(), toggle(), animate()

jQuery: um pouco mais de $()Você pode passar uma função para $() para ser executada quando a página carregar$(function(){//executa quando o DOM estiver pronto});o mesmo que$(document).ready(function(){ });

Exemplo: criando e incluindo elementosPegue um elemento com o id foo e adicione html$(“#foo”)<html><body><div>jQuery</div><div id=”foo”>example</div></body></html>

Exemplo: criando e incluindo elementosPegue um elemento com o id foo e adicione html$(“#foo”).append(“<p>test</p>”);<html><body><div>jQuery</div><div id=”foo”>example</div></body></html>

Exemplo: criando e incluindo elementosPegue um elemento com o id foo e adicione html$(“#foo”).append(“<p>test</p>”);<html><body><div>jQuery</div><div id=”foo”>example<p>test</p></div></body></html>

Exemplo: movendo elementosMova os parágrafos para o elemento com id “foo”$(“p”)<html><body><div>jQuery<p>moving</p> <p>paragraphs</p></div><div id=”foo”>example</div></body></html>

Exemplo: movendo elementosMova os parágrafos para o elemento com id “foo”$(“p”).appendTo(“#foo”);<html><body><div>jQuery<p>moving</p> <p>paragraphs</p></div><div id=”foo”>example</div></body></html>

Exemplo: movendo elementosMova os parágrafos para o elemento com id “foo”$(“p”).appendTo(“#foo”);<html><body><div>jQuery</div><div id=”foo”>example<p>moving</p> <p>paragraphs</p></div></body></html>

jQuery: Atributos.attr(‘id’).html().val().css(“top”).width().attr(‘id’,’foo’).html(“<p>hi</p>”).val(“newval”).css(“top”, “80px”).width(60)GetSet

jQuery: AtributosSetar a bordapara 1px black$(...).css(“border”, “1px solidblack”);Setar várias propriedades css$(...).css({ “background”: “yellow”, “height”: “400px”});Setar todos os href dos links para google.com$(“a”).attr(“href”, “http://google.com”);

jQuery: EventosQuando um botão é clicado, faz algo$(“button”).click(function(){something();});

jQuery: Animação e efeitosEfeitos Hide e showfadeIn e fade outSlide up e slide down

jQuery: AnimaçãoCada vez que clicar, alterne slide up e down o primeiro div$(...).click(function(){ $(“div:first”).slideToggle();});Animar os elementos até que tenham 300px de largura, em 0.5 segundos$(...).animate({ “width”: “300px” }, 500);Tire o foco do elemento realizando fade out até 30% de opacity em 0.5 segundos$(...).fadeTo(500, 0.3);

jQuery: Transversing 1Pegue todas as células anteriores a #myCell$(“#myCell”)<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body></html>

jQuery: Transversing 1Pegue todas as células anteriores a #myCell$(“#myCell”).prevAll()<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body></html>

jQuery: Transversing 1Pegue todas as células anteriores a #myCell$(“#myCell”).prevAll().andSelf()<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body></html>

jQuery: Transversing 2Encontre os parágrafos a partir da tabela$(“table”);<html><body><table></table><div><p>foo</p><span>bar</span></div></body></html>

jQuery: Transversing 2Encontre os parágrafos a partir da tabela$(“table”).next();<html><body><table></table><div><p>foo</p><span>bar</span></div></body></html>

jQuery: Transversing 2Encontre os parágrafos a partir da tabela$(“table”).next().find(“p”);<html><body><table></table><div><p>foo</p><span>bar</span></div></body></html>

Html dom, eventos, jquery

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Html dom, eventos, jquery (20)

Último (16)

Html dom, eventos, jquery