Web Culture

jQuery Tutorial – Getting Started: Basics & Selectors

James Bruce 24-02-2013

Last week, I talked about how important jQuery is Making The Web Interactive: An Introduction To jQuery jQuery is a client-side scripting library that nearly every modern website uses - it makes websites interactive. It's not the only Javascript library, but it is the most developed, most supported, and most widely used.... Read More to any modern web developer and why it’s awesome. This week, I think it’s time we got our hands dirty with some code and learnt how to actually make use of jQuery in our projects.


I’ll say this now – you don’t need to learn Javascript in order to use jQuery. It’s probably best if you think of jQuery as an evolution of Javascript – a better way to do it – than simply a library that adds functionality. Any Javascript you need will be picked up on the way. It is assumed however that as a web developer you have a pretty good knowledge of HTML and CSS (and here’s out helpful free xHTML guide if not! Learn to Speak "Internet": Your Guide to xHTML Welcome to the world of XHTML – Extensible Hypertext Markup Language – a markup language that allows anyone to construct web pages with many different functions. It's the primary language of the Internet. Read More ).

Document Object Model

jQuery is all about traversal and manipulation of the DOM – the Document Object Model. The DOM is a hierarchical tree representation of the page, built by browsers after reading in all the HTML code. In jQuery, we’ll use terminology like parent, children, and siblings quite often, so you should have an idea of what this means in relation the DOM.

This simple diagram from w3schools explains the concepts fairly well. You should be able to see that the parent of the <body> element is <html>, whilst the <a> element has an immediate <h1> sibling.

jquery basics

Getting Started: Adding jQuery

The latest version of jQuery is about 91KB when compressed, so it adds about the same page weight as a small photograph or screenshot. The easiest way to include jQuery in your project is to paste a reference to the most recent hosted version into your site header section:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Note however that if you’re running WordPress, this may cause problems because it already has its own copy of the jQuery library. Plugins can request that this be loaded, and WordPress will intelligently only load jQuery once regardless of how many plugins have asked for it.

If you add the following line to your functions.php theme file, you’ll add another request for it to be included. WordPress will then know to always load it if your theme is active.


The second thing to bear in mind is that when jQuery is added using the standard method, it will be loaded as $. Anything you do with jQuery will be preceded by this $, such as:




However, when jQuery is loaded through WordPress, everything is done using the jQuery variable instead of $, so for example:


Although this isn’t a huge problem when writing your own code, it does mean that cutting and pasting snippets of jQuery you find on the web will need to be translated to use jQuery instead of $ – that’s all.

One way around this is to wrap $-style code you find like so:

(function($) {
// paste $ code in here

This takes the jQuery variable and passes it into an anonymous function as $. I’ll explain anonymous functions next time – for now, let’s learn the basic structure of a bit of jQuery code.


To add your code to an HTML or PHP page, enclose everything within <script> tags, like so:

<script type="text/javascript">
 // jQuery code codes here


That’s it, in the title up there. That’s the basic structure of a single piece of jQuery code to manipulate the DOM. Easy, right?

The selector tells jQuery to find things which match this rule, and is the same as CSS selectors (and then some more on top). So, just as in CSS you would style all links with

a { }

The same would be done in jQuery as


This can be done for any HTML elements – div, h1, span – whatever. You can also use CSS classes and IDs to be more specific.

For example, to find all links with the class “findme”, you would use:


You needn’t specify the type of element each time – but if you do, it simply makes the rule more specific. You could have just said


which would match everything with the class findme, whether or not it was a link.

To use a named ID element, use the # sign instead. The key difference here is that an ID selector will only ever select one object, whilst a class selector may find more than one.


Basically if you can do in CSS then jQuery will do it too. In fact, you can also some fairly complex CSS3 style pseudo selectors like :first

$('body p:first')

Which would grab the paragraph of the page. You find elements with certain attributes too. Consider this example; we want to find all links on the page which point internally to makeuseof and highlight them in some way. Here’s how we could find them:


Isn’t that cool? Well, I think it is.

Your next port of call should be the jQuery API documentation for selectors. It’s a huge list of all the different kinds of selectors available to use, and no one would expect you learn them all.

jquery basics

The next part of the equation is method – what to do with those things once you’ve found them all – but we’ll leave that for next lesson. If you want to get started with trying out various selectors now though, I suggest you stick to the following css method. This takes two parameters – a CSS property name, and a new value to assign to that property. So, to give all links a red background color, you would do:


Simple enough! Whilst this might not be of any practical use, it will let you easily see any elements located using your selectors. Now go forth, and select – the DOM awaits you.

I hope this tutorial has been useful to you; I’ve tried to make it as simple as easy to understand as possible. Feel free to ask any questions you have or leave feedback, but be aware that I’m certainly no elite jQuery ninja.

Related topics: JavaScript, jQuery, Programming, Web Development.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Anthony Baptiste
    February 25, 2013 at 5:34 pm

    Yes great tutorial, I'm looking forward to part 2 as well

  2. Anthony Baptiste
    February 25, 2013 at 5:34 pm

    Yes great tutorial, I'm looking forward to part 2 as well

  3. Nevzat Akkaya
    February 25, 2013 at 6:43 am

    Great article on Jquery. I'll add it to my Jquery bookmarks and surely read and share it. Thanks.

  4. Rigoberto Garcia
    February 25, 2013 at 2:19 am

    Excellent Post James. Sharing it with my colleagues. Thanks

  5. Francisco de Gusmão
    February 24, 2013 at 9:29 pm

    Really great! Start doing more tutorials, not just jQuery, but a lot of things of the technology world

  6. Karl Gephart
    February 24, 2013 at 8:58 pm

    Great post on jQuery for those familiar with targeting in CSS! Been using it for a while now on WordPress and have no problem executing it on the page I'm on or going to a theme's main .js file and executing it from there. Do you know if there's a way to put your jQuery on a WordPress page and have it refer to another page on your site? Not that it's essential, but I haven't been able to research a way to make the same selectors work (vs my code added to the main .js file)? I would think there should be no difference.

    • Muo TechGuy
      February 25, 2013 at 11:00 am

      Hi Karl. I'm not entirely certain of what you're asking... but jQuery is a client side language, so it needs to be on the page you want it to execute. You could place it in your header.php , and if you wanted it to only be included on certain WordPress pages, surround it with some conditionals like "if(is_single()):". Does that help?

  7. adrian
    February 24, 2013 at 8:27 pm

    Nice...looking forward to your next installment.