Embed Size (px)
Citation preview
Intro to jQuery and IxEdit
By Jon Marozick
What is jQuery?
JavaScript toolkit Aims to change the way developers
think jQuery philosophy
Find some HTML Do something to it
Why jQuery?
Fixes cross-browser issues Powerful selectors
Zebra-stripe a table▪ $(“table tr:nth-
child(even)”).addClass(“striped”); If you know CSS, you know jQuery
selectors
Unobtrusive JavaScript
Separates behavior from structure CSS separates design from structure Need to wait until DOM is loaded so
elements exist window.onload = function() { … }; $(document).ready(function() { … }); or
$(function() { … });
jQuery Wrapper
$(selector) or jQuery(selector) $() is a function that returns a
special JavaScript object containing an array of DOM elements that match the selector
Selector Examples
$(“#post”) get element with id post $(“a.toggle”) get links with class
toggle $(“input:hidden”) get all hidden
input elements $(”input:checkbox :checked”) gets
all checkboxes that are checked $(“a[href*=jquery]”) gets all links
whose href contains the string jquery
Chaining jQuery Commands
$(“div a”).fadeIn().addClass(“highlight”);
Fluent Interface
Effect Examples
.fadeIn() fade to opaque .fadeTo() adjusts opacity .hide() hides elements .show() displays elements .slideToggle() displays or hides
elements
Manipulation Examples
.addClass() adds css class(es) .removeClass() removes css class(es) .height() get height of first element
in set .position() get coordinates of first
element in set, relative to parent
Adding Content
Add banner after each div $(“div”).after(“<p>Banner
here</p>”);<html><body>
<div>Put stuff here…</div><div>Put more stuff here…</div>
</body></html>
Adding Content
Add banner after each div $(“div”).after(“<p>Banner
here</p>”);<html><body>
<div>Put stuff here…</div><p>Banner here</p><div>Put more stuff here…</div><p>Banner here</p>
</body></html>
Attributes
Get
.attr(“checked”).html().val().css(“margin”).width()
Set.attr(“checked”,
“checked”).html(“<br />”).val(“some value”).css(“margin”, “5px”).width(150)
Events
$(“button”).click(function() {// do something
}); .mouseover() .keypress() .focus() .blur() .change()
Using Change Event - Html
<html><body><select name="sweets" multiple="multiple">
<option>Chocolate</option><option
selected="selected">Candy</option><option>Taffy</option><option
selected="selected">Caramel</option><option>Fudge</option><option>Cookie</option>
</select><div></div>
</body></html>
Using Change Event - jQuery
$("select").change(function () { var str = ""; $("select
option:selected").each(function () { str += $(this).text() + " ";
}); $("div").text(str);
}).change();
Using Change Event - Result
Content Delivery Networks (CDN)
http://code.google.com/apis/ajaxlibs/ <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
http://www.asp.net/ajaxlibrary/cdn.ashx
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
Demo
IxEdit
First on-the-fly interaction design tool
No coding Edit directly in browser Saves data in local database using
Google Gears
References
www.jquery.com http://www.slideshare.net/1Marc/jque
ry-essentials jQuery In Action www.ixedit.com
Questions
