• Like

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.

JQuery

  • 809 views
Uploaded on

 

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
809
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
40
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery Er. Pradip Kharbuja
  • 2. 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
  • 3. 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>
  • 4. 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.
  • 5. 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.
  • 6. 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>
  • 7. 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
  • 8. 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>
  • 9. 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"); } });
  • 10. 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
  • 11. 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)
  • 12. 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)
  • 13. 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( )
  • 14. 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.
  • 15. 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")
  • 16. 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
  • 17. Selectors Examples jQuery
  • 18. 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
  • 19. Categories of Filters 1. 2. 3. 4. 5. 6. Basic Filters Content Filters Visibility Filters Attribute Filters Child Filters Form Filters
  • 20. 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
  • 21. 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( )
  • 22. 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.
  • 23. 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."); }); });
  • 24. 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); });
  • 25. 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
  • 26. Questions ??? Er. Pradip Kharbuja