YHSCS :: Database Programming :: Lessons

Database Programming :: Lessons :: jQuery

Why Use jQuery?

jQuery is a Javascript library that makes manipulating your websites dynamically much easier. For example, instead of writing the following in Javascript:

var titleDiv = document.getElementById("title");

You can write this using jQuery:

var titleDiv = $("#title");

Using a Javascript library will make design a web app much simpler. There are other options out there other than jQuery, but jQuery is the most prevalent so you will be able to find a lot of extensions and help for it.

Loading jQuery

jQuery is not usable unless it has been loaded by your web page. If you use the HTML5 Boilerplate template this is already done for you. If you are not using the template, you can complete the following steps to load jQuery on a single web page:

Go to jQuery.com to download the most recent production version of jQuery.
Make sure the Javascript file you downloaded is saved in the folder for your web site.
Add the following code to the bottom of your HTML file:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>

The first line of code above will try to load Google's version of jQuery. You can change the version number to load a different version of the framework. Google's version of jQuery is hosted on a content delivery network, or CDN. The benefit of a CDN is that Google hosts jQuery on a number of servers around the world, which will lead to a speed increase for your website. If the Google version fails to load you local version of jQuery will be loaded. Make sure the path to jQuery is correct on the second line.

It is important to note where you load jQuery on your page. jQuery must be loaded before you can use it so make sure any Javascript code that uses jQuery loads after the library.

Selectors

Before you can change something using jQuery you must select what you want to change. jQuery includes a number of selectors that let you select exactly what you want to change or investigate. Below are a few of the selectors you would most likely use:

The ID Selector lets you select a specific element by its ID. Use the ID selector by typing $("#id") where id represents the ID you want to select.
jQuery Docs

The Class Selector lets you select all elements that have the given class. Use the class selector by typing $(".class") where class represents the class you want to select.
jQuery Docs

The Element Selector lets you select all elements that have the given tag name. Use the element selector by typing $("tag") where tag represents the HTML tag you want to select.
jQuery Docs

The Contains Selector lets you select all elements that contain the given text. Use the contains selector by typing $(":contains('text')") where text represents the text you are looking for.
jQuery Docs

You can combine selectors to get even more specific:

$("div:contains('Sign-In')");

Selects all divs that contain the text "Sign-In".

$("#main .left");

Selects every instance of the "left" class within the ID "main".

Manipulating Elements

Once you have selected an element using jQuery you most likely want to do something with it. Typically that means getting some information about it or changing it. Below are the most common jQuery methods to manipulate elements:

Method Definition from jQuery Docs:

The html method gets or sets the HTML inside the selected element.

Usage:

.html(): Find the value of the HTML inside the selected element.
.html('value'): Set the HTML to the given value.

Method Definition from jQuery Docs:

The css method gets or sets a css property for the selected element.

Usage:

.css('property'): Find the value of the given CSS property.
.css('property', 'value'): Set the CSS property to the given value.

Method Definition from jQuery Docs:

The val method gets or sets the value attribute for the selected element. This is very useful when used with forms.

Usage:

.val(): Find the value of the selected element.
.val('value'): Set the value attribute to the given value.

Events

jQuery has a number of event handlers that can be run when the user interacts with the browser in a particular way. Here are some of the most common:

Event Definition from jQuery Docs:

The click event handler runs when the user clicks the selected element.

Event Definition from jQuery Docs:

The hover event handler runs when the user hovers the cursor over the selected element.

Event Definition from jQuery Docs:

The keydown event handler runs when the user hovers the cursor over the selected element.

Event Definition from jQuery Docs:

The keyup event handler runs when the user lets go of a key on the keyboard.

Event Definition from jQuery Docs:

The load event handler runs when the selected element has completely loaded.

Sending Data to PHP

For a web app you will need to send data to a PHP file. The most likely methods you will use to do this are GET and POST. GET is preferrable if the query does not change anything. For example, when you search the results on the YMS Cross Country results page you can see the variables set in the address bar. The results of this query can then be indexed or bookmarked. POST is meant for actions that make a permanent change such as updating or deleting something from the database.

The following code will send data to a PHP file. You can replace "get" with "post" to use the POST method:

var jsType = $('#type').val();
$.get('pokemon.php',{type: jsType},function(data){
    $('#results').html(data);
});

The variable "jsType" is a Javascript variable that was obtained from an HTML element with the ID "type." This element was an input tag that accepted text from the visitor. The jsType variable is sent via GET as "type," which means it is accessible in the "pokemon.php" script via $_GET['type']. The results from the PHP script are stored in the "data" variable, which is output in the HTML element with the ID "results."