Your SlideShare is downloading. ×
0
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery

6,652

Published on

jQuery Basics

jQuery Basics

Published in: Technology, Education
1 Comment
4 Likes
Statistics
Notes
  • Since when jQuery became a Framework if it always was a JavaScript library? Or we are talking about different things?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,652
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
103
Comments
1
Likes
4
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 Framework Mohammed Arif
  • 2. Agenda:
    • Why you should use jQuery
    • What is $()
    • What Unobtrusive JavaScript means
    • The jQuery wrapper
    • The document ready handler
    • Utility functions
    • Extending jQuery – Plugin Development
    • Using jQuery with other libraries
    • Q/A Session
    • Feedback
  • 3. Before We Start!
    • Self-executed anonymous function
    // Create a anonymous function, to use as a wrapper ( function () { // The variable that would, normally, be global var msg = “It’s a self executed anonymous function!"; alert ( msg ); // Close off the anonymous function and execute it })(); jquery.self.executed.html
  • 4. Why you should use jQuery jQuery is ideal because it can create impressive animations and interactions (AJAX). jQuery is simple to understand and easy to use, which means the learning curve is small, while the possibilities are infinite.
    • Fast, concise, unobtrusive JavaScript Library
      • Lightweight footprint
        • Approx 15KB in size (Minified and Gzipped)
      • Cross-browser
        • IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+
      • CSS3 Compliant
        • Supports CSS 1-3 and basic XPath
  • 5. What is $()
    • Everything starts with $
      • It’s a shortcut: $() == jQuery()
    the $() function removes the need to do a for loop to access a group of elements since whatever we put inside the parentheses will be looped through automatically and stored as a jQuery object. We can put just about anything inside the parentheses of the $() function. jquery.$.html
  • 6. What Unobtrusive JavaScript means <a onclick=&quot;doSomething()&quot; href=&quot; backuplink.html &quot;>Click!</a>   <a href=&quot;backuplink.html&quot; class=&quot;doSomething&quot;>Click!</a>  $('a.doSomething').click(function(){        // Do something here!        alert('You did something, woo hoo!');   });  Separation of functionality (the &quot;behavior layer&quot;) from a Web page's structure/content and presentation. jquery.click.html
  • 7. $(document).ready()
    • $(document).ready()
      • Replacement for window.onload event
        • Executes as soon DOM is ready
        • Doesn’t require external sources to be loaded
          • Images
          • Frames
          • Etc
      • $( function ) = $(document).ready( function )
    jquery.doc.ready.html
  • 8. Utility functions Functions namespaced by $ that don’t operate on a wrapped set. These functions could be thought of as top-level functions except that they are defined on the $ instance rather than window. jQuery flags $.browser $.boxModel $.styleFloat etc. Contains flags for the user agent, read from navigator.userAgent. jquery.browser.html
  • 9. Extending jQuery Fortunately, and by design, jQuery makes it easy to extend its set of functions by extending the wrapper returned when we call $(). jQuery offers a mechanism for adding in methods and functionality, bundled as plugins. Most of the methods and functions included in the default download are written using the jQuery plugin construct. $.fn.methodName = function() { … . } $.methodName = function() { … . } jquery.disable.js
  • 10. Important points to remember
    • Name your file jquery.[insert name of plugin].js, eg. jquery.disable.js
    • All new methods are attached to the jQuery.fn object, all functions to the jQuery object.
    • inside methods, 'this' is a reference to the current jQuery object.
    • Any methods or functions you attach must have a semicolon (;) at the end - otherwise the code will break when compressed.
    • Your method must return the jQuery object, unless explicitly noted otherwise.
    • You should use this.each to iterate over the current set of matched elements - it produces clean and compatible code that way.
    • Always use jQuery instead of $ inside your plugin code - that allows users to change the alias for jQuery in a single place.
  • 11. Using jQuery with other libraries The definition of the $ variable is the largest point of contention and conflict when using other libraries on the same page as jQuery. As we know, jQuery uses $ as an alias for the jQuery name, which is used for every feature that jQuery exhibits. But other libraries, most notably Prototype, use the $ name as well. jQuery provides the $.noConflict() utility function to relinquish control of the $ name to whatever other library might wish to use it. The syntax of this function is as follows:
  • 12. References
    • http://jquery.com/
    • http:// docs.jquery.com/Main_Page
    • http://www.visualjquery.com/
    • http://docs.jquery.com/Plugins/Authoring
    • http://www.learningjquery.com/
    • http://groups.google.com/group/jquery-en
    • http:// javascriptlibraries.com /
    • JavaScript Community DL @ Sapient
  • 13. Questions?
  • 14. Feedback

×