seem4570 system design and implementationseem4570/2014/lecture/lecture04... · 2014. 9. 23. ·...

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.


What jQuery can do?

!   HTML/DOM manipulation

!   CSS manipulation

!   HTML event methods

!   Effects and animations

!   AJAX

!   …


Other Frameworks


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>


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>


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.


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() });


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 … });


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


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


Element Selector

!   Selects elements based on their tag names: !   $("aTagName")

!   Example: !   Select all <p> elements on a page like this:

!   $("p")


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")


Class Selector

!   Selects elements based on their class names: !   $('.aClassName')

!   Example !   Select all elements with the class "myClass":

!   $(".myClass")


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>


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"


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


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


Some Common jQuery Events

Mouse Keyboard Form Document/Window

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload


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!"); });


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


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.


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!"); }); });


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



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.



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>


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.



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>


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>


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.


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);


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.


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>


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>


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


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>


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>


Remove Element

!   To remove elements: !   remove() - Removes the selected element (and its child elements)

!   empty() - Removes the child elements from the selected element


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"});


Element Dimensions

!   To work with dimensions: !   width()

!   height()

! innerWidth()

! innerHeight()

! outerWidth()

! outerHeight()


seem4570 system design and implementationseem4570/2014/lecture/lecture04... · 2014. 9. 23. ·...

Documents