Take me back!! I want my CSS!! Click me to get back :)

×

Are you missing out on your dream job?

Enrollment for Skillcrush Blueprints JUST OPENED. Register today!

Click Here

jQuery

jQuery is a library of preset JavaScript tasks that makes it easy and fast to make your site interactive and fun.

jQuery is a library of preset JavaScript tasks that makes it easy and fast to make your site interactive and fun.

JavaScript is a web programming language that allows you to make your website interactive. Do you want to put a photo slideshow on your website? How about a pop-up that invites users to sign up for your newsletter? What about putting an ad on your blog? Yep, you are gonna have to use JavaScript to do any of those things.

JavaScript, however, can be a little verbose. Let’s say that when a user—we will call her Liz Lemon—signs up for your newsletter, you want to say “Thanks for signing up, Liz Lemon!”

Using JavaScript you would need to write:

window.onload = initAll;
function initAll() {
document.getElementById("submit").onclick = submitMessage;
}
function submitMessage() {
var greeting = document.getElementById("name").getAttribute("value");
document.getElementById("headline").innerHTML = "Thanks for signing up, " + greeting;
return false;
}

Not terrible, but since you are a lazy programmer, you will vastly prefer to write this script using jQuery:

$("#submit").click(function () {
var greeting = $("#name").val();
$("#headline").html("Thanks for signing up, " + greeting);
return false;
});

Notice that $ sign? It’s the surefire sign that someone is using jQuery.

In order to use jQuery you will have to link to jQuery. That way, when your script calls a jQuery command like click, your browser will know what you are saying. You can either downlaod jQuery and host it on your own website, or you can take advantage of Google’s awesome server power and link to jQuery from there:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>

Just copy and paste that link tag and stick it in your HTML doc (either in between the <head></head> tags or in the footer) and you will be jQuery ready-to-go.

So what all can jQuery do? Well let’s see, you can do some awesome fade outs, or make a super slick date picker, or what about making yourself a mobile app?

Now Try This
  1. Go to JSFiddle
  2. Select jQuery 1.7.2 from the drop down menu
  3. Try out some jQuery commands!

Your email address will not be published.

One сomment

  1. bbdoodles Replied

    Didn’t know about jQuery mobile! Thanks for the info

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.