Getting your feet wet with jQuery

webmaster Updates

Well, here we are. This is my last blog post as AUS Webmaster. So, what better way to finish off with my take on a jQuery tutorial?

jQuery is a JavaScript library that makes it really easy to manipulate stuff on a web page, like paragraphs and images. You could use CSS, but that’s mostly static, save for some transition effects in CSS3. jQuery replaces a lot of JavaScript code with one-liners, which means if you are mostly manipulating stuff on a web page, you can learn jQuery without worrying about the underlying JavaScript code.

I can’t stress enough: jQuery is very easy to learn. It’s one of the very few languages that can be explained in one blog post.

Getting Started

You could go to jQuery’s website, download the file, then figure out how to get in working with your website. Or, you could just copy and paste this line between <head> and </head>:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>

jQuery is a JavaScript library, which means it has to be written between <script type=”text/javascript”> and </script>, preferably in the head, but it’s OK to put it in the body too.

Next, you want to execute your code when the document loads. You can put it in other JavaScript functions, but most of the code that you’ll write should be executed the page loads. Here’s how it looks overall:

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<script type=”text/javascript”>
$( document ).ready(function() {
   //Your code goes here
});
</script>
</head>

Mixing with PHP

If you know PHP, you can execute certain jQuery and JavaScript code conditionally, like so:

<script type=”text/javascript”>
$( document ).ready(function() {
<?php if ($a == $b) echo ‘//jQuery or JavaScript code goes here’; ?>
</script>

The rule

Each jQuery command starts with a dollar sign. Then, just follow this format:

$(the element(s) you want to manipulate).action(properties);

For example, $(“.sidebar”).css(“background-color: #ABCDEF”) means change the CSS of the element with a sidebar class to include “background-color: #ABCDEF”.

That’s all there is to it.

With this, you can change the CSS, change the HTML attributes like where a link goes to, and even animations. Just use Google, or read the documentation on jQuery’s website.

Events

Some jQuery commands specify what happens during an event, like when a button gets clicked on. For example:

$(“#button”).click(function() {
   $(“#button”).hide();
});

means hide the element with a button ID when it is clicked on. It’s quite simple as long as you remember to put the }); at the end.

Don’t forget about JavaScript!

It is advisable that you learn some JavaScript too. Here are some of my favorite functions:

  • alert(“Hello world”) will pop a dialog box with the text “Hello World”. But, don’t actually use this unless you are testing code and are too lazy to open the console. Pop up boxes are not very user-friendly, and users generally prefer other forms of notifications, like in-line messages or toasts.
  • console.log(“Hello world”) is what you should be using to test if your code works. “Hello world” will appear in your console in the Developer Tools of your browser.
  • The date() function is quite handy. Google it for more information.

Note that they don’t have a dollar sign preceding the function (so they aren’t anything jQuery), but that’s the beauty: you can mix and match JavaScript and jQuery.

Anyway, I hope you’ve enjoyed visiting the AUS website as much as I have enjoyed designing and coding it. Have a wonderful summer!


About the Author

webmaster