jQuery

tips&tricks

Janko Jovanović

Ne volite JavaScript i

koristite update panele i Ajax

control toolkit?

jQuery je drugačiji• Jednostavan kod• Brzina• Cross browser kompatibilnost• Plugin-ovi• Support• Fenomenalan community

Intellisense

za Visual Studio 2008

Jednostavan?

<script type="text/javascript“ src=“jquery.js"></script>

$(document).ready(function(){ alert(“Brži sam od load!”);});

Load ili Ready?

<div><img src=“logo.png” alt=“Logo” /><a href=“#”>Link</a><p>Lorem ipsum, itd…</p><a href=“#”>Još jedan link</a>

</div>

1. Pronađi sve linkove

2. Podesi da se linkovi otvaraju u novom prozoru

<div><img src=“logo.png” alt=“Logo” /><a href=“#” target=“_blank”>Link</a><p>Lorem ipsum, itd…</p><a href=“#” target=“_blank”>Još jedan link</a>

</div>

Kako?

$(“a”).attr(“target”, “_blank”);

Pronađi (CSS selektor)

Uradi nešto (metode)

Selektor $(“a”) vraća jQuery objekat koji sadrži listu svih pronađenih elemenata

<a href=“#”>Link</a><a href=“#”>Još

jedan</a>

$(“div”).addClass(“new”) .append(“<p></p>”) .css(“color”,”#fff”) .hide(400) .click(function(){ alert(“OK!”); });

Chaining

$(“#container”)Vraća element sa ID-jem “container”

$(“li:first”)Vraća prvi listitem u nizu

$(“table tr:odd”)Vraća sve neparne redove u tabeli

$(“input[type=text]”)Vraća sve “TextBox” elemente

Šta

god

pože

lite

da n

ađete

Manipulacija.before() .after() .append()

Atributi.css() .attr() .val() .html()

Događaji.click() .focus() .toggle()

“Traversing”.find() .next() .children()

Šta

god

pože

lite

da u

radit

e

$(document).ready(function() { $.ajax({ type: "POST", url: "Default.aspx/GetClient", data: "{‘id’:’17’}", contentType: "application/json”; dataType: "json", success: function(msg) { // Uradi nešto sa rezultatom }, error: function(msg) {

// prikaži poruku } }); });

Ajax, pravi ajax

jQuery UI

Teorija nije zanimljiva, demo jeste

Pitanja(i

odgovori)

Janko JovanovićWeb: www.jankoatwarpspeed.comEmail: this@jankoatwarpspeed.com

Twitter: @jankowarpspeed