• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery
 

jQuery

on

  • 8,621 views

jQuery Basics

jQuery Basics

Statistics

Views

Total Views
8,621
Views on SlideShare
8,596
Embed Views
25

Actions

Likes
3
Downloads
96
Comments
1

3 Embeds 25

http://www.slideshare.net 13
http://www.linkedin.com 9
https://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Since when jQuery became a Framework if it always was a JavaScript library? Or we are talking about different things?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery jQuery Presentation Transcript

    • jQuery Framework Mohammed Arif
    • 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
    • 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
    • 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
    • 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
    • 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
    • $(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
    • 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
    • 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
    • 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.
    • 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:
    • 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
    • Questions?
    • Feedback