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)
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>
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() );
});
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: info@baabtra.com
