Download presentation
Presentation is loading. Please wait.
1
Tek Raj Chhetri Code for Humans not for machine.
JQuery Tek Raj Chhetri Code for Humans not for machine.
2
jQuery by Tek Raj Chhetri
Table of Content Introduction Getting Started with jQuery Selectors and Methods Events jQuery by Tek Raj Chhetri
3
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
4
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
5
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
6
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
7
Getting Started with jQuery
jQuery by Tek Raj Chhetri
8
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
9
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=" jQuery by Tek Raj Chhetri
10
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
11
Getting Started with jQuery
<Doctype html> <!DOCTYPE html> <html> <head> <script src=" </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
12
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
13
jQuery by Tek Raj Chhetri
Selectors and Methods jQuery by Tek Raj Chhetri
14
jQuery by Tek Raj Chhetri
Selectors and Methods jQuery by Tek Raj Chhetri
15
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
16
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
17
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
18
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
19
jQuery by Tek Raj Chhetri
Events jQuery by Tek Raj Chhetri
20
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
21
jQuery by Tek Raj Chhetri
Events $('.para').bind('click', function(){ $(this).slideUp(); //this here refers to para class }); jQuery by Tek Raj Chhetri
22
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
23
jQuery by Tek Raj Chhetri
Thank you jQuery by Tek Raj Chhetri
Similar presentations
