Jquery
JQuery
• jQuery is a JavaScript Library.
• jQuery greatly simplifies JavaScript programming.
• jQuery is easy to learn.
Adding jQuery to Your Web Pages
• Download the jQuery library from jQuery.com or
• Include jQuery from a CDN, like Google
...
jQuery Syntax
$(selector).action()
Selectors are used in
jQuery to find out DOM
elements
A jQuery action() to be performed...
example
• $(this).hide() - hides the current element.
• $("p").hide() - hides all <p> elements.
• $(".test").hide() - hide...
Different type of selectors
• The element Selector
– $("p")
• The #id Selector
– $("#test")
• The .class Selector
– $(".te...
Different actions
• hide() :hides the selector
• click(function (){}) : executest the function when click on
the selector
...
jQuery noConflict()
• What if other JavaScript frameworks also use the $ sign as a shortcut?
• The noConflict() method rel...
$.each in jquery
<script>
var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one: 1, two: 2, three: 3, four:...
JQuery Traversing
• Parent()
• Parents()
• Children()
• Find()
• siblings()
• First()
• Next()
• Prev()
Example
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(...
Binding handler
• Click
• Live
• Delegate
• On
Use .click(function) when binding a
handler directly to an element, like th...
Binding handler
• Click
• Live
• Delegate
• On
These three can be used for
dynamically generated elements.
Binding handler
• Click
• Live
• Delegate
• On
You use this when your elements may
change, e.g. adding new rows, list item...
Binding handler
• Click
• Live
• Delegate
• On
If however you do have a parent element
somewhere that isn't getting replac...
Binding handler
• Click
• Live
• Delegate
• On
Functions are same as delegate(). Attach
an event handler function for one ...
Questions?
“A good question deserve a good grade…”
End of day
If this presentation helped you, please visit our
page facebook.com/baabtra and like it.
Thanks in advance.
www.baabtra.co...
Contact Us
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, N...
Upcoming SlideShare
Loading in...5
×

Jquery

241

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
241
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×