19: jQuery and The DOM p1

Transcript

1. INTRODUCTION TO WEB PROGRAMMING Lecture 19: jQuery and the DOM part 1
2. Copyright Notice … The materials (used by permission) in this presentation are from Web Programming Step by Step written by Marty Stepp, Jessica Miller, and Victoria Kirst. † http://www.webstepbook.com/supplements-2ed.shtml … Document's original contents are © Copyright 2012 Marty Stepp, Jessica Miller, and Victoria; revised by Anthony Hetrick. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.
3. 1) jQuery Introduction 2) The DOM Tree jQuery
4. Problems with JavaScript … JavaScript is a powerful language, but it has many flaws: … the DOM can be clunky to use … the same code doesn't always work the same way in every browser † code that works great in Chrome, Firefox, Safari, ... will fail in IE and vice versa … many developers work around these problems with hacks (checking if browser is IE, etc.)
5. JavaScript libraries … you can link to external JavaScript library files in your page … libraries expand the JS language, add features, classes, methods … some popular libraries: † jQuery, Prototype, MooTools, Google Closure, Yahoo! UI, Dojo, ExtJS, Backbone, Underscore, ... many more <script src="libraryURL" type="text/javascript"></script> HTML
6. Why jQuery? … The most popular JS library
7. jQuery framework … the jQuery JavaScript library adds many useful features to JavaScript:
8. jQuery framework … the jQuery JavaScript library adds many useful features to JavaScript: † many useful extensions to the DOM
9. jQuery framework … the jQuery JavaScript library adds many useful features to JavaScript: † many useful extensions to the DOM † adds utility functions for built-in types String, Array, Object, Function
10. jQuery framework … the jQuery JavaScript library adds many useful features to JavaScript: † many useful extensions to the DOM † adds utility functions for built-in types String, Array, Object, Function † improves event-driven programming
11. jQuery framework … the jQuery JavaScript library adds many useful features to JavaScript: † many useful extensions to the DOM † adds utility functions for built-in types String, Array, Object, Function † improves event-driven programming † many cross-browser compatibility fixes
12. jQuery framework … the jQuery JavaScript library adds many useful features to JavaScript: † many useful extensions to the DOM † adds utility functions for built-in types String, Array, Object, Function † improves event-driven programming † many cross-browser compatibility fixes † makes Ajax programming easier (seen later)
13. window.onload … We cannot use the DOM before the page has been constructed. jQuery gives us a more compatible way to do this. † The DOM way window.onload = function() { // use the DOM } JS
14. window.onload … We cannot use the DOM before the page has been constructed. jQuery gives us a more compatible way to do this. † The DOM way window.onload = function() { // use the DOM } JS $(document).ready(function() { // use the DOM }); † The direct jQuery translation JS
15. window.onload … We cannot use the DOM before the page has been constructed. jQuery gives us a more compatible way to do this. † The DOM way window.onload = function() { // use the DOM } JS $(document).ready(function() { // use the DOM }); † The direct jQuery translation JS $(function() { // use the DOM }); † The jQuery way JS
16. Aspects of the DOM and jQuery … Identification: how do I obtain a reference to the node that I want.
17. Aspects of the DOM and jQuery … Identification: how do I obtain a reference to the node that I want. … Traversal: how do I move around the DOM tree.
18. Aspects of the DOM and jQuery … Identification: how do I obtain a reference to the node that I want. … Traversal: how do I move around the DOM tree. … Node Manipulation: how do I get or set aspects of a DOM node.
19. Aspects of the DOM and jQuery … Identification: how do I obtain a reference to the node that I want. … Traversal: how do I move around the DOM tree. … Node Manipulation: how do I get or set aspects of a DOM node. … Tree Manipulation: how do I change the structure of the page.
20. 1) jQuery Introduction 2) The DOM Tree jQuery
21. The DOM tree … The elements of a page are nested into a tree-like structure of objects
22. The DOM tree … The elements of a page are nested into a tree-like structure of objects † half of the challenge is singling out elements that you want
23. Selecting groups of DOM objects name description getElementById returns a single element matching the id getElementsByTagName returns array of descendants with the given tag, such as "div" getElementsByName returns array of descendants with the given name attribute (mostly useful for accessing form controls) querySelector * returns the first element that would be matched by the given CSS selector string querySelectorAll * returns an array of all elements that would be matched by the given CSS selector string
24. Getting all elements of a certain type var allParas = document.querySelectorAll("p"); for (var i = 0; i < allParas.length; i++) { allParas[i].style.backgroundColor = "yellow"; } JS … Get all </p> tags and style them yellow <body> <p>This is the first paragraph</p> <p>This is the second paragraph</p> <p>You get the idea...</p> </body> HTML
25. Problem's with DOM API … Not always implemented the same way in all browsers. // identifying a single element var list = document.getElementById("mylist"); // identifying a group of elements var specials = document.querySelectorAll("li.special"); JS
26. Problem's with DOM API … Not always implemented the same way in all browsers. … Way too verbose considering the DOM is the main thing we play with. // identifying a single element var list = document.getElementById("mylist"); // identifying a group of elements var specials = document.querySelectorAll("li.special"); JS
27. Problem's with DOM API … Not always implemented the same way in all browsers. … Way too verbose considering the DOM is the main thing we play with. … Why are there 5+ methods to identify elements that all behave differently and take different kinds of parameters? // identifying a single element var list = document.getElementById("mylist"); // identifying a group of elements var specials = document.querySelectorAll("li.special"); JS
28. jQuery / DOM comparison DOM method jQuery equivalent getElementById("id") $("#id") getElementsByTagName("tag") $("tag") getElementsByName("somename") $("[name='somename']") querySelector("selector") $("selector") querySelectorAll("selector") $("selector")
29. jQuery node identification // id selector ($always returns an array) var elem = $("#myid")[0]; JS
30. jQuery node identification // id selector ($always returns an array) var elem = $("#myid")[0]; // group selector var elems = $("#myid, p"); JS JS
31. jQuery node identification // id selector ($always returns an array) var elem = $("#myid")[0]; // group selector var elems = $("#myid, p"); // context selector var elems = $("#myid < div p"); JS JS JS
32. jQuery node identification // id selector ($always returns an array) var elem = $("#myid")[0]; // group selector var elems = $("#myid, p"); // context selector var elems = $("#myid < div p"); // complex selector var elems = $("#myid < h1.special:not(.className)"); JS JS JS JS
33. Getting all elements of a certain type var allParas = document.querySelectorAll("p"); for (var i = 0; i < allParas.length; i++) { allParas[i].style.backgroundColor = "yellow"; } JS … Native JavaScript get all p element and style yellow … jQuery equivalent $("p").css("background-color", "yellow"); JS
34. jQuery terminology … the jQuery function refers to the global jQuery object or the $ function depending on the context
35. jQuery terminology … the jQuery function refers to the global jQuery object or the $ function depending on the context … a jQuery object the object returned by the jQuery function that often represents a group of elements
36. jQuery terminology … the jQuery function refers to the global jQuery object or the $ function depending on the context … a jQuery object the object returned by the jQuery function that often represents a group of elements … selected elements the DOM elements that you have selected for, most likely by some CSS selector passed to the jQuery function and possibly later filtered further
37. The jQuery object … The $ function always (even for ID selectors) returns an array-like object called a jQuery object.
38. The jQuery object … The $ function always (even for ID selectors) returns an array-like object called a jQuery object. … The jQuery object wraps the originally selected DOM objects.
39. The jQuery object … The $ function always (even for ID selectors) returns an array-like object called a jQuery object. … The jQuery object wraps the originally selected DOM objects. … You can access the actual DOM object by accessing the elements of the jQuery object.
40. The jQuery object // false document.getElementById("id") == $("#id"); document.querySelectorAll("p") == $("p"); // true document.getElementById("id") == $("#id")[0]; document.getElementById("id") == $("#id").get(0); document.querySelectorAll("p")[0] == $("p")[0]; JS
41. Using $ as a wrapper … $ adds extra functionality to DOM elements
42. Using $ as a wrapper … $ adds extra functionality to DOM elements … passing an existing DOM object to $ will give it the jQuery upgrade
43. Using $ as a wrapper … $ adds extra functionality to DOM elements … passing an existing DOM object to $ will give it the jQuery upgrade // convert regular DOM objects to a jQuery object var elem = document.getElementById("myelem"); elem = $(elem); var elems = document.querySelectorAll(".special"); elems = $(elems); JS
44. DOM context identification … You can use querySelectorAll() and querySelector() on any DOM object.
45. DOM context identification … You can use querySelectorAll() and querySelector() on any DOM object. … When you do this, it simply searches from that part of the DOM tree downward.
46. DOM context identification … You can use querySelectorAll() and querySelector() on any DOM object. … When you do this, it simply searches from that part of the DOM tree downward. … Programmatic equivalent of a CSS context selector
47. DOM context identification var list = document.getElementsByTagName("ul")[0]; var specials = list.querySelectorAll('li.special'); JS
48. elem.find() / context parameter … jQuery gives two identical ways to do contextual element identification var elem = $("#myid"); // These are identical var specials = $("li.special", elem); var specials = elem.find("li.special"); JS