jQuery Hands-on

Intro to jQuery and External JavaScript Files

The Write Less, Do More, JavaScript Library

jQuery: A brief introduction

jQuery is a cross-browser JavaScript library designed to simplify client-side scripting, manipulating HTML pages, animating and handling events.

jQuery is still JavaScript. It is a library of functions built on top of JavaScript to simplify your program. It does, however, have it's own syntax as well.

The library contains many, many built-in functions and methods. It's not an easy task to remember them all. Never fear, jQuery has documented their API here: http://api.jquery.com.

Let dive in and see how jQuery methods compare to using just JavaScript alone.

jQuery vs JavaScript

Including inline JavaScript into your web page only requires the code to be written between the <script></script> tags.

In jQuery, the document needs to be "ready". This bit of code needs to wrap all of your jQuery: $(document).ready(function(){});. Your code goes between the curly braces {}, and will only run once the DOM is ready.

<script type="text/javascript">
  // JavaScript code here
</script>

<script type="text/javascript">    
  $(document).ready(function(){
     //jQuery code here
  });
</script>

More on $(document).ready

Remember document.write()? The functionality is similar. document is the object, write() is the method we use to pass in parameters. (see slide)

In jQuery syntax, the $ is simply a shorcut for a function called jQuery. It is how you access all of the functionality in the library. To select the document jQuery style, it looks like this:

$(document)

.ready() specifies a function to execute when the DOM is loaded.

$(document).ready();

An "anonymous function" needs to be passed into the above code to execute the jQuery code.

//syntax for anonymous function
function(){
   code goes here
}

// pass the anonymous function in the ready() method    
$(document).ready(function(){
   jQuery code here
});

jQuery vs JavaScript (cont)

Remember document.getElementById?
jQuery makes it easier to reference objects in the DOM.

<div id="status">
  <p>Loading...</p>
  <p><img src="assets/loading.gif"></p>
</div>

// JavaScript
document.getElementById("status")

// jQuery 
$("#status")

Your HTML tag must have an id attribute in order to do this!
Use #name to reference and ID and .name to reference a class

jQuery vs JavaScript (cont)

Let's see how the JavaScript innerHTML example can be done with jQuery to replace what's already in an element.

<div id="javascript">Replace this text with JavaScript</div>
<div id="jquery">Replace this text with jQuery</div>

<script>
  // The JavaScript way
  var statusDiv = document.getElementById("javascript");
  //statusDiv.innerHTML = "NEW TEXT! Done with JavaScript."

  // The jQuery way
  $(document).ready(function(){
    var statusDiv = $("#jquery");
    // NOTE: when using a variable as the selector,
    // it does not have to be contained in quotes
    //$(statusDiv).html("NEW TEXT! Done with jQuery.");
  });
</script>

<style>
div {
  border: 1px solid #666;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin: 20px auto;
  padding: 10px;
  width: 200px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
}
</style>

jQuery vs JavaScript (cont)

You can also use "dot notation" to write the statement in one line instead of declaring a variable.

<div id="javascript">Replace this text with JavaScript</div>
<div id="jquery">Replace this text with jQuery</div>

<script>
  // The JavaScript way
  document.getElementById("javascript").innerHTML = "NEW TEXT! Done with JavaScript."

  // The jQuery way
  $(document).ready(function(){
    $("#jquery").html("NEW TEXT! Done with jQuery.");
  });
</script>

<style>
div {
  border: 1px solid #666;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin: 20px auto;
  padding: 10px;
  width: 200px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
}
</style>

External JavaScript

Keeping it organized, working with others
and adding libraries

<script src="">

As you write bigger pieces of JavaScript, you will want to start putting your code into their own files so they are easier to manage. Or you might want to enlist the help of others to write JavaScript for your website so you can work on different sections separately. A big site could have thousands of lines of code written by many different people!

To link to an external JavaScript file:

<html>
  <head>
    <title>JavaScript example!</title>
    <script type="text/javascript" src="scripts.js"></script>  
  </head>
  <body>
    <div id="example">This is an example.</div>    
  </body>
</html>

In the external file

In the external JavaScript file (scripts.js) you don't include script tags; just JavaScript code.

View this example: http://gavinuhma.github.io/LLC-JavaScript/exercises/external-javascript.html

script tag gotchas

Even though you're not writing JavaScript between the script tags, you must use a closing </script> tag. A self-closing tag such as <script src="scripts.js" /> will not work. The correct way is highlighted below:

<script type="text/javascript" src="scripts.js"></script>

jQuery: Getting started

To make use of the jQuery library, it needs to be included on your web page using an external file. There are two ways to include the file.

1. Download the jQuery library and include it with the rest of your files.

<script type="text/javascript" src="jquery.js"></script>

2. Link directly to the CDN (Content Delivery Network) hosted copies.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Download instructions: http://docs.jquery.com/Downloading_jQuery

Gotchas!

When adding your own custom-written jQuery/JavaScript files, make sure to include it after the jQuery file to ensure that the library loads first.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="custom.js"></script>

jQuery Selectors: Syntax Review

Selectors are always surrounded by single or double quotes, except when referencing a variable.

  <div class="name">Class selector<div>
  <div id="name">ID selector<div>

  $(".name") - referencing a class
  $("#name") - referencing an ID
  $("div") - referencing an HTML element

  var selector = $("name");
  $(selector) - referencing a variable

jQuery Events

Just like Javascript functions, we can execute the code on an event. A very common event is the click event.

$(selector).click(function(){ 
  //code to execute
});

click() triggers a click event, the selector is the element to be clicked and function goes between the parenthesis to run a function, containing one more commands.

<a href="#">click me!</a>
<p>click me again!</p>

<script>
  $(document).ready(function(){

    // replace 'selector' with the element to add the click event to
    $(selector).click(function(){
      alert("clicked!");
    });

  });
</script>

jQuery AND JavaScript

jQuery may have its own syntax and methods but it's still JavaScript at
its core. Let's look at a previous example and see how jQuery and JavaScript work together.

In the exercises folder, open jquery-javascript.html and jquery-javascript.js.

While it works using pure JavaScript, the functions are currently being called "inline" by adding an onclick directly in the element. It's best practice to avoid inline event handlers.

Let's use the jQuery click() method instead and use it to select the element and pass the related function.

jQuery Effects

There are many handy built in methods that make it simpler to add effects. The full list is available here. It's searchable and provides explanations and examples.

Here's an example of how to use the .hide() and .show() methods.

<a class="hide" href="#">Hide</a> | <a class="show" href="#">Show</a> 
<div id="box">
  <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
</div>

<script>
$(document).ready(function(){
  // Click event on the anchor link with a class of 'hide'
  $('.hide').click(function(){
    // code to be executed - hide the "box" div
    $('#box').hide();
  });

  $('.show').click(function(){
     $('#box').show();
  });
});
</script>
<style>
  #box {
    background-color: #B1009A;
    padding: 20px;
    margin-top: 10px;
    font: 18px verdana, arial, sans-serif;
  }
  a {
    font: 14px verdana, arial, sans-serif;
    text-decoration: none;
  }	
</style>

Mini-exercise (20 mins)
jQuery Effects

Let's practice adding some more jQuery effects and using external javascript files.

In the exercises folder, open the jquery-effects.html into your text editor. HTML and CSS is already provided.
Include the jQuery library using one of the CDN hosted links listed here.
Create your own external file called 'jquery-effects.js' to write your own jQuery and included it in the HTML page.
Reference the previous example and add click events using the classes supplied in the <a> links, to add the following effects:
- show()
- hide()
- slideDown()
- slideToggle()
- fadeOut()
- fadeIn()

jQuery effects documentation: http://docs.jquery.com/Effects
jQuery click event documentation: http://api.jquery.com/click/
Solutions posted in the solutions folder.

jQuery Hands-on

jQuery: A brief introduction

jQuery vs JavaScript

More on $(document).ready

jQuery vs JavaScript (cont)

jQuery vs JavaScript (cont)

jQuery vs JavaScript (cont)

External JavaScript

<script src="">

In the external file

script tag gotchas

jQuery: Getting started

Gotchas!

jQuery Selectors: Syntax Review

jQuery Events

jQuery AND JavaScript

jQuery Effects

Mini-exercise (20 mins)jQuery Effects

Mini-exercise (20 mins)
jQuery Effects