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.

Cancel

8 comments

  1. Foster Korsmeyer Replied

    Oh my goodness! an incredible article dude. Many thanks However I am experiencing concern with ur rss . Have no idea why Struggling to sign up to it. Will there be anyone getting indistinguishable rss problem? Anyone who has learned kindly answer. Thnkx

  2. Sallie Myart Replied

    You made some reasonable items there. I seemed on the internet for the problem and found most individuals will go with with your website.

  3. Carlton Cantero Replied

    I’m very happy to read this. This is the type of manual that needs to be given and not the random misinformation that is at the other blogs. Appreciate your sharing this greatest doc.

  4. Lucius Schattschneid Replied

    My brother suggested I would possibly like this website. He used to be totally right. This post truly made my day. You can not believe simply how a lot time I had spent for this info! Thank you!

  5. Wilbur Jepperson Replied

    “I do believe all of the concepts you’ve offered to your post. They are really convincing and will definitely work. Still, the posts are very brief for newbies. Could you please extend them a little from next time? Thank you for the post.”

  6. furtdsolinopv Replied

    Great blog here! Also your website loads up very fast! What host are you using? Can I get your affiliate link to your host? I wish my web site loaded up as quickly as yours lol

  7. furtdsolinopv Replied

    Thank you for another fantastic article. Where else could anybody get that type of info in such a perfect way of writing? I have a presentation next week, and I’m on the look for such info.

  8. 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.