Introduction to jQuery

Hello guys,

You are welcome to our series jQuery

Before moving further with jQuery,it is important for us to understand 2 points

First, why is jQuery important and made available for us and what we can do with jQuery.

So basically, when we talk about web development, in that case, we have two options:

We learn HTML, CSS and JavaScript and we can create static websites on their basis but when we want to understand jQuery it is important for us to have prior knowledge of HTML, CSS and JavaScript.

This is called a prerequisite that, to understand jQuery we must have a proper knowledge of these three.

If you do not know any one among these three, you will not be able to understand the use of it through jQuery that's why if you have started this course of jQuery from learnvern, I request everyone to first complete the course of HTML, CSS and JavaScript from learnvern and only then come to the jQuery course so that you can completely understand this course.

So these were the prerequisites for doing the jQuery course.

Now, what is jQuery?

jQuery is basically a library given for JavaScript, when we work through javascript we know that we have to write a code in javascript and through that code, the code or task will execute in the browser.

But if you have completed the javascript course of learnvern you must have seen in most of the places to perform the task we need to take reference of the element from HTML and after that we perform the manipulation or operation on it.

To do this task we have to write a minimum of four to five lines.

The task we complete with the help of 4 to 5 Lines in JavaScript we can perform the same task in 1 to 2 lines in jQuery.

This means jQuery is not a replacement of JavaScript, but jQuery was evolved to hold javascript properly, work with it successfully and decrease the line of code.

So if you want to know why we use jQuery,

We are not using jQuery as a replacement for JavaScript, so you can note this thing down.

Second is that we use jQuery to handle javascript properly.

This means that with the use of jQuery we can perform the manipulation in less lines of code.

So that was the prerequisite and why we use jQuery.

Now, let us see what jQuery is in JavaScript.

So jQuery is basically a fast, small, cross platform and feature rich JavaScript library,

How??

Like I said, the task which is done in JavaScript through a lengthy code we can do the same task with the help of jQuery in a short code.

So, definitely if something is happening with a short code the application will run faster, this means with the help of jQuery we can perform fast code execution.

We have to write a small code, and cross platform means all the web browsers successfully support this.

In the second point it is mentioned that “jQuery is cross platform” that means google chrome, safari, edge and all other browsers support jQuery.

So if you have created an application or a website with the help of jQuery it will successfully run in every browser, no browser will be found that doesn't support it.

Here, in the third point it is written "write less do more"

Because, as I said earlier we have to write a short code in jQuery and we can perform a bigger task in 1 or 2 lines, that is why the code becomes less and we have to write less and we can perform bigger tasks easily.

We perform manipulations like ajax and dom, What is ajax? that We will learn during the course.

As of now we can say, we can easily handle when we interact on the server site and get the requests or responses from the server.

This means we need a programming language which can successfully handle the response coming from the servers site,

So, how this handling is performed, jQuery helps us to successfully handle the ajax calls meaning the calls or responses we receive from the server site.

Then second is dom manipulation,

We have learned about Dom in JavaScript, but how to manipulate Dom, means once a document has been generated all the elements are placed on their places in html, now this has to be manipulated.

Means the things are placed once, now we have to play around like change its place, change its data, html part,  text or do any manipulation through CSS etc, all these things can be done through jQuery.

Now, here is a small history line about jQuery:

“jQuery was first released in January 2006”, this means it was released in January 2006, by whom?

By John Resig in Barcamp New York.

Now, it is currently headed by Timmy wilson and maintained by a team of developers.

This means once John Resig invented it and after that Timmy wilson and a team of developers are handling it.

If you want to see about jQuery, we also have a slide for it

If you go to chrome.., and search jQuery.. you will find the official website of jQuery.

We will perform all that we will learn about jQuery through this website only.

This means, jQuery is a library and the data of all the developers that handle it is uploaded here.

So here you can see "download jQuery" is written, you can do it through this otherwise you can perform the tasks of jQuery through the links also known as DNS given here.

Here on the slide, lightweight footprints, CSS 3 compliance and cross Browser are written.

Cross Browser means all the browser supports this, the changes we make through CSS are supported through it and it is also lightweight.

You will get all the documentation of the APIs of jQuery here, you can go through them one by one if you want to learn jQuery through a document.

But we will learn all the stuff given here related to jQuery in normal terms in our course and we will learn how to use jQuery in an easy way.

Moving further in jQuery, are the applications of the jQuery and where it is used.

So jQuery is basically used for HTML manipulation, means if we have written a p tag through html and we render a few things in the web browser through the p tag, So to manipulate means change or update the things that are once written and shown in the web browser, we can perform this manipulation through jQuery.

Now the Dom manipulation, Html manipulation means every element of html each element of the html.

The meaning of Dom is, there will be more than 1 element in the complete web page, more than one means there will be a parent element and its child element.

Means if we have created a "div", there will be multiple H1 tags, p tags and other relevant tags in div.

So, we will be able to manipulate the Dom that is created through jQuery.

Then we have the “Dom element selection”, which means how can we select an element which we have placed in the dom.

If we have to manipulate an element, we will definitely have to reach for it.

There are various ways in jQuery, we can go through the parent, child or through class or id.

So there are multiple ways of making the selection.

We can select a particular element in the dom through jQuery.

“CSS Manipulation”

Means we can update the CSS which we have written.

“Effects and animations “

Means if we do not add any effect or animation initially, then with time if we want to add any animation in the web page afterwards, we can do it using jQuery.

We will learn both of these in our effect and animation module.

Then, as I said ,the ajax call, The full form of Ajax is Asynchronous JavaScript and XML. We have already learned Asynchronous JavaScript in our javascript course but what is XML?

When we get responses through the requests from the server those responses are mostly in XML, XML is a complete language in itself but XML is a document similar to HTML in which the data is added.

We use javascript to handle this data and the complete thing or the XML we got in response, we use ajax to handle it.

We use ajax calls to handle the ajax we got in response, and that we will do through jQuery.

jQuery will be used to handle ajax calls, and ajax calls help us to get the responses from the server.

You can understand this for ajax as of now in today's module, then we will learn about ajax, what is ajax etc., in the module of AJAX where we will cover it in detail.

Then it is the “HTML event methods”, Means we can handle the events of html like mouse click, related to keyboard, browser through jQuery.

So all these were the applications of jQuery and areas of its use.

Now, “why is jQuery required?”

Very important thing, that if we have JavaScript available to us and with more lines of code we can already do the coding then why do we need jQuery?

So definitely the answer to this is,

jQuery as compared to “javascript is fast and extensible”

Then next is,

“It facilitates the user to write the UI related functions in minimum possible lines”, Here the main term is minimum possible lines.

All the UI related functions we have written, UI related means which we see on the front end, it is called user interface.

So, we have to use jQuery to write or code the functions with or related to the things in minimum possible lines which we will see on the front end inside the browser.

As we learned earlier, jQuery is useful for fewer lines of code.

-“It improves the performance of the application”

Definitely, the application will be faster if we are working with less lines of code, so because the application will be fast the performance will also be better.

-“Browser's compatible web applications can be developed”, means fast and as we saw jQuery is compatible with every browser so we can create applications which are compatible with every browser.

- then, “it uses mostly new features of new browsers,”

This means jQuery not only uses but also supports all the new features of the new web browsers in the market so this is why jQuery is more required.

JavaScript already covers and supports the browsers as it's EXtensible, jQuery also does the same as javascript but in less lines of code.

So that is why jQuery is required.

Today's segment was the introduction segment of jQuery in which we mainly saw what are the prerequisites needed to learn jQuery and covered what is jQuery, what are the applications of jQuery and why it is useful.

In the next segment, we will understand jQuery with the help of an example.

Firstly, how jQuery is installed and how can we add it in our html page.

So, we will see this in our next segment.

If you came across any doubt in today's session,  tell us at forum.learnvern.com we will revert with solutions to your questions.(PLEASE ADD DISCUSSION)

We will meet in the next segment where we will see an example of jQuery.

Thank you.