Jquery Framework

Luiz Carlos Chaves

luiz.chaves@ifpb.edu.br

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

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 JS
divs = document.getElementByTagName(‘div’);
for (i = 0; i < divs.length; i++) {
divs[i].style.display = ‘none’;
}

Ocultar divs com jQuery
jQuery(‘div’).hide();

Função jQuery Método de jQuery

Argumento

Isso é realmente
write less, do more

$ == jQuery
$ é um alias para jQuery

Adicionar classe odd na tabela
jQuery('table tr:nth-child(odd)').addClass('odd');


Adicionar classe odd na tabela
$('table tr:nth-child(odd)').addClass('odd');

$(‘div’).hide();

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

$('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(){})

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!

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>
</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>
</body>
</html>

Manipulação DOM
$('p').appendTo('#foo')
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</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().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(){
$(this)
.fadeOut()
.fadeIn();
});
});

Efeitos
.slideUp()
.slideDown()
$(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 FlexSlider

http://www.woothemes.com/flexslider/ http://flexslider.woothemes.com/index.html

Arquivos necessários
<link rel="stylesheet" href="flexslider.css"
type="text/css">
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>

Estrutura no HTML
<div class="flexslider">
<ul class="slides">
<li><img src="slide1.jpg" /></li>
</ul>
</div>

Estrutura JavaScript
<script type="text/javascript" charset="utf-8">
$(function() {
$('.flexslider').flexslider();
});
</script>

Configurando o FlexSlider
$(function() {
$('.flexslider').flexslider(
{animation: "slide",
animationLoop: true,
itemWidth: 400}
);
});
</script>

jQuery Masked Input

http://digitalbush.com/projects/masked-input-plugin/

jQuery Masked Input
<script src="jquery.maskedinput.js"></script>

jQuery Masked Input
Estrutura 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 Input
$(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 UI
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-ui.js"></script>

jQuery UI
Estrutura no HTML
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>...</p>
</div>
...
<h3>Section 4</h3>
<div>
<p>...</p>
</div>
</div>

jQuery UI
$(function() {
$( "#accordion" ).accordion();
});
</script>

Outros
jQuery 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/

...

Referências
http://jquery.com/

http://oscarotero.com/jquery/

http://www.slideshare.net/1Marc/jquery-essentials

http://www.slideshare.net/remy.sharp/write-less-do-more

http://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

Jquery Framework

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Jquery Framework