18.$jquery$ · jquery:$chaining$ • easy$to$$concatenate$method$calls:$ •...
TRANSCRIPT
18. jQuery
Dr. Dave Parker
Informa5on and the Web, 2014/15
1
What's leD on the module • Assessments – #3: marks/feedback/model solu5on out now – #4: due 4pm Fri 27 March
• Lectures – today: Assm 3 feedback, Assm 4 ques5ons, jQuery – Monday: last (op5onal) lecture: PHP
• Office hours – today 12.30pm, Mon 2pm, Thur 11am, Thur 12.30pm
2
Assm 3 • Try and make your JavaScript code resilient to expected (or even unexpected) changes in the HTML
• Avoid hard-‐coding assump5ons about HTML
3
tickerContents = [!!document.getElementById("newstories-s2").innerHTML,!!document.getElementById("newstories-s4").innerHTML,!!document.getElementById("newstories-s6").innerHTML,!!document.getElementById("newstories-s7").innerHTML,!!document.getElementById("newstories-s8").innerHTML!
];!
Assm 4 – Ques5ons & Tips • Read the assignment!
• 3 data files: 2 JSON & 1 XML – don't convert them
• Read in data and create HTML dynamically?
• Debugging: Developer toolbar + console.log()
• External libraries (e.g. jQuery) – link to externally hosted copies (e.g. at Google)
4
• jQuery – very widely used JavaScript library
• Cross-‐browser, standards compliant
• Aims to provide easier: – HTML DOM traversal/manipula5on, event handling, anima5on effects, AJAX, user interfaces, …
• Download from: hkp://jquery.com/ – or load directly from (for example) Google – very well documented, many tutorials
5
jQuery: Simple examples
• $("h1").css("backgroundColor", "yellow"); – highlight all h1 elements yellow
• $("#main span.important").addClass("highlight"); – edit class of all "important" span elements in #main
• $("bukon#clickme").click(doSomething); – call func5on doSomething when bukon #clickme is clicked
6
jQuery: The $ func5on • Example – $("h1").css("backgroundColor", "yellow");
• How it works – $ is a func5on, returning a jQuery object – which represents a collec5on of DOM elements – methods (e.g. css(...) apply opera5ons to all elements
• More methods to create/modify jQuery objects – $(elem), $(this) – creates jQuery object from DOM object – find("li.submenu") – selects descendent elements, parent() – finds parent(s), eq(i) – selects ith element
7
jQuery: Effects • Hide/show: – hide(), show()
• Fading/sliding – fadeIn(), fadeOut(), slideDown(), SlideUp() – configurable, e.g. fadeOut("slow"), fadeOut(3000), …
• Toggling – toggle(), fadeToggle(), slideToggle(), …
• Other anima5ons (for numeric proper5es) – e.g. animate({opacity: "0"}) – e.g. animate({width: "0"})
8
jQuery: Chaining • Easy to concatenate method calls:
• Many other jQuery methods also allow chaining – shorter and more efficient than:
– most methods return a/the jQuery object aDer opera5ng
• Another example
9
$("#content").find("h3").eq(2).html("new text");!
("#m1").fadeIn().addClass("active").css("marginLeft", "20px");!
("#m1").fadeIn();!("#m1").addClass("active");!("#m1").css("marginLeft", "20px");!
$("warn").hide().fadeIn("slow").delay(1500).fadeOut("slow");!
jQuery: AJAX • For example: $.ajax() performs an AJAX request – more robust/configurable than our requestData()
• Example:
• Note the literal object crea5on: { a:b, c:d, … }
• jQuery also has methods to access the XML DOM 10
$.ajax({!!type: "GET",!!url: "some-data.xml",!!dataType: "xml",!!success: parseXml!
});!
jQuery UI
11
• Easy crea5on of user interface (UI) components – e.g. date pickers, auto-‐complete, progress bars, …
• jQuery: Experiment…. – feel free to use for Assessment 4
• Documenta5on and tutorials – hkp://jquery.com/
• Useful demo page: – hkp://coding.smashingmagazine.com/2012/05/31/50-‐jquery-‐func5on-‐demos-‐for-‐aspiring-‐web-‐developers/
12
Summary • That's it!
• Please email files for presenta5ons – [email protected] – by at most 2 hours before session
• Ques5ons: – office hours (Tue 12-‐1, this lecture slot) – email, Facebook group, …
• Good luck…
13