What is jQuery

this is part one of jQuery tutorial in this video we'll discuss what is jQuery and why should we use jQuery so what's the equity jQuery is not a new programming language jQuery is built on top of JavaScript in fact jQuery is a lightweight JavaScript library that simplifies programming with JavaScript according to jQuery calm website jQuery is a fast small and feature-rich JavaScript library it makes things like HTML document traversal and manipulation even handling animation and Ajax much simpler with an easy-to-use API that works across a multitude of browsers with a combination of versatility and extensibility jQuery has changed the way that millions of people write JavaScript we already have JavaScript so why should we use jQuery or what are the advantages of using jQuery over raw JavaScript one of the greatest benefits of using jQuery is that it is cross browser meaning when we write JavaScript using jQuery we don't have to worry about is this code going to work in IE 7 is it going to work in Google Chrome is it going to work in Safari we don't have to worry about all those browser compatibility issues all that is taken care by jQuery for us so when we write JavaScript using jQuery we can be assured that it is going to work across all browsers so the greatest advantage of jQuery is that it is cross browser jQuery is a lot more easy to use than raw JavaScript we'll look at examples of using jQuery nor upcoming videos and you will realize how easy it is to achieve that using jQuery overusing raw JavaScript jQuery is extensible jQuery simplifies and has rich Ajax support in upcoming videos we'll see how to implement Ajax using jQuery and along the way we'll see how simple it is jQuery has large development community and many many free plugins for example within your application if you want to implement autocomplete text box you can either write code for that from square you can use one of the three jQuery plug-in that is readily available a plugin that is already developed tested and proven to be working so when you have plugin like that why do you want to reinvent the wheel why do you want to invest the time and effort to do the same thing again instead simply use that free plugin that's available there are many many such free plugins available and there is excellent documentation on jquery.com website not upcoming videos we'll see how to use the documentation now let's see how to use jQuery in our application now to use jQuery within your application all you have to do is navigate to jquery.com website download the relevant jQuery file and reference that just like any other JavaScript file within your application so when we navigate to jQuery com notice that we have this download jQuery button once we click on that we go to the download page and notice on this page we've got two versions of jQuery jQuery one dot X and jQuery 2 dot X so what is the difference between jQuery one dot X and 2 dot X if you want to support Internet Explorer 6 7 & 8 versions then use jQuery 1 dot X whereas if you don't have the need to support ie6 7 & 8 and if you want to target just the modern browsers then use this jQuery 2 dot X the size of jQuery 2 dot X is smaller than jQuery 1 dot X because all that backward compatibility code has been stripped off from jQuery 2 dot X so this tends to be a little leaner than jQuery 1 dot X and if you look at either of them notice that we have a compressed and uncompressed versions and if you look at this compressed version notice that you know all the white spaces have been removed variable names have been shortened to keep the size of this file small so this minified or compressed version is suitable for production use whereas if we look at this uncompressed version you know this piece of code is much readable because we have the white spaces and meaningful variable names are used now we require this for development because if there are issues we want to be in a position to read this javascript and we want to be in a position to debug it so for development use the uncompressed version for production we usually use this minified or compressed version so I have already downloaded you know both this jQuery 1 dot X and jQuery 2 rod X files and let's see how to use them in our application let's slip to Visual Studio so here I have a button control now what we want to do is assign a click event handler to this button first let's do that using raw JavaScript and then we'll see how to rewrite the same thing using jQuery so window dot onload so when onload even fires we want to execute this function so basically what we want to do is document or get element by ID if you want to get this element which has an ID of button 1 dot and to that button we want to add an event listener and if you look at this addeventlistener method it has got three parameters the first parameter is the type of the event so the type of the event is clicked and the second parameter is the event listener method so first let's go ahead and write a function let's call this click handler and all this function is going to do is alert the message saying jQuery tutorial so the second parameter for addeventlistener method is going to be the function the event handler function and the third parameter is boolean parameter used capture this parameter is really used and I'm going to set that to false all right if you look at this add event listener method this is not supported in ie8 in the earlier version so this piece of code is not going to work in ie8 and early versions let's look at that in action so let's run this now so at the moment my default browser is Google Chrome so this works in Google Chrome look at this when we click the button we get the alert but let's navigate to this URL within ie so at the moment the version of ie that I have is ie 11 so when I click this it works in IE 11 but let's change the browser mode to IE 7 by launching the developer tools so let's change the mode to IE 7 and look at this the moment we do that we get a message saying that this ad even listener property or method is not supported right so with IE 8 in earlier versions we have to use a different method which is attach event so we have to first check if document dot add even listener if this method is supported then do this if that is not supported then we know that the browser is beta ie 8 or earlier versions in that case we want to use document or get element by ID instead of add event listener they are going to use attach event function and with attach event you know you have to use Deonne prefix with the event name so if it's click event you have to specify on click and then the even handler function we don't require this third parameter with attach event all right so let's save these changes let's reload in IE so at the moment we are running an IE 11 mode it works let's change the browser mode to IE 7 and look at this we don't get the javascript error so if we click this button we should get the alert jQuery tutorial ok so at the moment it's working across all browsers but look at the amount of code that we have to write here okay just to add a click event handler to this button control this is the amount of code we have to write now let's see how to rewrite the same thing using jQuery so we have to reference the jQuery file since we want to support ie8 and earlier versions I am actually going to use jQuery 1 dot X within my application let's actually copy both of them and paste them within our project so let's paste them here so they are added to a root directory so let's drag and drop them within the head section so I am adding a reference to 1 dot X file because we want to support ie8 in the earlier versions as well alright so instead of all this we are going to use jQuery now now look at this as we have added that you know there should be a jQuery function now so jQuery to this we pass the document object and then we call ready function so what is this ready function going to do it's going to ensure that the Dom is fully loaded so the browser document object model is fully loaded and you know the script can start modifying the elements if required ok so dot ready and this is where we write our JavaScript so we want to execute a function just like how we did with window dot onload okay so we're going to open a bracket so here we have an anonymous function that we want to execute when the document object model is fully loaded so jQuery we are passing the document object to the jQuery function and then we are calling the ready method this ready method will ensure that the dome is fully loaded and the script can start modifying the elements within the Dom okay so what do we want to do here we want to attach even handler to this button control so jQuery now you know in rajala script to get a reference of this button we use document or get element by ID now I want to get this element by ID with jQuery we use something called ID selector will discuss more about selectors in our upcoming video for now understand that you know hash button 1 this is equivalent to saying document dot get element by ID button 1 ok so hash symbol here in jQuery is called as ID selector so we want to get an element with the ID button 1 that's what this piece of code says and then when the click event occurs on this button control we want to execute some piece of code and we're going to specify that using an anonymous function so I want to execute a function then we end that with a semicolon and here we specify you know what we want to do when that click event occurs on that button control so all we want to do is alert the message saying jQuery tutorial all right so look at the amount of code that we have to write with jQuery now let's go ahead save this and run it so when we click this we should get that message jQuery tutorial now let's go ahead and check if this is going to work in IE as well so let's fly it up internet explorer and let's navigate to the same page click the button it works let's change the browser mode to IE 7 and let's click this button notice that it works now it's working in IE 7 here because if you look at the jQuery we are using its jQuery one door text so ie 6 7 & 8 all these versions are supported now let's actually remove this and instead use jQuery 2 dot X remember with jQuery 2 dot X we will not have support for ie 8 in the earlier versions so let's close that save the changes fire up ie let's change the browser mode to IE 7 and let's navigate to this URL so let's copy that and let's navigate to that URL and look at that we get an error okay so if you want to target IE 8 in earlier versions as well then use the equity 1 dot X but if you don't want to target them and just want to target IE 9 and later versions and the other modern browsers then use jQuery 2 dot X versions so with raw JavaScript this is the amount of code that we have to write to attach a click event handler to the button control but with jQuery this is the amount of code now look at the you know how less the code is and we don't have to worry about cross-browser issues because all that is taken care by jQuery for us and here we have some important points to remember now here notice that we using jQuery you know as the name of the function instead of that you know we have dollar in jQuery okay so this dollar is shortcut for jQuery okay so you can either use dollar or jQuery whatever you prefer commonly most people use dollar and this ready function insures that the dome is fully loaded and our script can start manipulating the elements within Dom and look at this - you know to ensure that the dome is fully loaded we have to write dollar we pass you know to that function jquery function we pass the document object and on that we call the ready function we can either write all these ok or if you look at you know we have three lines here all these three are equivalent at the moment we're using this syntax dollar by passing the document object and on that we are calling the ready function you can either do that or you can do this you know without passing the document object you can simply call the ready method so something like this so I can get rid of that save this and because that's reload this click the button it should still work but the second option is not really recommended you can use the third option as well which is even shorter so to the dollar you know to the jQuery function you just specify the handler that you want to execute so I can get rid of all this together so now within this parentheses we specify the handler that we want to execute an anonymous function and what this function says is find a button with ID button 1 and then when the click event occurs execute this piece of code okay look at how small the code is with jQuery thank you for listening and have a great day

Channel: kudvenkat

Views: 877,200

Keywords: what is jquery, why use jquery, jquery introduction, advantages of jquery, jquery examples, jquery tutorial, jquery tutorial for beginners

Id: a59kOE2Ma1Q

Length: 17min 11sec (1031 seconds)

Published: Tue Mar 17 2015