Tek Raj Chhetri Code for Humans not for machine. JQuery Tek Raj Chhetri Code for Humans not for machine.
jQuery by Tek Raj Chhetri Table of Content Introduction Getting Started with jQuery Selectors and Methods Events jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Introduction A fast, small and feature rich java script library. (jQuery.com) Why learn jQuery? Write less, do more. $(“#text”).addClass(“show”).show(“slow”); Performance jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Introduction Plugins - A new method that we use to extend jQuery’s object. jQuery makes DOM less scary Javascript Way jQuery Way document.getElementsByTagName('p')[0].innerHTML = "Change the page"; $('p').html('Change the page'); jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Introduction Where can jQuery be used? DOM Traversal and Manipulation Get the <button> element with the class 'continue' and change its HTML to 'Next Step...‘ $( "button.continue" ).html( "Next Step..." ) Event Handling Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked. var hiddenBox = $( "#banner-message" ); $( "#button-container button" ).on( "click", function( event ) { hiddenBox.show(); }); jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Introduction Ajax Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp's html with the returned text. $.ajax({ url: "/api/getWeather", data: { zipcode: 97201 }, success: function( result ) { $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" ); } }); jQuery by Tek Raj Chhetri
Getting Started with jQuery jQuery by Tek Raj Chhetri
Getting Started with jQuery There are two ways to get started with jQuery Using CDN (Content Delivery Network) Using locally downloaded file jQuery by Tek Raj Chhetri
Getting Started with jQuery (Using CDN) Step 1 Decide which CDN provider to use Step 2 Go to that CDN Link Step 3 Copy the link of file Step 4 Include the copied link in script src tag. jQuery, Cloudfare, Google Eg: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> jQuery by Tek Raj Chhetri
Getting Started with jQuery (Using Local File) Step 1 Go to jQuery.com Step 2 Find the latest version Step 3 Download Step 4 Include the downloaded file. Eg: <script src=“js/jquery/3.2.1/jquery.min.js"></script> jQuery by Tek Raj Chhetri
Getting Started with jQuery <Doctype html> <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ //do your task }); </script> </body> </html> <script src="js/jquery/3.2.1/jquery.min.js"></script> Using CDN Using Local File jQuery by Tek Raj Chhetri
Getting Started with jQuery <script type="text/javascript"> $(document).ready(function(){ // when the web page document is ready, do what's below $('button').click(function(){ // when any button is clicked, do this stuff $('h1').hide('slow'); }); </script> jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Selectors and Methods jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Selectors and Methods jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Selectors and Methods Tag selector: - selects html tag directly to manipulate $(‘p’).hide(); // hides the p tag and its content ID selector: - selects based on id provided to html tag, needs to use #. $(“#sayHello”).text(“hello I am id selector”); Class selector: - selects based on class provided to html tag, needs to use dot(.). $(“.sayHello”).text(“hello I am class selector”); jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Selectors and Methods jQuery selects the elements the same way css does H1{ text-align:left; } $(“h1”).css(“text-align”,”left”); P{ color:red; $("p").css("color", "red") Body{ Background-color:yellow; $("body").css("background-color", "yellow"); jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Selectors and Methods this selector Refers to whatever element we are working on Allows us to use jQuery method to affect current element $('.para').click(function(){ $(this).slideUp(); //this here refers to para class }); jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Selectors and Methods Following are some of the jQuery methods Css() fadeIn() fadeOut() Hide() Show() click() dblclick() mouseenter() mouseleave() Example: $("#top").sideUp(); $(".remove").fadeOut(); $(".show_slow").fadeIn(); $("#box").animate({top: 30},200); jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Events jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Events There are two ways to bind event Method 1: Convenience method or is simply a shortcut for method 2 $('.para').click(function(){ $(this).slideUp(); //this here refers to para class }); Method 2: Only when the DOM elements already exists. To add elements after page is loaded. jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Events $('.para').bind('click', function(){ $(this).slideUp(); //this here refers to para class }); jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Events Like events binding there are two ways to remove events. Method 1: Unbind all the events. $(“#myElement”).unbind(); Method 2: Unbind particular event only. $(“#myElement”).unbind(‘click’); jQuery by Tek Raj Chhetri
jQuery by Tek Raj Chhetri Thank you jQuery by Tek Raj Chhetri