1 Using jQuery JavaScript & jQuery the missing manual (Second Edition)

2 Objectives You will be able to Describe what jQuery is and what it does. Use jQuery to hide browser dependencies in JavaScript scripts. Use jQuery in JavaScripts to access and modify the DOM.

3 jQuery A JavaScript framework Extensive JavaScript script that provides a more abstract DOM API for client scripts. Hides browser differences. API works for all widely used browsers. Open Source Developed and maintained by volunteers Has emerged as the preeminent JavaScript framework. Supported by Microsoft

4 jQuery jQuery leverages the CSS selection syntax to identify DOM elements. Identify DOM elements for JavaScript functions the same we we identify them to apply CSS styles. Most web developers are familiar with CSS. More powerful and more concise API.

5 Adding jQuery to an App You can either Download jQuery and put a copy into your virtual directory. OR Reference one of several Content Distribution Networks that support jQuery. Server downloads jQuery from the CDN at run time.

6 The Microsoft CDN

7 Using jQuery As a demonstration of jQuery, we will modify the DOM positioning script from last class to use jQuery rather than the DOM API.

8 Using jQuery Create a new empty ASPX website called DOM_Positioning_jQuery Download to website folder final versions of DOM_Positioning website files from last class: DOM_Positioning_Final_Version/ DOM_Positioning_Final_Version/ animate.js drag_and_drop.js positioning.html In Visual Studio, add files to website. Set positioning.html as start page. Build and run.

9 Initial Website

10 Download jQuery

11 Download jQuery Download current version Uncompressed to website folder. Add to website

12 Tell the Browser Add tag to head as first script immediately after the title. <script language="javascript" type="text/javascript" src="jquery js" > Update the title Positioning Elements with jQuery

13 positioning.html

14 Using jQuery We will modify the original JavaScript scripts to use jQuery In small steps. Understand each step! Build and test after each step.

15 animate.js Modify to use jQuery.

16 The jQuery $( ) $('#square') returns a jQuery object An array of JavaScript DOM node objects All nodes with ID square. There is only one. $('#square')[0] returns a reference to the first (and only) element of the array. Effect is the same as for sq = document.getElementById("square");

17 The jQuery $( ) $( ) is a JavaScript function call Shorthand for jQuery( ) A function defined in jQuery.js Everything we do with jQuery will have this form. The function returns a jQuery object. The object has properties and methods that we can use. $( ) takes a parameter that is identical to a CSS selector. If you know CSS, you already have a good start toward understanding jQuery!

18 Try it! Click these buttons to test our change.

19 Replace All getElementById("square")

20 More Replacements function updateHeading() { //if (!document.getElementsByTagName) return; //var headings = document.getElementsByTagName("h1"); var headings = $('h1'); var pageHeading = headings[0]; pageHeading.firstChild.nodeValue = "Square text has been modified"; }

21 Adding Content with jQuery The jQuery append() method adds its parameter value as the last child element of the selected element. Let's use this jQuery method in function modifySquareText. Comment out entire function and replace with this: function modifySquareText() { var new_text = document.form1.input_box.value; $('#square').append(new_text); document.form1.input_box.value = ""; updateHeading(); } Try it!

22 Adding Content with jQuery Enter some text. Click Modify.

23 Modified Square

24 Getting User Input in jQuery Select text input element. Use the jQuery val() method to get the input. Let's modify modifySquareText to use jQuery val() method rather than the DOM API. function modifySquareText() { $('#square').append($('#input_box').val()); document.form1.input_box.value = ""; updateHeading(); }

25 After Modify Clicked Works the same. End of Section

26 Using jQuery in drag_and_drop.js The jQuery $( ) function returns a jQuery object. Using the jQuery object to bind event handlers eliminates browser dependencies.

27 drag_and_drop.js function Setup() { $('#square').bind('mousedown', Start_Drag); } Try it!

28 Using a Anonymous Functions The jQuery culture encourages the use of anonymous functions. Keep the namespace sparse. Avoid potential name conflicts. If a function is only used in one place use the function definition rather than a function name.

29 An Anonymous Function Try it! (It works the same.)

30 function Start_Drag() The argument passed to the event handler Start_Drag is now a jQuery object. Its methods are the same for all browsers supported by jQuery. We can eliminate browser dependent code.

31 function Start_Drag() function Start_Drag(e) { var mouse_x, mouse_y; // Start dragging // if (!e) var e = window.event; // if (e.pageX) { // mouse_x = e.pageX; // mouse_y = e.pageY; // } else if (e.clientX) { // mouse_x = e.clientX; // mouse_y = e.clientY; // } else return; mouse_x = e.pageX; mouse_y = e.pageY; No browser dependency

32 css() The jQuery css() method sets style attributes for jQuery objects.

33 function Start_Drag() Continued //var sq = document.getElementById("square"); //sq.style.borderColor = "Red"; $('#square').css('borderColor', 'Red'); // Calculate object offsets from mouse position dx = mouse_x - $('#square')[0].offsetLeft; dy = mouse_y - $('#square')[0].offsetTop; // sq.onmousemove = Move; // sq.onmouseup = Drop; // sq.onmousedown = null; $('#square').bind('mousemove', Move); $('#square').bind('mouseup', Drop); $('#square').unbind('mousedown'); }

function Move(e) { var mouse_x, mouse_y; // Track mouse movements // if (!e) var e = window.event; // if (e.pageX) { // mouse_x = e.pageX; // mouse_y = e.pageY; // } else if (e.clientX) { // mouse_x = e.clientX; // mouse_y = e.clientY; // } else return; mouse_x = e.pageX; mouse_y = e.pageY; x = mouse_x - dx; y = mouse_y - dy; // var sq = document.getElementById("square"); // sq.style.left = x; // sq.style.top = y; $('#square').css('left', x); $('#square').css('top', y); }

35 function Drop( ) function Drop() { // var sq = document.getElementById("square"); // sq.style.borderColor = "black"; // sq.onmousemove = null; // sq.onmouseup = null; // sq.onmousedown = Start_Drag; $('#square').css("borderColor", "black"); $('#square').unbind('mousemove'); $('#square').unbind('mouseup'); $('#square').bind('mousedown', Start_Drag); } Try it!

36 Internet Explorer 8

37 Chaining Many jQuery functions return a reference to a jQuery object. Can be used to perform another operation without doing a new selection.

38 Chaining css() At the end of Move() Instead of $('#square').css('left', x); $('#square').css('top', y); we can write $('#square').css('left', x).css('top', y);

39 Chaining bind() At the end of Start_Drag() $('#square').bind('mousemove', Move).bind('mouseup', Drop).unbind('mousedown'); At the end of Drop() $('#square').unbind('mousemove').unbind('mouseup').bind('mousedown', Start_Drag);

40 Different Browsers jQuery generally does a good job of hiding browser differences. BUT Always check your app in multiple browsers.

41 Chrome

42 Firefox

43 Safari

44 Summary jQuery makes DOM manipulations easier by hiding browser differences. More concise syntax than the DOM API. Leverages knowledge of CSS selectors.

45 References Documentation for the jQuery methods that we have used can be found in JavaScript & jQuery the missing manual and on the jQuery web site. append page bind page css page val page