jQuery - A biblioteca javascript
•
2 gostaram•500 visualizações
Este documento apresenta a biblioteca jQuery, que permite escrever menos código JavaScript para realizar tarefas comuns no DOM, como encontrar e alterar elementos HTML, ouvir eventos do usuário e animar conteúdo. Explica brevemente como o DOM representa a estrutura HTML e fornece exemplos de como selecionar e manipular elementos, adicionar eventos de clique e animações usando jQuery.
Mais conteúdo relacionado
Mais procurados
Mais procurados (13)
Destaque
Semelhante a jQuery - A biblioteca javascript
Semelhante a jQuery - A biblioteca javascript (20)
Último
Último (8)
jQuery - A biblioteca javascript
- 1. jQuery A biblioteca javascript Diogo Benicá
- 2. Escreva menos Faça mais
- 3. Encontrar elementos em um HTML Alterar conteúdo HTML Ouvir ações do usuário Animar conteúdo HTML Conversar com outras páginas/sistemas
- 4. Javascript! Mas antes...
- 5. DOM html <html> <head> head <title> Meu título title </title> </head> Meu título <body> <h1>Notícias</h1> body <p> Primeira notícia h1 </p> Notícias </body> </html> p Primeira notícia
- 6. Porém, os navegadores tem pequenas diferenças no DOM
- 8. Exemplos Legenda Não! Evitar Yeah!
- 9. Encontrar elementos em um HTML html <body> <a href=”#” id=”meu_link” class=”classe_do_link”> </body> jQuery $(“a”) $(“#meu_link”) $(“.classe_do_link”) $(“a.classe_do_link”)
- 10. Alterar conteúdo HTML html <body> <span id=”meu_texto”>Hello jQuery!</span> </body> jQuery $(“#meu_texto”).html(“Hello!”) $(“#meu_texto”).append(“Hello!”).width(170) $(“#meu_input”).val(“jQuery”)
- 11. Ouvir ações do usuário html <a href=”#” id=”meu_link”> jQuery $(“#meu_link”).click( function(){ $(“#login-box”).show(); $(“#login-box > p”).html(“Bem-vindo!”); });
- 12. Animar conteúdo HTML html <div id=”minha_box”></div> jQuery $(“#meu_link”).animate({ opacity: 0.25, left: “+=50”, Com plugin backgroundColor: “red” });
- 13. Conversar com outras páginas/sistemas servidor GET http://site.com/produtos json jQuery $.getJSON(“http://site.com/produtos”, function(dados){ //dados é o retorno $.each(dados, function(){ // Loop para cada item que retornou no json }); );
- 14. $.getJSON(“http://site.com/produtos”, função) atalho para $.ajax({ dataType: “json”, url: “http://site.com/produtos”, success: função });
- 15. Fim