seem4570 system design and implementationseem4570/2014/lecture/lecture04... · 2014. 9. 23. ·...
TRANSCRIPT
SEEM4570 System Design and Implementation Lecture 04 – jQuery
Copyright (c) 2012. Gabriel Fung. All rights reserved.
jQuery
! jQuery is a JavaScript Framework. ! It is lightweight.
! jQuery takes a lot of common tasks that requires many lines of JavaScript code to accomplish, and wraps it into methods that you can call with a single line of code.
Copyright (c) 2012. Gabriel Fung. All rights reserved.
What jQuery can do?
! HTML/DOM manipulation
! CSS manipulation
! HTML event methods
! Effects and animations
! AJAX
! …
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Other Frameworks
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Adding jQuery into Your Site – Method 1
! There are two versions of jQuery available for downloading: ! Production version
! Development version
! Both versions can be downloaded from jQuery.com
! The jQuery library is a single JavaScript file. To add jQuery library into your site, simply type: ! <head>
<script src="jquery.js"></script> </head>
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Adding jQuery into Your Site – Method 2
! If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). ! Google CDN:
! <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
! Microsoft CDN: ! <script src="http://ajax.aspnetcdn.com/ajax/jQuery/
jquery-1.9.0.js"></script>
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Host vs. CDN
! Many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.
! Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
Copyright (c) 2012. Gabriel Fung. All rights reserved.
jQuery Syntax
! Basic syntax: ! $(selector). eventOrAction(params)
! Explanation: ! $ – define/access jQuery ! selector – find an element/group of elements ! eventOrAction – event or action to be performed ! params – parameters required by the event.
! Examples: ! $("p").hide(); ! $("p").click(function(){
$("p").hide() });
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Document Ready Event
! One of the most important events in HTML is "document ready event" (below all are equivalent): ! $(document).ready(myFunction());
function myFunction(){ … codes … });
! $(document).ready(function(){ … codes … });
! $(function(){ … codes … });
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Only if you use jQuery
Document Ready Event (cont'd)
! By doing so, we can prevent "… codes …" from running before the document is finished loading (i.e., ready).
! It is good practice to wait for the document to be fully loaded and ready, before working with it. ! Examples of actions that can fail if methods are run before the
document is fully loaded: ! Hide an element that is not created yet
! Get the size of an image that is not loaded yet
Copyright (c) 2012. Gabriel Fung. All rights reserved.
jQuery Selector
! jQuery selectors allow you to select and manipulate HTML element(s). ! With jQuery selectors you can find elements based on their id,
classes, types, attributes, values of attributes and much more!
! We will discuss the followings: ! Element selector
! ID selector
! Class selector
! Other important selector by examples
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Element Selector
! Selects elements based on their tag names: ! $("aTagName")
! Example: ! Select all <p> elements on a page like this:
! $("p")
Copyright (c) 2012. Gabriel Fung. All rights reserved.
ID Selector
! Select a specific element based on its ID. ! $("#anElementID")
! An id should be unique within a page, so you should use the ID selector when you want to find a single, unique element.
! Example: ! An HTML:
! <p id="para1">xxxxxx</p> <p id="para2">xxxxxx</p> <p id="para3">xxxxxx</p>
! To select the <p> with id=para1: ! $("#para1")
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Class Selector
! Selects elements based on their class names: ! $('.aClassName')
! Example ! Select all elements with the class "myClass":
! $(".myClass")
Copyright (c) 2012. Gabriel Fung. All rights reserved.
More Examples
! $("*") ! Selects all elements
! $(this) ! Selects the current HTML element (very useful. Discuss later)
! $("p.intro") ! Selects all <p> elements with class="intro"
! $("p:first") ! Selects the first <p> element
! $("ul li:first") ! Selects the first <li> element from the first <ul>
! $("ul li:first-child") ! Selects the first <li> element of every <ul>
Copyright (c) 2012. Gabriel Fung. All rights reserved.
More Examples (cont'd)
! $("[href]") ! Selects all elements with an href attribute
! $("a[target='_blank']") ! Selects all <a> elements with a target attribute value equal to
"_blank"
! $("a[target!='_blank']") ! Selects all <a> elements with a target attribute value NOT equal
to "_blank"
Copyright (c) 2012. Gabriel Fung. All rights reserved.
More Examples (cont'd)
! $(":button") ! Selects all <input> elements of type="button"
! $("tr:even") ! Selects all even <tr> elements
! $("tr:odd") ! Selects all odd <tr> elements
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Events
! All the different visitors actions that a web page can respond to are called events (or actions).
! Examples: ! moving a mouse over an element
! selecting a radio button
! clicking on an element
! The terms such as "fires / on / trigger" are often used with events. ! Example:
! The keypress event fires when you press a key
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Some Common jQuery Events
Mouse Keyboard Form Document/Window
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
Copyright (c) 2012. Gabriel Fung. All rights reserved.
For a full list of all events, see: http://www.w3schools.com/jquery/jquery_ref_events.asp
jQuery Events
! Example: ! To assign a click event to all paragraphs on a page, you can do
this: ! $("p").click();
! To define what should happen during the event fires: ! $("p").click(myFunction());
function myFunction(){ ……… };
! $("p").click(function(){ // some codes });
! $("p").click(function(){ alert("You have clicked a paragraph!"); });
Copyright (c) 2012. Gabriel Fung. All rights reserved.
jQuery Effects
! We will discuss some major effects in this lecture note only: ! Hide / Show / Toggle
! Fade
! Slide
! Animate
! Stop
! For a full list: ! http://www.w3schools.com/jquery/jquery_ref_effects.asp
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Hide / Show / Toggle (1)
! $(selector).hide([speed], [callback]); $(selector).show([speed], [callback]); $(selector).toggle([speed], [callback]); ! speed (optional)
! Valid values: "slow", "fast", or milliseconds.
! callback (optional) ! Function to be executed after the effect completes.
! JavaScript are executed line by line. Yet, with effects, the next line of code can be run even though the effect is not finished. This may create errors.
! To prevent this, you can create a callback function.
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Hide / Show / Toggle (2)
! Example: ! $("p").click(function(){
$("p").toggle(); });
! $("p").click(function(){ $(this).toggle(); });
! $("p").click(function(){ $(this).toggle(1000); });
! $("p").click(function(){ $(this).toggle(1000, function(){ alert("action done!"); }); });
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Fade
! $(selector).fadeIn([speed], [callback]); $(selector).fadeOut([speed], [callback]); $(selector).fadeToggle([speed], [callback]); ! speed (optional)
! The speed of animation. Valid values: "slow", "fast", or milliseconds.
! callback (optional)
! $(selector).fadeTo(speed, opacity, [callback]); ! Speed (required)
! Opacity (required) ! Target opacity
! callback (optional)
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Slide
! $(selector).slideDown([speed], [callback]); $(selector).slideUp([speed], [callback]); $(selector).slideToggle([speed], [callback]); ! speed (optional)
! The speed of animation. Valid values: "slow", "fast", or milliseconds.
! callback (optional)
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Slide (cont'd)
! Example ! <script>
$(function(){ $("#flip").click(function(){ $("#content").slideToggle(1000); }); }); </script> <div id="flip">Click to slide the content</div> <div id="content" style="display: none; background: yellow">This is the content.</div>
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Animate
! $(selector).animate({params},speed,callback); ! params (required) –defines the CSS properties to be animated.
! speed (optional) ! The speed of animation. Valid values: "slow", "fast", or milliseconds.
! callback (optional)
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Animate (cont'd)
! Example ! <script type="text/javascript">
$(function(){ $("div").click(function(){ $("div").animate({height:'400px',opacity:'0.2'},"slow"); }); }); </script> <div style="background:red; height:100px; width:100px; position:absolute; color:yellow; font-weight: bold">SEEM4570</div>
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Animate (cont'd)
! Note that animation on the same element is "queued".
! Example ! <script type="text/javascript">
$(function(){ $("div").click(function(){ $("div").animate({height:'300px',opacity:'0.4'},"slow"); $("div").animate({width:'300px',opacity:'1', 'font-size': '10px'},"slow"); $("div").animate({height:'100px',opacity:'0.4', 'font-size':'50px'},"slow"); $("div").animate({width:'100px',opacity:'1', 'font-size': '16px'},"slow"); }); }); </script> <div style="background:red; height:100px; width:100px; position:absolute; color:yellow; font-weight: bold">SEEM4570</div>
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Stop
! The jQuery stop() method is used to stop an animation or effect before it is finished.
! It is extremely useful!
! $(selector).stop(stopAll,goToEnd); ! stopAll (optional)
! Specifies whether the animation queue should be cleared. Default is false, which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards.
! goToEnd (optional) ! Specifies whether to complete the current animation immediately.
Default is false.
Copyright (c) 2012. Gabriel Fung. All rights reserved.
jQuery Method Chaining
! Chaining allows us to run multiple jQuery commands, one after the other, on the same element(s) on one line. ! This way, browsers do not have to find the same element(s) more
than once ! More efficient
! To chain an action, you simply append the action to the previous one: ! $("p").fadeIn(2000). fadeOut(2000);
Copyright (c) 2012. Gabriel Fung. All rights reserved.
jQuery DOM Manipulation
! One very important part of jQuery is the possibility to manipulate the DOM. ! DOM = Document Object Model
! The DOM defines a standard for accessing HTML documents: ! DOM is a platform and language-neutral interface that allows
programs and scripts to dynamically access and update the content, structure, and style of a document.
! jQuery comes with a bunch of DOM related methods, that makes it easy to access and manipulate elements and attributes.
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Get Content
! To get the content: ! text() – Sets or returns the text content of selected elements
! html() – Sets or returns the content of selected elements (including HTML markup)
! Example: ! <p id="para1"><b>This is a sentence</b></p>
<script> alert($("#para1").text()); alert($("#para1").html()); $("#para1").html("<i>A new sentence</i>"); alert($("#para1").text()); alert($("#para1").html()); </script>
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Get Attributes
! To get the content: ! attr() – Sets of get the attribute of an element
! Example: ! <p id="para1"><b>This is a sentence</b></p>
<script> alert($("#para1").attr("id")); $("#para1").attr ("id", "paraNew"); alert($("#para1").attr()); </script>
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Add Element
! Four major methods: ! append() – Inserts content at the end of the selected elements
! prepend() – Inserts content at the beginning of the selected elements
! after() – Inserts content after the selected elements
! before() – Inserts content before the selected elements
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Add Element (cont'd)
! Given: ! <div class="container">
<div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
! Append: ! For the following script:
! $('.inner').append('<p>Test</p>');
! Result: ! <div class="container">
<div class="inner">Hello<p>Test</p></div> <div class="inner">Goodbye<p>Test</p></div> </div>
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Add Element (cont'd)
! After: ! For the following script:
! $('.inner').after('<p>Test</p>');
! Result: ! <div class="container">
<div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> <p>Test</p> </div>
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Remove Element
! To remove elements: ! remove() - Removes the selected element (and its child elements)
! empty() - Removes the child elements from the selected element
Copyright (c) 2012. Gabriel Fung. All rights reserved.
CSS
! Three methods to interact with CSS: ! addClass() - Adds one or more classes to the selected elements
! removeClass() - Removes one or more classes from the selected elements
! css() - Sets or returns the style attribute
! Example: ! $("div").addClass("myClass");
! $("div").css({"height": "100px", "background-color": "red"});
Copyright (c) 2012. Gabriel Fung. All rights reserved.
Element Dimensions
! To work with dimensions: ! width()
! height()
! innerWidth()
! innerHeight()
! outerWidth()
! outerHeight()
Copyright (c) 2012. Gabriel Fung. All rights reserved.