jQuery - Syntax, Method, Event and Animation Effects

Many tools are useful for Fast Prototyping to develop Mobile Web Apps, jQuery and jQuery Mobile are one of the most popular solution. Before you start studying jQuery, you should know how to write simple HTML, CSS and JavaScript programs.

jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. Pack common tasks with many lines of JavaScript code into a single line of function code. For example, a lot of complicated codes like AJAX calls and DOM manipulation are simplified by jQuery.

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

Many big companies like Google and Microsoft support jQuery to be compatible with all major browsers. Two ways to use jQuery in your website:

• Download the jQuery library from jQuery.com, if you want to maintain and modify the .js file provide by jQuery.
  <script src="jquery-1.11.1.min.js"></script>
  or
  <script src="my_jquery_functions.js"></script>
• Include jQuery from a CDN (content delivery network or content distribution network), like Google or Microsoft. This approach is more efficient since visitors of your website might cache those .js files in their browsers already.
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  or from MS:
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>

jQuery Syntax

You should understand how to select HTML DOM elements (CSS syntax to select elements) and do some actions on selected elements. Basic syntax is: $(selector).action()

• $ prefix sign to use jQuery
• (selector) to query or find HTML elements . E.g. run jQuery function after document ready (page loaded). Check more selector from http://www.w3schools.com/jquery/jquery_selectors.asp.
  <script> $(document).ready(function(){  ... }); </script>
• jQuery action() to be the defined JS or jQuery functions. E.g. define jQuery function in:
  <script> $(function(){  ... }); </script>

E.g. $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test".

Auto widget (<div>) width and animation by jQuery

Changing following jQuery functions to see the different effects of animations. User-defined callback function will be invoked before the jQuery function due to the function call is first in last out, like the stack structure.

• hide(speed, callback), show, toggle: e.g. hide(500);
• fadeOut(speed, callback), fadeIn, fadeToggle: e.g. fadeOut("slow");
• fadeTo(speed, opacity): e.g. fadeTo(500, 0.1);
• slideDown(speed, callback), slideUp, slideToggle: e.g. fadeOut("slow");

<script>
$(document).ready(function(){
// my js fun: get screen width based on portrait or landscape
var w = getMobileWidth(); 
// higher width ==> show <div id="#homepage"> as left-side-bar, NOTE: all data are string "" applied to jQuery
if(w > 760) $("#homepage").css("width", "360"); 
// Hide <div id="#homenav"> while click on this <div> block. ==> Auto hide navigation menu for mobile App
$("#homenav").click( function() {$(this).hide();} );
// show <div id="#homenav"> while double click on content block. Complete the animation in 500 ms
$("#homenav-content").dblclick( function() {$("#homenav").show(500);} );
$("#homenav-content").click( function() {$("#homefooter").toggle(500);} );
});
</script>

jQuery Event Methods

In jQuery, most DOM events have an equivalent jQuery method.

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery Animations

$(selector).animate({params}, speed, callback);
{params} controls the movement of the selected element with following CSS properties. Each property statement is denoted by 'str' ("str" is also workable) and is separated by "," instead of ";".
NOTE: All property names must be camel-cased when used with the animate() method. E.g. CSS property name with "-", e.g. "font-size", must be "fontSize".

• direction: {left: '250px', top: '200px'}
• opacity: {opacity: '0.5'}
• block size: {height: '150px', width: '+=150px'}, {height: 'toggle'}
• font: fontSize:  '3em', fontFamily: 'Times New Roman'}

jQuery Effect Methods

Method	Description
animate()	Runs a custom animation on the selected elements
clearQueue()	Removes all remaining queued functions from the selected elements
delay()	Sets a delay for all queued functions on the selected elements
dequeue()	Removes the next function from the queue, and then executes the function
fadeIn()	Fades in the selected elements
fadeOut()	Fades out the selected elements
fadeTo()	Fades in/out the selected elements to a given opacity
fadeToggle()	Toggles between the fadeIn() and fadeOut() methods
finish()	Stops, removes and completes all queued animations for the selected elements
hide()	Hides the selected elements
queue()	Shows the queued functions on the selected elements
show()	Shows the selected elements
slideDown()	Slides-down (shows) the selected elements
slideToggle()	Toggles between the slideUp() and slideDown() methods
slideUp()	Slides-up (hides) the selected elements
stop()	Stops the currently running animation for the selected elements
toggle()	Toggles between the hide() and show() methods

jQuery Method Chaining

jQuery statements can be chained into one line with . operator, in which statements are execute from left to right. The following example "p1" element first changes to red, then it slides up, and then it slides down:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);