JQuery primer

PRIMARY USE CASE

Dienstag, 11. Februar 14

BROWSER FACADE
App code


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 convenient development


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

jQuery - core browser facade
jQuery UI - User Interface components
jQuery mobile - mobile UI framework
QUnit - unit/component testing framework
Sizzle - CSS selector engine

101: PROBLEM SPACES
• selecting DOM elements
• traversing the DOM
• manipulating DOM elements
• setting CSS properties
• handling browser events
• browser networking


BASIC IDEA


101: BASIC WORKFLOW

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


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");


101: SELECTORS
#menu .item

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

.item:first-child

<ul id=“menu“>
</ul>

.item.selected

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

[data-action]

<button data-action=“edit“>edit</button>
<i data-action=“del“>delete</i>


101: SELECTORS
#menu li

#menu > li


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

101: SELECTORS
#menu li, .list li

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

tr:hover td


<tr>
<td></td>
<td></td>
<td></td>
</tr>

101: FLUID API
ﬂuid 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 () {
...
});


101: FLUID API
ﬂuid 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?
});


EVENTS


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
});


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) {

});

var action = $(ev.target).data("action");
if (action === "remove-row") {
var personId = $(ev.target).closest(„[data-id]“];
...
} else if (action === "edit-row") {
...
}

101: CUSTOM EVENTS
// jQuery lets you trigger events
$("#btn").trigger("click");


101: CUSTOM EVENTS
// custom events are allowed; so...
container.on("msg:myApp", function (ev, data) {
// update UI
});


101: CUSTOM EVENTS
// 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"
});
});


AJAX


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");
}
});


+

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");


101: GLOBAL AJAX
var pendingCount = 0;
$(document).ajaxStart(function() {
if (pendingCount === 0) {
$( "#spinner" ).show();
}
pendingCount++;
});
$(document).ajaxComplete(function() {
pendingCount--;
if (pendingCount === 0) {
$( "#spinner" ).hide();
}
});


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")
};
});


CONVENIENCE


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();


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
});


LUNCH!

EXERCISES

uery/exercises
~/ws/03-jQ

JQuery primer

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

More from Marc Bächinger

More from Marc Bächinger (9)

JQuery primer