1 / 22

Intro to jQuery and IxEdit

By Jon Marozick. Intro to jQuery and IxEdit. 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

ziarre
Download Presentation

Intro to jQuery and IxEdit

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. By Jon Marozick Intro to jQuery and IxEdit

  2. What is jQuery? • JavaScript toolkit • Aims to change the way developers think • jQuery philosophy • Find some HTML • Do something to it

  3. 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

  4. 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() { … });

  5. 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

  6. 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

  7. Chaining jQuery Commands • $(“div a”).fadeIn().addClass(“highlight”); • Fluent Interface

  8. Effect Examples • .fadeIn() fade to opaque • .fadeTo() adjusts opacity • .hide() hides elements • .show() displays elements • .slideToggle() displays or hides elements

  9. 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

  10. 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>

  11. 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>

  12. Attributes Get .attr(“checked”) .html() .val() .css(“margin”) .width() Set .attr(“checked”, “checked”) .html(“<br />”) .val(“some value”) .css(“margin”, “5px”) .width(150)

  13. Events • $(“button”).click(function() { // do something }); • .mouseover() • .keypress() • .focus() • .blur() • .change()

  14. 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>

  15. Using Change Event - jQuery $("select").change(function () { varstr = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div").text(str); }).change();

  16. Using Change Event - Result

  17. 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>

  18. Demo

  19. IxEdit • First on-the-fly interaction design tool • No coding • Edit directly in browser • Saves data in local database using Google Gears

  20. References • www.jquery.com • http://www.slideshare.net/1Marc/jquery-essentials • jQuery In Action • www.ixedit.com

  21. Contact Info • Email: Jon.Marozick@blc.edu • Twitter: @JonMarozick

  22. Questions

More Related