Dienstag, 11. Februar 14
PRIMARY USE CASE

Dienstag, 11. Februar 14
BROWSER FACADE
App code

Dienstag, 11. Februar 14

use

jQuery

use

Browser API
Browser API
Browser API
Browser API
BROWSER FACADE
• smooth out browser incompatibilities
• shield from verbose W3C DOM API
• countless utilities for convenie...
JQUERY IS A LIBRARY
• ultimate productivity boost
• no application lifecycle provided
• no MVC infrastructure provided
• n...
jQuery - core browser facade
jQuery UI - User Interface components
jQuery mobile - mobile UI framework
QUnit - unit/compon...
101: PROBLEM SPACES
• selecting DOM elements
• traversing the DOM
• manipulating DOM elements
• setting CSS properties
• h...
BASIC IDEA

Dienstag, 11. Februar 14
101: BASIC WORKFLOW

1. select (query) elements
2. operate on selection

Dienstag, 11. Februar 14
101: SELECTORS
support for CSS3 selectors and more
// select an element by id
$("#menu").addClass("menu-theme-dark");
// s...
101: SELECTORS
#menu .item

<ul id=“menu“>
<li class=“item“></li>
<li class=“item“></li>
</ul>

.item:first-child

<ul id=...
101: SELECTORS
#menu li

#menu > li

Dienstag, 11. Februar 14

<ul id=“menu“>
<li class=“item“>
<ul>
<li></li>
</ul>
</li>...
101: SELECTORS
#menu li, .list li

<ul id=“menu“>
<li class=“item“></li>
</ul>
<ul class=“list“>
<li></li>
</ul>

tr:hover...
101: FLUID API
fluid API style allows to chain
operations on a given selection
$(".menu-item")
.removeClass("active")
.addC...
101: FLUID API
fluid API style allows to chain
operations on a given selection
$(".menu-item")
.removeClass("active")
.addC...
EVENTS

Dienstag, 11. Februar 14
101: EVENTS
trigger.on("mouseover", function (ev) {
// fired on mouse over the trigger
});
trigger.click(function (ev) {
/...
101: CATCHING BUBBLING
EVENTS
Hans
Vreni
Karl

Meier
Huber
Wehrli

1967
1982
1912

m
w
m

e
e
e

-

<button data-action=“r...
101: CUSTOM EVENTS
// jQuery lets you trigger events
$("#btn").trigger("click");

Dienstag, 11. Februar 14
101: CUSTOM EVENTS
// jQuery lets you trigger events
$("#btn").trigger("click");
// custom events are allowed; so...
conta...
101: CUSTOM EVENTS
// jQuery lets you trigger events
$("#btn").trigger("click");
// custom events are allowed; so...
conta...
AJAX

Dienstag, 11. Februar 14
101: AJAX
$.ajax({
url: "/api/order",
type: "PUT"
data: { userId: 1234, lineItems: lineItems},
dataType: "json"
success: f...
101: AJAX CONVENIENCE
// simplified GET requests
$.get("/dashboard", function (htmlOrXmlResponse) {
alert(htmlOrXmlRespons...
101: GLOBAL AJAX
var pendingCount = 0;
$(document).ajaxStart(function() {
if (pendingCount === 0) {
$( "#spinner" ).show()...
101: GLOBAL AJAX
/**
* ajaxPrefilter is called for each request processed
* with $.ajax or other jQuery http functions
*/
...
CONVENIENCE

Dienstag, 11. Februar 14
101: CONVENIENCE
// setting removing style classes
$(".item").addClass("myClass");
$(".item").removeClass("myClass");
$("....
101: EACH
compared to for-loops ,each‘ is slower, but safer
$.each([1,2,3,4,5], function (idx, item) {
trigger.on(„click“,...
LUNCH!
Dienstag, 11. Februar 14
EXERCISES

uery/exercises
~/ws/03-jQ
Dienstag, 11. Februar 14
Upcoming SlideShare
Loading in...5
×

JQuery primer

561

Published on

jQuery primer for the workshop "JavaScript for the enterprise" held at the /ch/open-Workshop Tage 2013.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
561
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JQuery primer

  1. 1. Dienstag, 11. Februar 14
  2. 2. PRIMARY USE CASE Dienstag, 11. Februar 14
  3. 3. BROWSER FACADE App code Dienstag, 11. Februar 14 use jQuery use Browser API Browser API Browser API Browser API
  4. 4. BROWSER FACADE • smooth out browser incompatibilities • shield from verbose W3C DOM API • countless utilities for convenient development Dienstag, 11. Februar 14
  5. 5. JQUERY IS A LIBRARY • ultimate productivity boost • no application lifecycle provided • no MVC infrastructure provided • no component model (jQuery UI has) • lacks a decent object oriented approach • easy to create code which is hard to maintain • jQuery code sprinkled all over markup Dienstag, 11. Februar 14
  6. 6. jQuery - core browser facade jQuery UI - User Interface components jQuery mobile - mobile UI framework QUnit - unit/component testing framework Sizzle - CSS selector engine Dienstag, 11. Februar 14
  7. 7. 101: PROBLEM SPACES • selecting DOM elements • traversing the DOM • manipulating DOM elements • setting CSS properties • handling browser events • browser networking Dienstag, 11. Februar 14
  8. 8. BASIC IDEA Dienstag, 11. Februar 14
  9. 9. 101: BASIC WORKFLOW 1. select (query) elements 2. operate on selection Dienstag, 11. Februar 14
  10. 10. 101: SELECTORS support for CSS3 selectors and more // select an element by id $("#menu").addClass("menu-theme-dark"); // select elements by class $(".menu-item").removeClass("active"); // select elements by tag name $("body").removeClass("small-screen"); // a list items with a give class in a given anchestor $("#menu li.active").removeClass("active"); // all elements with a given attr in a given anchestor $("#menu [data-action]").css("border-top", "1px solid red"); Dienstag, 11. Februar 14
  11. 11. 101: SELECTORS #menu .item <ul id=“menu“> <li class=“item“></li> <li class=“item“></li> </ul> .item:first-child <ul id=“menu“> <li class=“item“></li> <li class=“item“></li> </ul> .item.selected <ul id=“menu“> <li class=“item selected“></li> <li class=“item“></li> </ul> [data-action] <button data-action=“edit“>edit</button> <i data-action=“del“>delete</i> Dienstag, 11. Februar 14
  12. 12. 101: SELECTORS #menu li #menu > li Dienstag, 11. Februar 14 <ul id=“menu“> <li class=“item“> <ul> <li></li> </ul> </li> </ul> <ul id=“menu“> <li class=“item“> <ul> <li></li> </ul> </li> </ul>
  13. 13. 101: SELECTORS #menu li, .list li <ul id=“menu“> <li class=“item“></li> </ul> <ul class=“list“> <li></li> </ul> tr:hover td Dienstag, 11. Februar 14 <tr> <td></td> <td></td> <td></td> </tr>
  14. 14. 101: FLUID API fluid API style allows to chain operations on a given selection $(".menu-item") .removeClass("active") .addClass("inactive ") .css("padding-left", "0px") .find(".trigger") .click(function(ev) { ... }) .each(function () { ... }); Dienstag, 11. Februar 14
  15. 15. 101: FLUID API fluid API style allows to chain operations on a given selection $(".menu-item") .removeClass("active") .addClass("inactive ") .css("padding-left", "0px") .find(".trigger") .click(function(ev) { // spaghetti carbonara? }) .each(function () { // spaghetti napoli? }); Dienstag, 11. Februar 14
  16. 16. EVENTS Dienstag, 11. Februar 14
  17. 17. 101: EVENTS trigger.on("mouseover", function (ev) { // fired on mouse over the trigger }); trigger.click(function (ev) { // short-cut for common events }); sidebar.on("click", ".menu a", function () { // handle all menu items with a single handler }); sidebar.on("click", "tr td:first-child", function () { // handle all clicks on the first cell of any row }); Dienstag, 11. Februar 14
  18. 18. 101: CATCHING BUBBLING EVENTS Hans Vreni Karl Meier Huber Wehrli 1967 1982 1912 m w m e e e - <button data-action=“remove-row“>-</button> $("#data-table").click(function(ev) { }); Dienstag, 11. Februar 14 var action = $(ev.target).data("action"); if (action === "remove-row") { var personId = $(ev.target).closest(„[data-id]“]; ... } else if (action === "edit-row") { ... }
  19. 19. 101: CUSTOM EVENTS // jQuery lets you trigger events $("#btn").trigger("click"); Dienstag, 11. Februar 14
  20. 20. 101: CUSTOM EVENTS // jQuery lets you trigger events $("#btn").trigger("click"); // custom events are allowed; so... container.on("msg:myApp", function (ev, data) { // update UI }); Dienstag, 11. Februar 14
  21. 21. 101: CUSTOM EVENTS // jQuery lets you trigger events $("#btn").trigger("click"); // custom events are allowed; so... container.on("msg:myApp", function (ev, data) { // update UI }); btn.click(function (ev) { btn.trigger("msg:myApp", { name: "age", val: 42, type: "update" }); }); Dienstag, 11. Februar 14
  22. 22. AJAX Dienstag, 11. Februar 14
  23. 23. 101: AJAX $.ajax({ url: "/api/order", type: "PUT" data: { userId: 1234, lineItems: lineItems}, dataType: "json" success: function (data) { emitEvent("sent-order", data); }, error: function (jqXhr) { growl("sending order failed"); } }); Dienstag, 11. Februar 14 +
  24. 24. 101: AJAX CONVENIENCE // simplified GET requests $.get("/dashboard", function (htmlOrXmlResponse) { alert(htmlOrXmlResponse); }); // POST form data $.post("/contact", $("#contact-form").serialize(), function () { alert("success"); } ); // json reponse parsed to js object $.getJSON("/persons.", function (data) { alert(data); }); // load content of url into an element $("#content").load("partials/dashboard.html"); Dienstag, 11. Februar 14
  25. 25. 101: GLOBAL AJAX var pendingCount = 0; $(document).ajaxStart(function() { if (pendingCount === 0) { $( "#spinner" ).show(); } pendingCount++; }); $(document).ajaxComplete(function() { pendingCount--; if (pendingCount === 0) { $( "#spinner" ).hide(); } }); Dienstag, 11. Februar 14
  26. 26. 101: GLOBAL AJAX /** * ajaxPrefilter is called for each request processed * with $.ajax or other jQuery http functions */ $.ajaxPrefilter(function(options, origOptions, jqXHR) { // set the Authorization header for all request options.headers = { Authorization: "Basic " + btoa("chopen2013:chopen2013") }; }); Dienstag, 11. Februar 14
  27. 27. CONVENIENCE Dienstag, 11. Februar 14
  28. 28. 101: CONVENIENCE // setting removing style classes $(".item").addClass("myClass"); $(".item").removeClass("myClass"); $(".item").toggleClass("myClass"); // display, hide selected elements $("#item").show(); $("#item").hide(); $("#item").toggle(); $("#item").fadeIn(); $("#item").fadeOut(); Dienstag, 11. Februar 14
  29. 29. 101: EACH compared to for-loops ,each‘ is slower, but safer $.each([1,2,3,4,5], function (idx, item) { trigger.on(„click“, function() { // use idx and item here with no worries }; }); var person = { firstName: "Helge", lastName: "Schneider" }; $.each(person, function (key, value) { // ... // value is bound to this }); Dienstag, 11. Februar 14
  30. 30. LUNCH! Dienstag, 11. Februar 14
  31. 31. EXERCISES uery/exercises ~/ws/03-jQ Dienstag, 11. Februar 14
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×