1. JQuery Introduction

The purpose of jQuery is to make it much easier to use JavaScript on your website.

What is jQuery?

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.

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The jQuery library contains the following features:

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

2. jQuery Syntax

With jQuery you select (query) HTML elements and perform "actions" on them.

jQuery Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

  • A $ sign to define/access jQuery
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)
EXAMPLES :


The Document Ready Event

You might have noticed that all jQuery methods in our examples, are inside a document ready event:

EXAMPLE :


This is to prevent any jQuery code from running before the document is finished loading (is ready).

3. jQuery Selectors

jQuery selectors are one of the most important parts of the jQuery library.

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector

The jQuery element selector selects elements based on the element name.

You can select all

elements on a page like this:

EXAMPLE :


EXAMPLE:


The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

To find an element with a specific id, write a hash character, followed by the id of the HTML element:

EXAMPLES:

When a user clicks on a button, the element with id="test" will be hidden:

EXAMPLE:


The .class Selector

The jQuery class selector finds elements with a specific class.

To find elements with a specific class, write a period character, followed by the name of the class:

EXAMPLES:

When a user clicks on a button, the element with id="test" will be hidden:

EXAMPLE:


4. jQuery Event Methods

jQuery is tailor-made to respond to events in an HTML page.


What are Events?

All the different visitor's actions that a web page can respond to are called events.

An event represents the precise moment when something happens.

Examples:

  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element

Here are some common DOM events:

Mouse Events Keyboard Events Form Events Document/Window Events
click keypress Submit load
dbclick keydown change Resize
mouseenter keyup focus scroll
mouseleave blur unload

Commonly Used jQuery Event Methods

  • $(document).ready()
  • click()
  • dblclick()
  • mouseenter()
  • mouseleave()
  • mousedown()
  • mouseup()
  • hover()
  • focus()
  • blur()

5. JQuery Effects

  • jQuery Hide/Show
  • jQuery Fade
  • jQuery Slide
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback
  • jQuery Chaining