Html dom, eventos, jquery

HTML DOM Ricardo Cavalcanti kvalcanti@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> É executadoassimquecarregado Se o script alterar a página, coloque no final Colocar no final é sempreuma boa prática document.write() Output para a página

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

Browser objects: window Representa uma janela aberta no browser alert( msg ) confirm() window.location Informações sobre a URL window.screen window.history window.navigator

Browser objects: window.navigator Informações sobre o browser cookieEnabled appName userAgent

Browser objects: window.history Para navegar pelo histórico back() forward() go()

DOM: introdução DocumentObjectModel: um conjunto de interfaces Uma API para HTML e XML Representação estrutural do documento Permite modificação do conteúdo e do visual Liga 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> html Head body Meta title div P ul title li

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 nodes HTML element Attribute Textnode p title Textnode ToDo list My tasks

DOM: atributos de Element nodeName nodeValue nodeType parentNode childNodes ﬁrstChild lastChild previousSibling nextSibling attributes ownerDocument

DOM: objeto document A raiz para a árvore DOM document.getElementById document.getElementsByName document.getElementsByTagName

DOM: manipulação do DOM var 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 javacript var el = document.getElementById(“myDiv”); el.style.display= “none”;

Eventos: introdução Para tornar páginas dinâmicas Funções que executarão quando eventos ocorrerem O retorno da função pode bloquear a execução de uma ação posterior

Eventos: definindo eventos Inline, 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 eventos Diretamente no elemento <input type="text" size="30" id="email" > var elEmail = document.getElementById(“email”); elEmail.onchange = function(){ ...}; Posso executar a função do evento elEmail.onchange() thisé o elemento onde ocorreu o evento Desvantagem: apenas uma função por evento.

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

Eventos: capturing & bubbling Se ambos tiverem onclick, qual é executado primeiro? Capturing: div a primeiro Bubbling: div b primeiro W3C definiu as duas possibilidades addEventListener(“click”, fn, boolean) False: capturing True: bubling

Eventos: eventos de mouse mousedown mouseup click dblclick mousemove A cada pixel mouseover mouseout

Eventos: teclas keydown keypress keyup functionnoNumbers(e) {var keynum, keychar, numcheck; if(window.event) { // IE keynum = e.keyCode} elseif(e.which) { //FF keynum = e.which } keychar = String.fromCharCode(keynum); numcheck = //;return !numcheck.test(keychar); } <input type="text" onkeydown="return noNumbers(event)" />

Eventos: outros eventos blur focus

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

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

jQuery: filosofia Encontre HTML Faça alguma coisa $() função seletora O mesmo que jQuery() Incluam na página http://code.jquery.com/jquery-1.4.3.min.js Ou baixem em http://jquery.com/

jQuery: seletores CSS Um 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 tagtable table#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 CSS Depois de achar $(‘#myId’) Fazer $(‘#myId’).addClass(‘redbox’);

jQuery: coisas legais Mé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étodos MovingElements: append(), appendTo(), before(), after(), Attributes css(), attr(), html(), val(), addClass() Traversing find(), is(), prevAll(), next(), hasClass() Events bind(), trigger(), unbind(),, click() Effects show(), 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 elementos Pegue 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 elementos Pegue 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 elementos Pegue 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 elementos Mova 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 elementos Mova 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 elementos Mova 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) Get Set

jQuery: Atributos Setar 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: Eventos Quando um botão é clicado, faz algo $(“button”).click(function(){ something(); });

jQuery: Animação e efeitos Efeitos Hide e show fadeIn e fade out Slide up e slide down

jQuery: Animação Cada 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 1 Pegue 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 1 Pegue 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 1 Pegue 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 2 Encontre os parágrafos a partir da tabela $(“table”); <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>

jQuery: Transversing 2 Encontre 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 2 Encontre 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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Html dom, eventos, jquery

Similar a Html dom, eventos, jquery (20)

Html dom, eventos, jquery