jquery tutorials series (Hindi) - 1. Introduction to Jquery.
Hello Friends, you are watching Tech Engine and I'm your host Pankaj Borah presents to You Jquery video series. Friends, in this series we'll talk aboutJquery.What Jquery is and how we can use it for Web development.Before we move further, I would like to give you a brief introduction of Jquery.If any of you guys, have ever developed any website and used Javascript in that, like for manipulating DOM, performed ajax operations, or any other type of animations or operations.Then you may know how, how painstaking and time-consuming it is to do all this is pure javascript.This is the primary problem that jquery tends to solve for us.and provides us with a very easy interface using which all these operations can be performed without much wasting time .So as to say, Jquery is an easy and flexible way with which you can do the effect, Dom operation, ajax and all these stuff on your website without dropping a sweat.Friend, Jquery is actually a javascript library and not a programming language to be clear,and isn't the only one out there, in fact, there are other libraries which do similar stuff.But the cool thing I find about jquery that it loads much faster in comparison to other libraries.and file size is small, considering all its functionality.Jquery is cross browser compatible, which means if you have included it in your javascript code ,then it will work on a variety of web browsers.As you all can see from here, it's written cross browser compatible and below it there's a list all the browser which support Jquery.After this, we will discuss how we can include jquery in our projects.But before, we may include it, we'll have to download it from its official website.Let's click on the download button, and this will land us to the download page from here.In the download section, we basically have two options to choose from.First one is the production version and the second one is the development version.The production is used when we have finalized our code and ready to upload it to our server.Because this version is the compressed one and low in memory, it will help our web page to load faster.The development version is used when we want to experiment with the jquery library and develop plugins in which code readability matters.Once you've downloaded the library you can use it in your code by including it in code.Let's once again head o to jquery's official website.As we scroll down, we can see how popular jquery is, having IBM as it's corporate member.There are many companies using jquery in their code like Microsoft, Google etc.We can talk about Google for example, Whenever we search something on google and start typing say car, google tries to guess possible search string and provides us a list of suggested results based on previous searches by others.The results in the drop-down menu change as we type.This is achieved using jquery's ajax operation.As we continue scrolling further down the page, we can see and as i have already told you Jquery is mostly used for these 3 types of operation.First, DOM traversal and manipulation.Second, Event Handling and third is Ajax.Friends, You may all know Dom stands for document object model.For example, as it's given hereThis code you are seeing, if we try to write this in pure js then we'll have to write something likedocument.getElementById "id" .innerHtml=''something" But in Jquery we write something like this What this code does is that it changes the text of a button having a class continue to "Next step" using a class selector We can also select element using juery For this first, we'll have to use a dollar sign and then within parentheses we'll provide the selector which can be a class selector, id selector or any other type of selector after which we'll append our event Then comes event handling Consider a situation where you click a button and a popup is displayed.we are assigning the popup div element an id =" banner-message" and store the reference in a variable called hiddenbox then we move on and use a dollar sign followed by the selector which in this case is "#button-container button" included within parentheses. this select an element with id ="button" and type=" button". After that, we'll bind our event handler which in this case is "click", it can be mouseover or anything .Whenever someone clicks on the button the hidden box is displayed. Friends as you can see how simple is all that using jquery, which if we've choosen to do all these in pure javascript, the code would have been lengthy and cumbersome.Thus jquery makes all this simple and saves our development time.Then comes the most important of all, for which jquery is mostly used is to add ajax functionality to websites Normally ajax is pure js is a pain and most of us try to avoid it as code becomes confusing and more prone to errors Jquery handles ajax operation for us, we just have to pass it all the necessary parameters in the form of an object.Like here, the first element we have