jQuery

12th October, 2014

What is it?

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.

Let's try out both!

Go to jquery.com/download
Production version - this is for your live website because it has been minified and compressed
Development version - this is for testing and development (uncompressed and readable code)
Download the Development version
Place the downloaded file in the current working directory or in the "js" directory
Ready to go!

<head>
<script src="jquery-1.11.1.min.js"></script>
</head>

If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).
Both Google and Microsoft host jQuery.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

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()

$(document).ready(function(){

   // jQuery methods go here...

});

Text

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

//mouseEnter methods
$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

//