Genius

Introduction to jQuery

Before we start with mobile application development let us first introduce a very well known and useful library jQuery. Here we will cover some basics of jQuery library and how to use it for simple internet queries. The jQuery library basically can be used to do following operations:

Manipulation of HTML/DOM elements in a web application.
Manipulation of CSS properties/elements in a web application.
Create/add Listeners to HTML events.
Create simple effects and animations in a web application.
Invoke and receive AJAX queries.

Include jQuery into a project

The jQuery can be included int our project in two simple ways:

as external resource,
as internal resource,

The difference is only on loading time and requirements of available internet connectivity.

<!-- Use External jQuery from Google CDN -->
<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Use External jQuery from Microsoft CDN -->
<script type="text/javascript"
    src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script><!-- Use Internal copy of jQuery library -->
<script type="text/javascript"
    src="js/jquery-3.3.1.min.js">
</script>

It is better to add <script> tag at the end of <body> section of web page. At this moment 3.3.1 is the newest version of jQuery, however everybody can use the version of own choose. The library files are usually available in two versions jquery-3.3.1.js and jquery-3.3.1.min.js, the former is bigger and is made especially for developers to analyse while the latter is smaller and unreadable for people because all unneeded space characters are omitted, therefore this version is preferred as it requires shorter time to load and smaller bandwidth.

Selector operator

One of the most important element introduced in jQuery is selection operator $, this is an shortcut to original javascript selection methods like getElementById or querySelector.

With use of selector, we can easily operate on DOM elements of our web pages. DOM - Document Object Model - an object representation of html document and its elements. However, we have to remember that jQuery selector is not exactly document.getElementById operation. By default selector wraps all elements that fits the pattern so it is more like the list of appropriate objects than a single object. That means selector has no direct access to all object methods. In order to get a DOM object from selector we should use direct request of list element like in the following code:

var el = document.getElementById("some_id");
//Equivalent operation with use of jQuery selector
var el = $("#some_id")[0];

Add simple actions when page is load

When a selector gives an object we can bind operations to events connected with this object. For example object "document" - that represents the web page have an event 'load'. This event is fired whenever the browser finish loading page with all required additional files.

Just for simplicity our js code is simply included inside .html file. In the real word it is better to save that in external .js file and include to the page using <script> tag. All .js files that uses jQuery should be included after the jQuery library.

In the line 12 we can see the selector $('document') and a definition what should happen when page is 'ready' i.e. when 'load' event is fired.

	$(document).ready(

Inside "ready(...)" we define a new anonymous function that will be bind to 'ready' event. The function is anonymous as it is a method that will be used in one place and no name is needed. Anonymous functions are usually defined like the examples below:

 function() { ...} //anonymous function without parameters
 function(par1, par2) { ...} //anonymous function with two parameters par1 and par2

In this anonymous function in the line 13 we select all <button> elements, and create an action connected with 'click' event. The 'click' event will be invoked whenever user clicks the button. In the code (line 15), we ordered to hide the clicked element (button). An operation .hide comes from jQuery and allow to make elements invisible.

$("button").click(function(){
    $(this).hide();
});

In the result when page is loaded the actions are added to all three buttons separately. When any of the buttons is clicked it hides.

It it obvious that if in jQuery we have hide operation, there have to be also a show one

We add anonymous function to click event for both buttons "btn1" and "btn2" in the lines 15 and 19 respectively. in both of this methods we show or hide the element <img>. We add anonymous function to click event for both buttons "btn1" and "btn2" in the lines 15 and 19 respectively. in both of this methods we show or hide the element <img>.

Starting with the webpage of the form

Add the following functionalities:

When user click on the button "Show Julius Caesar" the photo of the Caesar is shown
When user click on the button "Show All" every hidden elements are shown
When user click on the button "Hide all again" all elements back to the original state.

In the next example we will introduce a similar jQuery method called toggle, this operation can be used show the visible elements and hide invisible ones.

After the page loads, one of the <p> elements is hidden because in line 14 we set style to display:none.

<p id="Stanza2" style="display:none">

Here in the line 27 we invoke toggle method on all <p> element. This will toggle elements between two states hidden and shown. Here in the line 27 we invoke toggle method on all <p> element. This will toggle elements between two states hidden and shown.

Additional jQuery actions like slideDown, slideUp, slideToggle allows similar operations but as animated action not instant ones.

Within the last code change methods slideDown, slideUp, slideToggle into new operations: fadeIn, fadeOut, fadeToggle. Within the last code change methods slideDown, slideUp, slideToggle into new operations: fadeIn, fadeOut, fadeToggle.

All of the animation operations can have additional time parameters (in milliseconds), test how it changes the original behaviour.

.hide(300),
.slideDown(300),
.fadeOut(300)

There are also predefined speeds 'slow', 'fast', 'normal':

.show('fast')

Other actions

jQuery introduces more operations like click, these are dblclick, mouseover, mouseout. And additionally more sophisticated animation driven by changes in the style of the element

As we can see during animate operation the browser create an animation between two styles

    width: "55%",
    opacity: 0.7,
    fontSize: "2em",

and

    fontSize: "1em",

This animation requires change of width, size of the font and opacity. This animation requires change of width, size of the font and opacity.