Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

JQuery Presentation

Jquery é uma framework javascript que facilita o desenvolvimento do lado do cliente.
by

Mónica Rodrigues

on 16 July 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of JQuery Presentation

jQuery
"Write Less, Do More"
.Net Juniors
Academy
Mónica Rodrigues
Mónica Rodrigues
Estudante do ISEL
Conjuga os estudos com o trabalho.

1 ano de Experiência Profissional

Trabalha principalmente na área do desenvolvimento
Web em qualquer tecnologia.

ASP.NET MVC, jQuery, JavaScript, HTML, CSS, Adobe Flex, Action Script, PHP, Entity Framework Code First, entre outras.
Porquê JQuery e o que é isso?
2. Fácil de Usar
3. Cross-Browser
1. É uma framework Javascript
4. Declarativo
5. Torna o Javascript Simples
Links úteis
Filosofia
Seleccionar nós
da árvore DOM
Mandar fazer coisas
Desde adicionar, alterar,
filtrar, entre outros.
Terminar
Demo
Selecção de nós é feita usando
a função
$( .. )
ou
jQuery( .. )
que pode receber:
Selectores
string com html
nó DOM

A sintaxe dos selectores é a mesma que a dos CSS.
Portanto, quem sabe CSS sabe minimamente jQuery :-)
Alguns Métodos:
Percurso
each()
Manipulação
append()
before()
after()
Atributos,
HTML, CSS
addClass()
attr()
css()
html()
monica85rodrigues@gmail.com
$("p") ou jQuery("p")
$("p")
.css("color","red")
E muitos mais ...
$("p").css("color","red")
.attr("name","content")
Encadeamento de Chamadas
Ajax
get()
post()
getJson()
Effects
fadeIn()
slideToggle()
Ajax

var data = $("#bookForm").serialize();
$.post("/Books/Create", data, function(htmlResult) {
$("#booksList").html(htmlResult);
});
Sintaxe
Exemplo
post()
get()
getJson()
$.post( url [, data] [,success(data, textStatus, jqXHR)] [, dataType] )
$.getJSON("/Templating/GetAllBooks", function (booksList) {
$.tmpl(markupBook, booksList).appendTo("#booksList-remoteData");
});
$.getJSON( url [, data] [, success(data,
textStatus, jqXHR)] )
$.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )
$.get("/Charting/GetPercentages", function (result) {
for (var i = 0; i < result.length; ++i) {
var point = [result[i].Name, result[i].Value];
chart.series[0].addPoint(point);
}
});
Estes são os mais usados :-)
jQuery UI
Templating
$.tmpl()
Esta é uma versão
Beta
var books = [
{
Title:
"jquery in action",
Price:
30 },
{
Title:
"html5",
Price:
35 },
{
Title:
"Pro Asp.net mvc 3",
Price:
25 }
];
1º Passo - Obter dados
2º Passo - Criar Template
var markup = "<li><b>
${Title}
</b> (
${Price}
)</li>";
3º Passo - Renderizar template com os livros e inserir o html no conteudo do div com id=booksList-localData
$.tmpl(markup, books)
.appendTo("#booksList-localData");
Charting
jqGrid
Validation Plugins:
http://www.unwrongest.com/projects/valid8/

Table Sorter:

http://www.datatables.net/

Jquery Lightbox plugin:
http://leandrovieira.com/projects/jquery/lightbox/

JQuery Tools:

http://flowplayer.org/tools/index.html

JQuery UI:
http://jqueryui.com/

JQuery Templating:

http://api.jquery.com/category/plugins/templates/

JQuery:

www.jquery.com

JQuery Org:

http://jquery.org/

Future Colors API JQuery 1.6:
http://futurecolors.ru/_static/jquery.cheatsheet.16.pdf

jqGrid:

http://trirand.com/blog/jqgrid/jqgrid.html

Charts:

http://www.highcharts.com/

Obrigado pela vossa Atenção
Full transcript