Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

JQuery

on

  • 1,096 views

 

Statistics

Views

Total Views
1,096
Views on SlideShare
852
Embed Views
244

Actions

Likes
0
Downloads
38
Comments
0

4 Embeds 244

http://www.pradipkharbuja.com.np 241
http://webcache.googleusercontent.com 1
http://www.freesafeip.com 1
http://localhost 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JQuery JQuery Presentation Transcript

  • jQuery Er. Pradip Kharbuja
  • jQuery - write less, do more... • jQuery is a fast, small and most popular JavaScript library. • It is a library for JavaScript that greatly simplifies and extends what it can do. • It helps in HTML document traversal and manipulation, event handling, animation, and Ajax which works across different browsers. • It is easier to write and perform many functions than in plain JavaScript. • wordpress, wikipedia, stackoverflow, etc are using jQuery
  • How to use jQuery? • The best way is to download and install the library in a local directory. • <script type="text/javascript" src = "jquery.js"></script> • You can also use an external repository • <script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
  • The structure of jQuery • jQuery provides an extension to the standard DOM model of JavaScript.  In technical terms, it is a wrapper.  It adapts the functionality of DOM. • jQuery provides for greater expressiveness when coding.  The code statements you write in jQuery can be made to do a lot more than they would otherwise in plain JavaScript.
  • Before Starting jQuery Example • We place jQuery code in an event handler called ready inside script tags. • This handler is triggered after the DOM is loaded, but before the page contents and images are placed on the document.
  • jQuery Example <html> <head> <title>jQuery Demo</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ console.log("Document is ready!"); }); </script> </head> <body> </body> </html>
  • jQuery Example Explained • The $ notation indicates that we want to make use of jQuery  $(document) means access the document element via jQuery. • If we want to get an element with a specific tag, we use the $(tag) syntax, such as $("a"), $("p"), $("div").  $("a") gets all anchor tags and other similarly
  • jQuery Example - 2 <html> <head><title>jQuery Demo</title></head> <body> <a href="http://www.nccedu.com/">NCC Education</a> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for clicking that link!"); }); }); </script> </body> </html>
  • jQuery is JavaScript • jQuery is a library of JavaScript, which means we can use normal code within jQuery functions too : $(document).ready(function(){ for (i = 0; i < 10; i++) { console.log("Hello"); } });
  • Manipulating HTML via jQuery • create new content dynamically and copying, deleting content 1. 2. 3. 4. html( ) - gets the html content of first matched element html( newContent ) text( ) text( newText ) - sets the HTML content of every matched element
  • Manipulating Attributes • jQuery even lets us change the attributes on elements. • This is done using the attr( ) function. 1. attr(name) 2. attr(name, value) 3. removeAttr(name)
  • Adding CSS • We can add CSS ‘on the fly’ to elements using jQuery. • This is done using the css( ) function. • This can also be done using addClass( ), removeClass( ) 1. 2. 3. 4. css(property) css(property, value) addClass(class) removeClass(class)
  • Effects in jQuery • We can make elements slowly appear, disappear, animate, and more. 1. 2. 3. 4. 5. show( ) hide( ) toggle( ) slideDown( ) slideUp( ) 6. slideToggle( ) 7. fadeIn( ) 8. fadeOut( ) 9. fadeTo( ) 10. animate( )
  • Selectors • similar to CSS Selectors 1. Tag e.g. $("div"), $("a"), $("p"), etc. 2. Class ( . ) e.g. $(".error"), $(".success"), $(".info"), etc. 3. Id ( # ) e.g. $("#error"), $("#success"), $("#info"), etc.
  • Selectors [Contd.] 1. 2. 3. 4. 5. 6. $("input") $(".message") $("ul") $("#result") $("li") $(".information") 7. $("p#result") 8. $("div.success") 9. $("li.a") 10. $(".myclass.otherclass") 11. $("div, p, span") 12. $("div, .error, #result")
  • Selectors [Contd.] • $("p.success") vs $("p .success")  $("p.success") selects all paragraphs that have a class success  $("p .success") selects all the elements that are children of p and having class success This type of relationship is termed as parent-chlid or ancestor-descendent
  • Selectors Examples jQuery
  • Filters • jQuery also offers us a powerful mechanism for finding and manipulating elements which are filters. • e.g. :odd, :even • $("div:odd") selects odd division elements • $("div:even") selects even division elements
  • Categories of Filters 1. 2. 3. 4. 5. 6. Basic Filters Content Filters Visibility Filters Attribute Filters Child Filters Form Filters
  • Some More Filters... 1. 2. 3. 4. 5. 6. 7. :first :last :even :eq(index) :gt(index) :lt(index) :header 8. :not(selector) 9. :has(selector) 10. :visible 11. :hidden 12. :nth-child(index) 13. :first-child 14. :last-child 15. :input 16. :checkbox 17. :button 18. :enabled 19. :disabled 20. :checked 21. :selected
  • jQuery Events 1. 2. 3. 4. 5. 6. blur( ) change( ) click( ) dblclick( ) focus( ) keydown( ) 7. keypress( ) 8. keyup( ) 9. load( ) 10. mousedown( ) 11. mousemove( ) 12. mouseout( ) 13. mouseover( ) 14. mouseup( ) 15. resize( ) 16. scroll( ) 17. select( ) 18. submit( )
  • Assignment #1 • Develop different HTML pages implementing all filters discussed in previous slide. • Develop different HTML pages implementing at least 10 events discussed in previous slide. • Send to college.pradip@gmail.com before 5th September, Thursday. • If anyone fails to submit 3 assignments, his/her University Assignment marks will be 0.
  • Callbacks • Most jQuery effects permit you to define a callback function to be called when the effect or animation is complete. • Callbacks allow us to be sure that our animations sync up correctly $('#btnFadeIn').click(function(e) { $('#image').fadeIn(1000, function(){ //callback function console.log("Image is visible."); }); });
  • Animation... wow • We can do animation using jQuery. • The below example shows animating font size of the element. $("#btnAnimate").click (function() { $("#first").animate ({fontSize: '48px'}, 1000); });
  • Benifits of jQuery  jQuery is a cross browser library.  Large library  Ease of element selection and manipulation  Simplified event handling  Great documentation and tutorials  Ajax support  Supports plug-ins
  • Questions ??? Er. Pradip Kharbuja