Learning to Code #4 | jQuery Libraries

learning to code jquery libraries

The latest language I have come across in my coding journey is jQuery. It is actually less of a language and more of a tool/library for learning and implementing javascript. It has its own syntax though, so can be treated in a similar way to learning a new coding language.

What is jQuery?

It is the most widely used javascript library in the world. It allows for an easier way to learn javascript as well as much faster implementation.

Their slogan is even ‘Write less, do more’ which is pretty appropriate considering you average about one line of jQuery for every six lines of javascript.

It is designed to be compatible across browsers and allows for DOM (document object model) traversal and event handling. As far as I understand it, this is where you can pick out elements in a HTML document and either make changes to them or create a response based on an action – such as a button click.

It is also designed to be able to easily implement Ajax into your web page which allows the sending and receiving of data from the server in the background. This is great as it means you don’t have to physically reload everything on your web page, if all that you want to change is a small portion of your site.

How does jQuery compare to javascript?

Similar to javascript, you use CSS type selectors to find HTML elements within your web page.

You then do something with these elements using the javascript/jquery methods. For example executing an event when you click on a button.

Selecting the elements is much simpler in jquery than in plain javascript though, it also requires less code.

Below is an example of changing some text from the classic “Hello World” to “Hello Lucy” when you click on an HTML button within a web page.

HTML:

<p id="text"> Hello World! </p>

<button id=”myButton”>Click to change text</button>

In Javascript:

<script type="text/javascript">

  document.getElementById(‘myButton’).onclick = function() {

     document.getElementById("text").innerHTML = "Hello Lucy!";

  }

</script>

 

and in jQuery:

<script type="text/javascript">

     $(‘#myButton’).click(function() {

        $("p").html("Hello Lucy!");
     });
</script>

As you can see, the jQuery version is a lot simpler and due to the small size of the jQuery library, it will be executed very quickly too.

The main difference is in the amount of code you need to write compared to javascript. As I mentioned previously you average much fewer lines per code block.

A short hand that is less long winded than writing out full javascript making it faster and more efficient. It is also a great supplement when you are learning Javascript for the first time. Due to the amount of ‘shortcuts,’ it can actually make it easier to learn some of the more complex functions.

Why should you use jQuery?

As you can see jQuery is a much shorter way to access HTML elements in your page which across large websites with multiple pages and scripts can cut down on a lot of unnecessary code. This makes it easier to read, quicker to write and a lot neater too – great if you are collaborating with others. jQuery has been around for a while (compared to other libraries) and is well supported by most browsers as well as being compatible with CSS3 selectors. It also loads nice and quickly, as more often than not you will only need to use a minimized version of the file, which is great for website performance.

There are also a lot of open source plugins available to further widen the range of things you can achieve with jQuery libraries.

I am personally yet to use an enormous amount of jQuery for my own websites. I understand the basics but have not yet found a project that I want/need to use it in. I find it a lot easier to remember the syntax than javascript, though a reasonable understanding of javascript is required in order to use it effectively. As I mentioned earlier though, jQuery can really help to wrap your head around some of the more complex functions. Especially as they have the jquery UI which has everything from draggable and droppable elements to a selection of widgets you can choose from.

learning to code jquery libraries pinterest

Is jQuery dead?

I have seen this question bouncing around the internet lately and thought I would address it here. Now, as I mention I am by no means an expert, but from my experience with learning jQuery, as well as reading my fair share of job adverts, I would have to say no. As with anything tech based there are always new and innovative ways to do things that are being created. The thing is, due to its great browser support and many of the other things mentioned above, it is still used on around 90% of websites. I would say it’s absolutely still worth learning as it isn’t too hard to grasp the basics and is incredibly useful to have. However, if you have a particular interest in Javascript and different libraries, toolkits or frameworks, then you should definitely look into things like Angular(link), React(link) or Dojo(link). I have been hearing a lot more about these lately and it definitely can’t hurt to know more.

I myself am not quite there yet as I still have many of the basics to learn, but all in good time!

Useful resources if you wish to learn or use jQuery

I have put together some resources I have found useful whilst learning jQuery, as well as some more information at the end about other Javascript libraries and frameworks to look into.

Jquery and Jquery UI websites.

These websites are connected and have an absolute wealth of information. If you are really interested there is enough content on there to last you a good few hours. There are also lots of opportunities to try out the code for yourself, without having to know much or have built something beforehand.

Code Academy – Learn jQuery

A really great way to get a basic overview and introduction. I found this to be one of the best ways to get hands on and start coding straight away. I believe they are actually removing this course soon and replacing it with something new, so keep your eyes peeled for that.

Up and Running with jQuery by Imtiaz Ahmed

A great Udemy course that is not only free but also covers the basics along with explanations as to why you may find it useful.

JavaScript & Jquery, Jon Duckett

I mentioned this in my Learning to Code Javascript post, but it is just as relevant for jQuery. There is an entire section on jQuery itself, as well as a good explanation of Ajax and how you can use it to your advantage when building websites.

Finally, these are a few books I have my eye on to supplement my learning and for additional information on other ways of utilising Javascript.

Let me know if you have used or are learning jQuery and if you have any other javascript based recommendations!

 

*some affiliate links used 

3 Comments

  1. I’ve been eyeing Jon Duckets books for over a year. They’re so aesthetically pleasing. I’ve been weary about buying them only because they technology is quickly changing. Is the information still relevant in his series for the most part?

    Also , if you’re interested in learning more about JQuery http://www.codepen.io has hundreds of pens that you can play with. If you haven’t already created an account I highly recommend setting one up.

    1. Thats what I like about them! They’re far easier to read and navigate than a lot of the coding books I have seen. In terms of the relevance I think they will still be good for a couple of years yet. Especially considering the main thing I enjoyed was the explanation of basic principles and the mindset needed to wrap your head around code. Particularly the javascript one when you’re thinking about events and DOMs. It can be very overwhelming but it explains it all very well. Which remains relevant even if the ways in which you do it changes.
      I hope this helps!
      Also, thank you for the recommendation. I have heard of codepen but haven’t set it up yet! 😀 x

    2. Thats what I like about them! They’re far easier to read and navigate than a lot of the coding books I have seen. In terms of the relevance I think they will still be good for a couple of years yet. Especially considering the main thing I enjoyed was the explanation of basic principles and the mindset needed to wrap your head around code. Particularly the javascript one when you’re thinking about events and DOMs. It can be very overwhelming but it explains it all very well. Which remains relevant even if the ways in which you do it changes.
      I hope this helps!
      Also, thank you for the recommendation. I have heard of codepen but haven’t set it up yet! 😀 x

Leave a Reply

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