What is?

jQuery is a JavaScript Library.

Focuses on simplifying DOM manipulation, AJAX calls, Event handling, animation.

Provides API that works across a multitude of browsers.

Getting started

To start using jQuery in your site, you can:

Download it

include it from a CDN (Content Delivery Network)

Popular jQuery CDNs:

jQuery @jQuery CDN

jQuery @Google CDN

or just search in google: jQuery CDN

The benefits of using CDN

Popular CDNs libraries are cached on user's machines

Cloud based - the file will be downloaded from the nearest server to the user

jQuery Syntax

The most basic concept of jQuery is to "select some elements and do something with them."

The jQuery syntax is tailor-made for selecting HTML elements and perform actions on the element(s).

			$(selector).action()
		

			$("div").hide() - hides all <div> elements.

			$(".red").hide() - hides all elements with class="red"

			$("#vip").hide() - hides the element with id="vip"

			$(this).hide() - hides the current element.
		

How it works?

The jQuery library exposes its methods and properties via two properties of the window object called jQuery and $

$ is just an alias for jQuery and it's often employed because it's shorter and faster to write

The Document Ready Event

It's a good practice to run your code as soon as the document is ready to be manipulated, and not before that.

			$( document ).ready(function() {

				// Your code here.

			});
		

			// Shorthand for $( document ).ready()
			$(function() {

				// Your code here.

			});
		

jQuery Selectors

jQuery supports most CSS3 selectors, as well as some non-standard selectors.

Reference: Selectors @jquery.com

Basic Selectors - Examples

			// by ID:
			$( "#vip" );

			// by class name:
			$( ".red" );

			// by attribute selector:
			$( "input[target='_blank']" );

			// by pseudo-elemement selector:
			$( "div:nth-of-type(1)" )
		

jQuery provides simple methods for attaching event handlers to selections.

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

			$(".title").click();
		

Syntax

			$( 'selector' ).eventMethod( eventHandlerFunction );
		

eventMethd is any of jQuery Event Methods

eventHandlerFunction - definition of the function which will be executed when the event fires.

			$('.title').click(function (e) {
				$(this).css('color','red');
			})
		

The on() Method

Attach an event handler function for one or more events to the selected elements

Reference: on() @jquery

			$('.item').on('click', function (e) {
				$(this).css('color','red');
			})
		

The Event Handler Function

			$('.title').click(function (e) {
				console.dir(e);
				$(this).css('color','red');
			})
		

The eventHandlerFunction can receive an event object.

Reference: event object @jquery

Inside the function, 'this' refers to the DOM element that initiated the event.

use: $(this) to convert the DOM object to jQuery Object

Overview

The most common traversing operations is to get parents, descendants, and siblings of elements.

Parents

parent() - returns immediate parent

Reference: parent @jquery

parents() - returns ancestors

Reference: parents @jquery

parentsUntil() and closest()

			// get parents of all selected children:
			$('.child').parent().css('background', 'yellow');

			// get parents with class='uncle' of all selected children:
			$('.child').parent('.uncle').css('background', 'orange')
		

Descendants

Self-learning: Traversing - Descendants @w3schools

Siblings

Self-learning: Traversing - Siblings @w3schools

get

text() - Sets or returns the text content of selected elements

html() - Sets or returns the content of selected elements (including HTML markup)

val() - Sets or returns the value of form fields

Live Demo - DataTables

DataTables site: datatables.net

The task - Get familiar with fotorama jQuery plugin

fotorama is a A simple yet powerful responsive jQuery image gallery.

Check the fotorama site and using the docs and examples there, try to implement a simple responsive slideshow as given bellow

Solution