Learn jQuery in 14 days (Archived)

jQuery is the most popular JavaScript library today that helps Web Designers and Front-End Developers make sleek user interfaces and web features on the internet. 70%+ Top websites use jQuery on them. Website such as Microsoft.com, Amazon.com, Yahoo.com etc.

In this lesson, we are going to learn what is jQuery. So let's get started

What is jQuery?

jQuery is a JavaScript library that is tremendously helpful to use when doing website design. You may ask what is a JavaScript library? A JavaScript library is a collection of several pre-coded features that a web designer would commonly use.

For example:
A web designer would commonly want to select an element from an HTML page and add classes to it or add styles to it, yes you can do that same behavior with pure JavaScript but a web designer or a web developer would have to write three or four lines of code to accomplish that task like adding a class to an element. But by using jQuery you can do the same task by writing one line of code. 

It's not about writing less code but jQuery's APIs is another word for features or functions that jQuery interface has. You are not just going to write less code but your code is going to be more elegant, more user-friendly and more structured. This is the reason why jQuery is so popular and widely accepted. 

If you head over to jQuery website you will see their tagline is "Write less, do more".

If you were to write pure JavaScript to accomplish a simple task, you might have to handle the H cases because different browsers react differently and have different versions of JavaScript running on themselves. So you might have to write additional lines of code to make sure that your piece of code or your particular functionality is similarly compatible with Internet Explorer 6, 7, 8, Firefox, Safari, Opera and Chrome etc. 

But if you use jQuery, these people who have contributed to the jQuery library, have already coded those scenarios in the background that if there are other compatibility issues, there are patches available so you just simply write one line of code that you know will work across multiple browsers no matter what browser it is.

jQuery popularity:

If you to the website called BuiltWith you can find out what websites are built with jQuery. If I type jQuery and hit enter and go to jQuery usage statistics 

If I go to Microsoft.com and right click view page source, you will find that they're also using jQuery, same in the case of Amazon.com they're also using jQuery. In the image below you see the photo slider? This slider feature may be built via jQuery. jQuery is used to accomplish these kinds of user-friendly tasks. 


Another example could be if you hover over the departments section on Amazon, you notice the rest of the screen becomes black or dark grey. This feature is also accomplished by jQuery.

Let's look into some other examples as well. If you go to this website it puts the top bar on the top of the page. This feature is not very difficult to create purely via jQuery.

jQuery Accordion

You see below the jQuery accordion, If you click on handle 1 it shows up if you click on handle 2 the first handle disappears and loads the handle 2 and so for the for the rest. We can also build that feature easily via jQuery

You can also accomplish animation via jQuery. Let's look at another example. In the image below if you go to twitter > sign up page and type some random stuff in the email address tab, it immediately checks and tells "doesn't look like a valid email" this particular behavior of popping up the new message based on the particular input can be accomplished via jQuery.

Another thing you notice based on the information that we provided it gives us some suggestion of the username, this is also can be done with jQuery. The website communities with the server side and figures out in their database like that particular user does not exist so they give a suggestion. These features are easily accomplished by jQuery. 

Once you understand the fundamentals of jQuery, you can go out and create anything that you want for your website. The beauty about iLoveCoding is that you don't just learn the fundamentals of jQuery but also we are going to do mini projects in which you are going to see how jQuery library can be used in practice and you can create cool practical features for your website.

I hope you enjoyed this intro video, If you have any question please leave your comments below, I'll talk to you in the next lesson. Goodbye :)