4. BROWSER FACADE
• smooth out browser incompatibilities
• shield from verbose W3C DOM API
• countless utilities for convenient development
Dienstag, 11. Februar 14
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. 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. 101: PROBLEM SPACES
• selecting DOM elements
• traversing the DOM
• manipulating DOM elements
• setting CSS properties
• handling browser events
• browser networking
Dienstag, 11. Februar 14
9. 101: BASIC WORKFLOW
1. select (query) elements
2. operate on selection
Dienstag, 11. Februar 14
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
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. 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
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
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. 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. 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. 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
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