Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jquery

336 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Jquery

  1. 1. Jquery
  2. 2. JQuery • jQuery is a JavaScript Library. • jQuery greatly simplifies JavaScript programming. • jQuery is easy to learn.
  3. 3. Adding jQuery to Your Web Pages • Download the jQuery library from jQuery.com or • Include jQuery from a CDN, like Google • There are two versions of jQuery available for downloading: – Production version - this is for your live website because it has been minified and compressed – Development version - this is for testing and development (uncompressed and readable code)
  4. 4. jQuery Syntax $(selector).action() Selectors are used in jQuery to find out DOM elements A jQuery action() to be performed on the element(s) using $("#id") or jQuery("#id") is the same
  5. 5. example • $(this).hide() - hides the current element. • $("p").hide() - hides all <p> elements. • $(".test").hide() - hides all elements with class="test". • $("#test").hide() - hides the element with id="test".
  6. 6. Different type of selectors • The element Selector – $("p") • The #id Selector – $("#test") • The .class Selector – $(".test")
  7. 7. Different actions • hide() :hides the selector • click(function (){}) : executest the function when click on the selector • parent() :returns the parent of the selector • Parents() : return all the parent of the selector up to HTML
  8. 8. jQuery noConflict() • What if other JavaScript frameworks also use the $ sign as a shortcut? • The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. • You can of course still use jQuery, simply by writing the full name instead of the shortcut: $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery is still working!"); }); });
  9. 9. $.each in jquery <script> var arr = [ "one", "two", "three", "four", "five" ]; var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; $.each( arr, function( i, val ) { $( "#" + val ).text( "Mine is " + val + "." ); return ( val !== "three" ); }); jQuery.each( obj, function( i, val ) { $( "#" + i ).append( document.createTextNode( " - " + val ) ); }); </script>
  10. 10. JQuery Traversing • Parent() • Parents() • Children() • Find() • siblings() • First() • Next() • Prev()
  11. 11. Example <html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ alert($("#sub1").parent().attr('id')); alert($("#sub1").next().attr('id')); alert($("#sub2").parents().find('div').attr('id')); alert($("#sub1").siblings().text()); }); </script></head> <body> <div id="main"><p id="sub1">first text</p><p id="sub2">last text</p></div> </body></html>
  12. 12. Binding handler • Click • Live • Delegate • On Use .click(function) when binding a handler directly to an element, like this: $(document).click(function() { alert("You clicked somewhere in the page, it bubbled to document"); }); elements that weren't there when this code was run to attach the handler (e.g. the selector found it then) won't get the handler.
  13. 13. Binding handler • Click • Live • Delegate • On These three can be used for dynamically generated elements.
  14. 14. Binding handler • Click • Live • Delegate • On You use this when your elements may change, e.g. adding new rows, list items, etc. $(".clickAlert").live('click', function() { alert("A click happened"); });
  15. 15. Binding handler • Click • Live • Delegate • On If however you do have a parent element somewhere that isn't getting replaced. you should handle it with .delegate(), like this: $("#commonParent").delegate('.clickAlert ', 'click', function() { alert("A click happened, it was captured at #commonParent and this alert ran"); });
  16. 16. Binding handler • Click • Live • Delegate • On Functions are same as delegate(). Attach an event handler function for one or more events to the selected elements. $( "#dataTable tbody" ).on( "click", "tr", function() { alert( $( this ).text() ); });
  17. 17. Questions? “A good question deserve a good grade…”
  18. 18. End of day
  19. 19. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
  20. 20. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com

×