Jquery Framework
Upcoming SlideShare
Loading in...5
×
 

Jquery Framework

on

  • 515 views

 

Statistics

Views

Total Views
515
Views on SlideShare
515
Embed Views
0

Actions

Likes
1
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jquery Framework Jquery Framework Presentation Transcript

  • Luiz Carlos Chavesluiz.chaves@ifpb.edu.br
  • Por que usar o jQuery?
  • Quem usa? http://trends.builtwith.com/javascript/jQuery
  • Qual é a dominância? http://trends.builtwith.com/javascript
  • O que o pessoal está procurando?http://www.google.com/trends/explore#q=dojo+javascript,jquery+javascript,yui+javas cript,prototype+javascript,mootools+javascript
  • O que é jQuery?
  • Definição Jquey é um framework JavaScript:• Selector engine• Manipulação do DOM• Eventos JS• Animação• Ajax
  • Características• Testado em 50 browser e 11 plataformas;• Simplifica e acelera o desenvolvimento Web;• Leve! 33 KB na versão simplificada;• Suporte a Plug-in com inúmeras implementações;• Comunidade grande e ativa;• Open source
  • É mais fácil desenvolver com jQuery!
  • Ocultar divs apenas com JSdivs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’;}Ocultar divs com jQueryjQuery(‘div’).hide();
  • Função jQuery Método de jQueryjQuery(‘div’).hide(); Argumento
  • var tables = document.getElementsByTagName(table);for (var t = 0; t < tables.length; t++) { ! var rows = tables[t].getElementsByTagName(tr); ! for (var i = 1; i < rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += odd; } }}jQuery(table tr:nth-child(odd)).addClass(odd);
  • Isso é realmentewrite less, do more
  • $ == jQuery$ é um alias para jQuery
  • Adicionar classe odd na tabelajQuery(table tr:nth-child(odd)).addClass(odd);Ocultar divs com jQueryjQuery(‘div’).hide();
  • Adicionar classe odd na tabela$(table tr:nth-child(odd)).addClass(odd);Ocultar divs com jQuery$(‘div’).hide();
  • Find something, do something
  • Find something $( ) recebe um Seletor$("*") $("input[value=‘hot’]")$("#primeiro") $("p a")$(".odd") $("p:first")$("tr") $("div:contains(‘John’) ")$("tr,td,table") $("p:visible")$("ul>li") $("input:checked")
  • Find something$( ‘p’) Seleciona todos os parágrafos
  • Do something$( ‘p’).hide() Seleciona todos os parágrafos e os ocultam
  • Create something, do something
  • $( ‘<li>home</li>’).appendTo(“ul#nav”)Cria um elemento <li> com texto “home” e Insere na lista com id “nav”
  • Encadeamento & coloção
  • Encadeamento$(p) .hide();$(p) .fadeIn(3000);
  • Encadeamento$(p) .hide() .fadeIn(3000);
  • Coleção$(p) .each( function(index){ $(this).html( index+ - +$(this).text() ); } );
  • Tipos de parâmetros do jQuery
  • • CSS Selector normais e personalizadas jQuery(‘div’) e jQuery(‘:first’)• HTML jQuery(‘<li><a href=”#”>link</a></li>’)• Elemento DOM jQuery(document) ou jQuery(document.createElement(‘a’))• Função jQuery(function(){})
  • Um método, vários usos
  • Variações do método .html()• .html() $(‘p’).html();• .html(stringHTML) $(‘p’).html(‘Lorem Ipsum’);• .html(function(index, oldhtml)) $(‘p’).html(function(i){ return “<p>hello “ + i + “</p>”; });
  • O jQuery no <head> não está funcionando!
  • <script> $(document).ready(function(){ $(p).hide().fadeIn(3000); });</script>
  • <script> $(function(){ $(p).hide().fadeIn(3000); });</script>
  • jQuery API
  • Eventos$(input).focus()$(input).change()$(input).blur()$(input).keyup()$(.button).click()$(.content).hover()$(div).delegate()$(div).bind()
  • Eventos.click()$(function(){ $("div#teste").click(function(){ $(this) .hide(); });});
  • Atributo/CSS Obter Alterar$attr(“href") $attr(“href", “link")$val() $val(“novo valor")$html() $html("<p>Novo</p>")$css("border") $css("border", "none")$width() $width("30")
  • Atributo/CSS Manipulação de Atributo$(a.nav).attr(href, http://flickr.com/);$(a.nav).attr({href: http://flickr.com/,id: flickr});$(#intro).removeAttr(id);
  • Atributo/CSS Manipulação de CSS$(p).css(font-size, 20px);$(p).css( {font-size: 20px, color: red});$(#intro).addClass(highlighted);$(#intro).removeClass(highlighted);$(#intro).toggleClass(highlighted);
  • Manipulação DOM$(div.section).append($(h1))$(div.section).appendTo($(body))$(div.section).html($(h1))$(div.section).prepend($(h1))$(div.section).text(<p>teste</p>)$(div.section).after($(h1))$(div.section).remove()
  • Manipulação DOM$(#foo)<html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body></html>
  • Manipulação DOM$(#foo).append(<p>test</p>)<html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body></html>
  • Manipulação DOM$(#foo).append(<p>test</p>)<html> <body> <div>jQuery</div> <div id=”foo”>example<p>test</p></div> </body></html>
  • Manipulação DOM$(p)<html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body></html>
  • Manipulação DOM$(p).appendTo(#foo)<html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body></html>
  • Manipulação DOM$(p).appendTo(#foo)<html> <body> <div>jQuery</div> <div id=”foo”>example <p>moving</p> <p>paragraphs</p> </div> </body></html>
  • Navegação DOM$(div.section).parent()$(div.section).next()$(div.section).prev()$(div.section).nextAll(div)$(div.section).siblings()$(h1:first).parents()$(div).children()$(div).children().eq(2)$(div).find(a)
  • Navegação no DOM$(table)<html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body></html>
  • Navegação no DOM$(table).next()<html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body></html>
  • Navegação no DOM$(table).next()<html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body></html>
  • Navegação no DOM$(table).next().find(p);<html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body></html>
  • Navegação no DOM$(table).next().find(p);<html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body></html>
  • Efeitos$(div.section).show()$(div.section).hide()$(div.section).toggle()$(div.section).fadeIn()$(div.section).fadeOut()$(div.section).slideUp()$(div.section).slideDown()
  • Efeitos.fadeOut().fadeIn()$(function(){ $("div#teste").click(function(){ $(this) .fadeOut() .fadeIn(); });});
  • Efeitos.slideUp().slideDown()$(function(){ $("div#teste").click(function(){ $(this) .slideUp() .slideDown(); });});
  • Ajax$.getJSON()$.get()$.post()$.getScript(div)$(div.section).load(page.html)$.ajax()$.ajaxSetup()
  • Ajax.load(‘url’)$(‘div’) .load(‘pagina.html div’)
  • Ajax$.getJSON(url, sucess)$.getJSON( "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>") .attr("src", item.media.m) .appendTo("#images"); }); });
  • Plug-in:Quando o do something não existe
  • WooThemes FlexSliderhttp://www.woothemes.com/flexslider/ http://flexslider.woothemes.com/index.html
  • WooThemes FlexSliderArquivos necessários<link rel="stylesheet" href="flexslider.css"type="text/css"><script src="jquery.js"></script><script src="jquery.flexslider.js"></script>
  • WooThemes FlexSliderEstrutura no HTML<div class="flexslider"> <ul class="slides"> <li><img src="slide1.jpg" /></li> <li><img src="slide2.jpg" /></li> <li><img src="slide3.jpg" /></li> </ul></div>
  • WooThemes FlexSliderEstrutura JavaScript<script type="text/javascript" charset="utf-8"> $(function() { $(.flexslider).flexslider(); });</script>
  • WooThemes FlexSliderConfigurando o FlexSlider<script type="text/javascript" charset="utf-8"> $(function() { $(.flexslider).flexslider( {animation: "slide", animationLoop: true, itemWidth: 400} ); });</script>
  • jQuery Masked Inputhttp://digitalbush.com/projects/masked-input-plugin/
  • jQuery Masked InputArquivos necessários<script src="jquery.js"></script><script src="jquery.maskedinput.js"></script>
  • jQuery Masked InputEstrutura no HTML<input type="text" name="cpf" id="cpf"><br><input type="text" name="cep" id="cep"><br><input type="text" name="date" id="date"><br><input type="text" name="telefone" id="telefone">
  • jQuery Masked InputEstrutura JavaScript<script type="text/javascript" charset="utf-8"> $(function() { $("#cpf").mask("999.999.999-99"); $("#cep").mask("99.999-999"); $("#date").mask("99/99/9999"); $("#telefone").mask("(99)9999-9999"); });</script>
  • jQuery UI http://jqueryui.com/
  • jQuery UIArquivos necessários<link rel="stylesheet" href="jquery-ui.css" /><script src="jquery.js"></script><script src="jquery-ui.js"></script>
  • jQuery UIEstrutura no HTML<div id="accordion"> <h3>Section 1</h3> <div> <p>...</p> </div> ... <h3>Section 4</h3> <div> <p>...</p> </div></div>
  • jQuery UIEstrutura JavaScript<script type="text/javascript" charset="utf-8"> $(function() { $( "#accordion" ).accordion(); });</script>
  • OutrosjQuery Lightbox http://leandrovieira.com/projects/jquery/lightbox/Validation http://bassistance.de/jquery-plugins/jquery-plugin-validation/jQuery File Upload http://blueimp.github.com/jQuery-File-Upload/...
  • $(‘DÚVIDAS’).tirar()
  • Referênciashttp://jquery.com/http://oscarotero.com/jquery/http://www.slideshare.net/1Marc/jquery-essentialshttp://www.slideshare.net/remy.sharp/write-less-do-morehttp://medleyweb.com/web-dev/40-best-jquery-plugins-every-web-developer/http://designshack.net/articles/javascript/40-awesome-jquery-plugins-you-need-to-check-out/http://webdesignledger.com/resources/best-jquery-plugins-of-2012