• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to Jquery
 

Introduction to Jquery

on

  • 893 views

http://harouny.wordpress.com/

http://harouny.wordpress.com/

Statistics

Views

Total Views
893
Views on SlideShare
264
Embed Views
629

Actions

Likes
0
Downloads
2
Comments
0

4 Embeds 629

http://harouny.wordpress.com 535
http://harouny.com 92
http://www.linkedin.com 1
http://www.docshut.com 1

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to Jquery Introduction to Jquery Presentation Transcript

    • Prepared by: Ahmed EL-HarounySenior Software Engineer
    • 1. What is JQuery?2. Referencing JQuery library3. Using Content Delivery Networks (CDN)4. Go through Documentation5. Using the JQuery Ready Function6. Basic Selectors 1. Select By Tag Name 2. Select By ID 3. Select By Class 4. Select By Attributes7. Dom Manipulations 1. Concepts 2. Iterate through objects 3. Modify properties and attributes 4. Create objects 5. Adding and Removing objects
    • 8. Handling Events 1. Binding To Events 2. Click Event 3. Change Event 4. Mouse Events 5. Unbind Events 6. The Live() function
    • jQuery is a fast JavaScript Library that simplifies HTML documenttraversing, event handling, animating, and Ajax interactions for rapid webdevelopment. This means moving from this: To This:
    • =
    • 1. Download the latest lib from jquery.com2. Add Reference to it on the page <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>Note: Always use minified versions of the script during runtime because youwill get significant decrease in the file size of the file.
    •  A CDN — short for Content Delivery Network — distributes static content across servers in various, physical locations. When a user’s browser resolves the URL for these files, their download will automatically target the closest available server in the network. How? <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> When you include JQuery using a CDN service you will get the following benefits: ◦ High Availability ◦ Performance ◦ Caching Available free JQuery CDNs: ◦ Google http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ◦ Microsoft http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js ◦ JQuery http://code.jquery.com/jquery-1.7.2.min.js
    • http://docs.jquery.com/Main_Page
    • Use document ready function to execute code that depends on DOMelements. The code you write will execute when the DOM is ready to betraversed and manipulated.Or use this shortcut:
    • When using JQuery selectors to select DOM objects; a wrapped set(Array) is returned to you where each item in that set is a wrapper on thenative DOM object
    • Your awesome selectors handbook!http://api.jquery.com/category/selectors/
    •  Multiple Applying Any manipulation function you call on a wrapped set is applied to all elements in the set. Chaining All manipulation functions returns the wrapper set again after executing its logic.
    • The each() function of the wrapped set:
    •  The attr() function Used to Set and Get AttributesGet Value:Set Value:
    •  Other manipulation function (mostly shortcuts to attr() function): ◦ val() getting and setting form elements values ◦ addClass() add class to an element ◦ removeClass() remove class from an element ◦ toggleClass() toggles a class for an element ◦ removeAttr() removes an attribute from an element ◦ hide() hides an element from the page ◦ show() shows an element from the page ◦ css() alter css for an element
    •  html() function used to get and set inner HTML of an elementGet html:Set html:  text() function used to get and set inner text of an element Note: when providing html tags to text function JQuery HTML-encodes it.
    •  append() insert DOM content (parameter) to the end of the caller DOM element appendTo() insert DOM content the caller to the end of a DOM element (parameter) prepend() insert DOM content (parameter) to the beginning of the caller DOM element prependTo() insert DOM content the caller to the beginning of a DOM element (parameter) remove() removes DOM element from the DOM