Jquery
0 likes376 views
This document provides an overview of jQuery, including: - jQuery is a JavaScript library that simplifies JavaScript programming. - jQuery can be downloaded or included from a CDN. - jQuery uses CSS selector syntax to find DOM elements and actions can be performed on those elements. - Common selectors include element, ID, and class selectors. Common actions include hide, click functions, and traversing methods like parent and siblings. - jQuery has methods for binding event handlers like click, live, delegate and on that are useful for dynamically generated elements.
![$.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>](https://image.slidesharecdn.com/jquery-140402231109-phpapp01/85/Jquery-9-320.jpg)
Jquery
- 1. Jquery
- 2. JQuery • jQuery is a JavaScript Library. • jQuery greatly simplifies JavaScript programming. • jQuery is easy to learn.
- 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. 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. 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. Different type of selectors • The element Selector – $("p") • The #id Selector – $("#test") • The .class Selector – $(".test")
- 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. 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. $.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. JQuery Traversing • Parent() • Parents() • Children() • Find() • siblings() • First() • Next() • Prev()
- 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. 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. Binding handler • Click • Live • Delegate • On These three can be used for dynamically generated elements.
- 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. 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. 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. Questions? “A good question deserve a good grade…”
- 18. End of day
- 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. 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: [email protected]