JQuery CS 268. What is jQuery? From their web site:
-
Upload
hugh-doyle -
Category
Documents
-
view
215 -
download
1
Transcript of JQuery CS 268. What is jQuery? From their web site:
![Page 1: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/1.jpg)
jQuery
CS 268
![Page 4: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/4.jpg)
jQuery architecture Finds objects in the DOM/HTML using CSS style syntax.
Core of jQuery is a group of functions designed to create/edit/delete the array of elements
Also provides many methods for editing the basic components of elements like .css and .attr
![Page 5: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/5.jpg)
What can jQuery do? http://docs.jquery.com/Main_Page
Demos (from jQuery's site):
http://jqueryui.com/demos/
Tutorials (from jQuery's site):http://docs.jquery.com/Tutorials
![Page 6: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/6.jpg)
What is the jQuery dollar sign $ ? It is an identifier. You can think of it as a function name. You can use jQuery in place of the $ sign
but since most of us are lazy we use the $ For example these are equivalent lines of code:
<script> jQuery("#divTest1").text("Hello, world!"); $("#divTest1").text("Hello, world!");</script>
![Page 7: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/7.jpg)
What is the jQuery dollar sign $ ? The $ (or jQuery) function returns objects Therefore you can use . (dot) notation to access additional
methods/functions applicable to the returned object.
<script> jQuery("#divTest1").text("Hello, world!"); $("#divTest1").text("Hello, world!");</script>
![Page 8: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/8.jpg)
jQuery allows easy access to Elements # used to reference elements with an id attribute . (dot or period) is used to reference elements with class attributes Omit # and . and you are searching for all elements of the same
type, like div or table or img or ...
<script> jQuery("#divTest1").text("Hello, world!"); $("#divTest1").text("Hello, world!");</script>
![Page 9: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/9.jpg)
jQuery ready event jQuery assumes you often want to execute code after a page loads. JavaScript can do this if called from a body tag's onload event
But this requires all images to finish loading
jQuery's ready event is executed after all page elements (tags) are loaded - BUT before images are completely down loaded. Allows quicker code execution
![Page 10: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/10.jpg)
jQuery tutorials usually start here With the .ready event
<html><head> <title>JQuery</title> <script src="jquery.js"></script></head><body><div id="divTest1"></div><script> function documentReady() { $("#divTest1").text("Hello, world!"); } $(document).ready(documentReady);</script></body></html>
Calls documentReadyafter elements/tags areloaded
![Page 11: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/11.jpg)
jQuery ready event shortcut The jQuery ready event is used often – so the jQuery
developers decided to allow shorthand notation for it Send an "anonymous" function as a parameter to it An anonymous function does not have a name
<script> // use an anonymous function $(document).ready( function() { $("#divTest2").text("Hello, world!"); } );</script>
![Page 12: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/12.jpg)
jQuery ready event shortcut The code is often formatted like this (same code as in
previous slide
<script> // use an anonymous function $(document).ready(function() { $("#divTest2").text("Hello, world!"); });</script>
![Page 13: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/13.jpg)
Even shorter notation for same thing Omit the (document).ready – default assumes this is there.
The jQuery crowd likes shortcuts!
<script> $(function() { $("#divTest2").text("Hello, world!"); });</script>
![Page 14: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/14.jpg)
Fade In
![Page 15: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/15.jpg)
Fade In several boxes
![Page 16: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/16.jpg)
Toggle fade in and out
![Page 17: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/17.jpg)
Slide box up (till disappears)
![Page 18: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/18.jpg)
Slide box up and down
![Page 19: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/19.jpg)
Slide box down
![Page 20: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/20.jpg)
Adding event handlers using jQuery
Easier than slide 133's approaches shown in previous JS slideshow
![Page 21: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/21.jpg)
Hiding text
![Page 22: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/22.jpg)
Picture Galleries the jQuery Way! Using jQuery simplies the "custom" gallery you created
in assignment1
Combines jQuery event handling with jQuery effects
![Page 23: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/23.jpg)
The Gallery's HTML File<!DOCTYPE html><html><head> <title>Picture Gallery</title> <script src="JS/jquery.js"></script> <script src="JS/popup.js"></script> <link href="CSS/styles.css" type="text/css" rel="stylesheet"/></head><body><div id="bodycenter"><div id="banner"> <p class="HugeWhiteItalicText">San Juan Mountains Colorado</p></div><div id="gallery"> <img src="thumbnails/BLM Land Near Bayfield.jpg" class="image" /> <img src="thumbnails/Caterpillars near Castle Rock.jpg" class="image" /> <img src="thumbnails/Climbing Engineer Pass.jpg" class="image" /></div><div id="popupphoto"> <div id="popupbanner"> <div id="filename"></div> <div id="close">Close</div> </div> <img id="imgphoto" name="imgphoto" /></div></div></body></html>
![Page 24: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/24.jpg)
JS File Using jQuery for Gallery$(function() { $("#popupphoto").click(function() { $("#popupphoto").fadeOut(1000); });
$(".image").mouseover(function() { $(this).css("border", "3px solid #9F0"); }); $(".image").mouseout(function() { $(this).css("border", "3px solid #000000"); }); // continued on next slide
Assign event handlers here rather than in the HTML file
![Page 25: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/25.jpg)
JS File Using jQuery for Gallery // continued from previous slide $(".image").click(function() { var path = $(this).attr("src"); path = getLargePhotoPath(path);
$("#imgphoto").attr("src", path);
$("#popupphoto").slideDown(1000); $("#filename").text(getFilename(path)); });});
getLargePhotoPath and getFilename are short stringhandling functions to getthe path to the large photosfrom the current thumbnail's path and to return the filenameto display in the pop up photo
this refers to clicked image object
![Page 26: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/26.jpg)
Still not quite done... Previous gallery example issue:
After displaying large photo If close large photo first (has a fade out effect) clicking
thumbnail allows the slide down effect (this is also good)
Click another thumbnail without closing the larger photo Next image is displayed without the slide down effect
(not good – want to retain the fade out and slide in effects)
Solution adds a bit more code...
![Page 27: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/27.jpg)
Solution Modify the thumbnail image's click event
$(".image").click(function() { Check to see if the larger pop up photo is displayed:
if($("#popupphoto").is(":visible")) {
If it is, add code to fade out the large photo before sliding in the new photo Not quite as easy as it might look
.fadeOut and .slideDown allow following lines of code to run while the fade or slide is happening.
Need a way to ensure the fadeOut finishes before starting the slideDown!
![Page 28: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/28.jpg)
Solution (continued) .fadeOut and .slideDown have an optional second parameter
Second parameter is a function called after the fade or slide is finished.
Use an anonymous function to slide in the new photo after the fade is finished!$("#popupphoto").fadeOut(1000, function() { // code to slide in };);
Using the name of a normal function as the second parameter seems like it should work but it doesn’t. The function gets called immediately without waiting for the effect to complete. Use an anonymous function.
![Page 29: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/29.jpg)
var showFileName = true; // = true to show the filename in the popup photo, = false to hide it$(function() { // I'm not showing all the event handlers from slides 25 and 26 // I'm only showing how to modify the $(".image").click(function() { code // but the other code is still needed here. $(".image").click(function() { var path = getLargePhotoPath($(this).attr("src")); if($("#popupphoto").is(":visible") == true) { fadeThenSlideIn(path); } else { slideIn(path); } });});function fadeThenSlideIn(path) { $("#popupphoto").fadeOut(1000, function() { $("#imgphoto").attr("src", path); $("#popupphoto").slideDown(1000); if(showFileName == true) { $("#filename").text(getFilename(path)); } });}function slideIn(path) { $("#imgphoto").attr("src", path); $("#popupphoto").slideDown(1000); if(showFileName == true) { $("#filename").text(getFilename(path)); }}
![Page 30: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/30.jpg)
AJAX AJAX – Asynchronous JavaScript and XML
XML – eXtensible Markup Language markup language for encoding data opening and closing tags used to identify data semantics like html but you get to define the tags and their meanings
AJAX allows updating portions of a web page with additional detail without reloading "all" of the web page.
![Page 32: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/32.jpg)
AJAX Initial web page has one or more sections within it with content derived from other web pages
HTTPRequest retrieves this data Makes Drill Down (Master Detail) pages easy to implement
![Page 33: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/33.jpg)
jQuery AJAX Simplifies AJAX and creates cross browser
compatible code
![Page 34: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/34.jpg)
HTML fragment – not a complete page
![Page 35: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/35.jpg)
Dynamically generated content
![Page 36: JQuery CS 268. What is jQuery? From their web site:](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dda5503460f94ad004f/html5/thumbnails/36.jpg)
Another jQuery shortcut The first code example does the same thing the second
one is doing (with less code)
$("#orderInfo").html(ajax_load).load(loadUrl) .css("display", "none") .css("top", 40) .fadeIn(500);
$("#orderInfo").html(ajax_load).load(loadUrl);$("#orderInfo").html(ajax_load).css("display", "none");$("#orderInfo").html(ajax_load).css("top", 40);$("#orderInfo").html(ajax_load).fadeIn(500);
Same as: