Quick reflection and my first experience with jQuery
I have to admit that asynchronous processes still scare me, but I firmly believe it is all about getting used to the beauties and complexities of the language.
One of the things that has caught my attention the most has been jQuery and its power.
jQuery’s core idea is to make web development more agile by speeding up several processes like HTML document traversing, among others.
You can find more information about this library on their website: http://jquery.com/
In my opinion, these are the main reasons to use it:
Reuse of CSS Selectors
To execute a task, you will choose elements based on the same selectors as CSS. For example, you use ‘.’ for classes and ‘#’ for ids. Some quick examples below:
These two selectors are probably the ones you will use the most, but feel free to explore this jQuery Selector Tester and play around with it a bit to get more familiar with them and explore all the options you have at hand.
Short Learning Curve
Most likely, in a matter of 2–3 hours you will be confident using jQuery and will start benefiting from it.
This is one of the most powerful features I have come across using jQuery. It is as simple as it looks to execute different tasks one after another by simply calling jQuery methods on your selectors one after another, as shown below:
If you want to get a solid grasp of it, you can find more detailed information on the jQuery Learning Center.
How to import jQuery
There are several ways of importing the library to use it in your project:
- Installing it locally
You can download jQuery locally into your machine and load it in your HTML file. However, I strongly recommend the second option.
2. Using a CDN
I recommend this option. CDN stands for content delivery network, which is a system of servers that delivers Web content to a user and, most importantly, it does it based on his geographic location, among other factors.
The main advantage is that if we create a project that another user from far away wants to use, he will be able to load it faster by using a CDN compared to having to load it from our local machine.
3. Using a Package Manager
A last option worth mentioning would be to use a package manager such as Bower or npm.
$ npm install jquery
$ bower install jquery
For more information about downloading jQuery (or if you want to find out more about the CDN option), visit this link.
Useful jQuery plugins
It is really easy to increase website function by using plugins designed specifically for jQuery. The following are some of my favourite ones:
This plugin gives you a lot of freedom when it comes to customising your tabs. It is supported by most browsers (yes, even IE7+) and is really fast. It is also easy to pick up. You can find more information here.
Not only developers will love this one, but also designers. Thanks to this plugin, you can create advanced and high-quality image galleries. Check out some examples.
This one is a must on my list. With Chosen, you allow the user to filter a dropdown list based on his input. Really useful when you come across a dropdown with pretty much every country in the world, right? What are you waiting for to explore more about this awesome plugin?
And there are so many more awesome plugins out there. With a quick Google search you will get everything you need for your website.
An example using jQuery
To illustrate the power of jQuery, I created a quick example of a counting game to teach children the numbers from 1 to 10.
Out of curiosity, the background was much darker than what you see on the image above. A cool trick to lighten it and make the text stand out is to use one of these two CSS properties: background-blend-mode or opacity.
How is this achieved? You may think we need to create a bunch of tags that look pretty similar as they contain similar data, but the reality is quite different…
As you can see, the numbers div is completely empty! This is everything I need in my HTML document, everything else is handled by jQuery, which is in charge of populating the doc based on the user’s behaviour. One frame with a new number is generated after each click on Next Number.
This code can be summarised in two parts:
- Each time the button is clicked, append a new row into numbers, then add 1 to the index value
- If the index value reaches 10, hide the button, so we can not (and should not) generate number 11 as per the purpose of the game
I hope you enjoyed this brief introduction to jQuery and that you feel encouraged to try it yourself and, hopefully, you will get to enjoy it as much as I do!
Keep posted for next week… Ruby on Rails is coming!
Do not forget to follow me not to miss future posts and, as usual, claps are highly appreciated!