JQuery Tutorial

This is a easy, quick and fast tutorial for JQuery. When you allready worked with JQuery you can skip this beginner tutorial and move forward to JQuery for Advanced.

JQuery Introduction

JQuery has in most cases a very simple index.

Select elements

You first access JQuery, select one or more elements and choose an action for the chosen elements. To access JQuery use the $ (dollar sign). When you select one or more elements, you have many possibilities. First, I want to present you the four most common ones.

1. Select the current element:

 (this)

2. Select all elements with a specific HTML tag / element (f.e. <div>):

("div")

3. Select all elements with a specific class name (f.e. .testClass):

(".testClass")

4. Select all elements with an identification number (f.e. id=12345):

("#12345")

You can also combine these types. For example choose all div elements with the class .testClass:

$.("div.testClass)

But as mentioned before, these four are not the only possibilities to select elements. Here are a few more, which are rarely used:

1. Select all elements:

$("*")

2. Select the first element in a container (f.e. a div HTML container):

$("p:first) // you have to use the colon for this action

3. It is also possible to get the first element of the list – but you have to decide: Do you want the first element of the first list item, or the first element of each list item. Here are the both examples doing this:

$("ul li:first") // just the first item of the first list element
$("ul li:first-child") // get the first elements of each list item

4. Sometimes it is also necessary to select elements by their attributes. Here you use the square brackets.

$("[src]") // get the elements which include an src attribute

5. It is also possible to query by the value of the attribute element.

$("[src='myImage.jpg']") // all elements with the src attribute which attribute value is myImage.jpg.

You can also choose elements which don’t have this attribute value by changing the = (equal sign) to != (not equal).

6. Select just the even or odd elements:

$(":odd") // for even: $(":even")

Note: Don’t forget the quotations!

A quick example to hide the element with the id=4 will be the following:

$("#4").hide()

All JQuery actions should start when the document is ready. If an JQuery action starts before, the selected element might be not created and the JQuery can’t perform the action. Therefore, the JQuery code should be inside the document ready event. This event states that the document is now ready for changing. The document ready event always looks like the following example:

$(document).ready(function() {
	// your JQuery Code 
});

If you are lazy and don’t like much code, you can also use the short form of the document ready event.

$function() {
	// your JQuery Code
});

It is recommended, that you have your JavaScript and JQuery functions in a separate file. If doing so, you have the load the file in the head – but after adding the JQuery library.

<head>
	<script src="JQuery_library.js"></script>
	<script src="myJQuery_or_JavascriptFile.js></script>
</head>

Events

Up to now you have accessed JQuery and selected one or more elements. But why? Exactly, for events. You want to do anything with this or another element.

Like in any other programming language, you have different types of events: Mouse events (moving or clicking), keyboard events (typing a key), form events (focus or submitting), document events (scroll, load, …) or window events. In JQuery there are many events (the most important) but not all events and effects which are available using JavaScript. This is important to keep in mind, cause f.e. animation won’t work with JQuery. Below I described the most important JQuery elements, ordered by the event type. If you want to have a detailed explanation you can read the advanced guide for JQuery.

  • Mouse Events: click, mousedown, mouseup, mousemove, mouseover, scroll
  • Key Events: keydown, keypress, keyup
  • Form Events: submit, change, focus
  • Document Events: focus, focusin, focusout, change, select, submit
  • Window Events: load, resize, scroll, unload, error

For the beginning these events are enough. But keep in mind, that you often want to solve problems or create a friendlier user environment with JQuery. For these advanced conditions I recommend you read the JQuery for advanced article at this blog. The beginner guides just focused on learning the JQuery language.

Callback

Callbacks are an important property of JQuery and JavaScript. The statements (JavaScript as well as JQuery) are executed line by line. The problem could be, that code can run (the next line) while the functions of the previous lines are not finished. This will cause errors. But it is really easy to prevent errors and simply use callback functions.

These functions are executed after the function is finished. When using Callback functions you can different between anonymous functions (these functions don’t have a name) and functions with names.

Chaining