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

Introduction to jQuery

on

  • 20,074 views

Mir Nazim - Introduction to jQuery

Mir Nazim - Introduction to jQuery

Statistics

Views

Total Views
20,074
Views on SlideShare
19,463
Embed Views
611

Actions

Likes
34
Downloads
1,390
Comments
1

18 Embeds 611

http://cachina.wordpress.com 310
http://www.der-webentwickler.net 122
http://blog.cachina.com.br 63
http://www.slideshare.net 35
http://tecnopeninsula.com 24
http://www.agglom.com 13
http://webtutorials4u.com 11
http://www.webgox.com 9
http://techno-sphere.blogspot.com 8
https://cachina.wordpress.com 4
http://translate.googleusercontent.com 3
file:// 2
http://webcache.googleusercontent.com 2
http://192.168.10.25 1
http://egox.tumblr.com 1
http://techno-sphere.blogspot.ca 1
http://techno-sphere.blogspot.in 1
http://localhost:8080 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

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…
  • Manu

    The title is not Extending jQuery, but Introduction to jQuery<br /><br/>
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to jQuery Introduction to jQuery Presentation Transcript

    • jQuery
      • Javascript that doesn't suck!
      Presented By Mir Nazim www.mirnazim.com [email_address]
    • WHAT and WHEN
      • John Resig - www.ejohn.org
      • Released at BarCamp NYC on Jan 2006
      • jQuery 1.0 out on Aug 2006
      • version 1.1.3 latest
        • ~ 800% faster for DOM processing
        • numerous other improvements
    • WHY
      • Doesn’t mess with the language
            • (Prototype)
      • Doesn’t try to be Python
            • (Mochikit)
      • Only essentials: > 20 KB
            • (Scriptaculous, Dojo)
      • More than cosmetic effects
            • (Moo.fx)
      • Makes common tasks a breeze
    • OTHER REASONS
      • Great Documentaions
      • Great community
      • Tons of plugins
      • Works everywhere RELIABLY
            • IE 6+, Firefox, Safari 2+, and Opera 9+
    • What jQuery Deos
      • GENRAL PURPOSE
      • ABSTRACTION LAYER
      • FOR
      • COMMON
      • WEB SCRIPTING
      • TASKS
    • What's Good in it
      • Access parts of a page
      • Modify the appearance of a page
      • Alter the content of a page
      • Respond to a user's interaction
      • Add animation to a page
      • Retrieve information (Ajax)
      • Simplify common tasks
    • How jQuery does it
      • Leverage knowledge of CSS
      • Abstract away browser quirks
      • Always work with sets
      • Allow multiple actions in one line
      • Support extensions
    • Getting Started
      • <head>
        • <script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;> </script>
        • <script type=&quot;text/javascript&quot;>
          • $(document).ready(function(){
            • // your stuff goes here
          • });
        • </script>
      • </head>
    • The $() function
      • A factory for jQuery object
      • Provides a jQuery instance
      • All operations are done using $()
    • Element Selection - CSS
      • $(document).ready(function(){
      • //select all ”p” elements
      • $(”p”);
      • //select an element with id=”soem-id”
      • $(”#some-id”);
      • //select all elements with class=”soem-class”
      • $(”.some-class”);
      • });
    • More Element Selection
      • /* select 'li' elements that are children of 'ul' with id=”some-ul” */
      • $('ul#some-ul > li')
    • Element Selection - XPath
      • //all links with a title attributes
      • $('a[@title]')
      • //all ”divs” containing on ”ol” element
      • $('div[ol]')
    • Xpath + RegEx
      • //all links with ”href” starting with ”mailto:”
      • $('a[@href^=&quot;mailto:&quot;]')
      • //all links with ”href” ending with ”.pdf”
      • $('a[@href$=&quot;.pdf&quot;]')
      • //all links that contain ”mysite.com” anywhere in ”href”
      • $('a[@href*=&quot;mysite.com&quot;]')
    • Custom Selectors
      • //selects 2 nd div from the set
      • $('div.someclass:eq(0)')
      • // same as above but CSS based
      • $('div.someclass:nth-child(1)')
    • Select Even/Odd Rows of table
      • $('tr:odd') //all odd rows
      • $('tr:even') //all even rows
    • DOM Traversal
      • Same Effect, Different way
      • $('tr').filter(':odd') //all odd rows
      • $('tr').filter(':even') //all even rows
    • DOM Traversal
      • //select the parent element of ”th”
      • $('th').parent()
      • //select all even ”tr” but not that contain a ”th”
      • $('tr:not([th]):even')
      • //select all odd ”tr” but not that contain a ”th”
      • $('tr:not([th]):odd')
    • More DOM
      • $('td:contains(&quot;Henry&quot;)').siblings()
      • $('td:contains(&quot;Henry&quot;)').parent().find('td:gt(0)')
      • $('td:contains(&quot;Henry&quot;)').parent().find('td')
        • .not(':contains(&quot;Henry&quot;)') )
      • $('td:contains(&quot;Henry&quot;)').parent().find('td:eq(1)')
    • Method Chaining
      • //get every cell containing &quot;Henry&quot;
      • $('td:contains(&quot;Henry&quot;)')
      • //get its parent
      • .parent()
      • //find inside the parent the 2nd cell
      • .find('td:eq(1)')
      • //add the &quot;highlight&quot; class to that cell
      • .addClass(highlight')
      • //revert back to the parent of the cell containing &quot;Henry&quot;
      • .end()
      • //find inside the parent the 3rd cell
      • .find('td:eq(2)')
      • //add the &quot;highlight&quot; class to that cell
      • .addClass('highlight');
    • Events
      • $('#some-element').bind('click',function() {
      • $('body').addClass('large');
      • //some more stuff
      • //even some more stuff
      • });
      • use event names without on part. E.G
      • onClick => click
        • onKeyPress => keypress
    • Compound Events
      • // add and remove class on alternate clicks
      • $('#some-element'). toggle (function() {
        • $('#switcher.button').addClass('hidden');
      • }, function() {
        • $('#switcher.button').removeClass('hidden');
      • });
    • One compound event
      • //works like ”:hover” pseudo class
      • $('#some-element').hover(function() {
        • $(this).addClass('hover');
      • }, function() {
        • $(this).removeClass('hover');
      • });
    • Manipulating Attributes
      • //change the ”title” attribute of ”a” element where id=”some-id”
      • $('a#some-id').attr({'title': 'Some Text here'});
      • //more than one at a time
      • $('a#some-id').attr({
      • 'title':'Some Text here',
      • 'href':'www.example.com',
      • 'id':'some-other-id',
      • });
    • Changing the tag content
      • //eq of element.innerHTML()
      • $('#some-div').html()
      • //eq of element.innerHTML = some-var
      • $('#some-div').html(some-var)
      • //eq of some-input.value
      • $('input').val()
      • //eq of some-input.value = some-var
      • $('input').val(some-var)
    • AJAX
      • /* when a buttong with id=”some-button” is clicked load ”a.html” in div with id=”some-div” */
      • $('#some-button').click(function() {
      • $('#some-div').load('a.html');
      • });
    • AJAX + JSON
      • $('#some-button').click(function() {
      • $.getJSON('b.json');
      • });
    • Take action on data
      • $('#some-button').click(function() {
      • $.getJSON('b.json', function(data) {
      • // do some stuff with data you just go
      • });
    • Execute a script
      • $('#some-button').click(function() {
        • $.getScript('c.js');
      • });
    • Load other data formats
      • $('#some-button').click(function() {
      • $.get('my-format.data', function(data) {
          • //handle your data way you want
        • });
      • });
    • A GET request
      • $.get('e.php',
      • {'term': $(this).text()},
      • function(data) {
      • $('#some-div').html(data);
      • }
      • );
    • POST request
      • $.post('e.php',
      • {'term': $(this).text()},
      • function(data) {
      • $('#some-div').html(data);
      • }
      • );
    • AJAX observers
      • $('#loading'). ajaxStart (function() {
      • $(this).show();
      • }). ajaxStop (function() {
      • $(this).hide();
      • });
    • There is more
      • Loads of good quality plugins for
        • Extended AJAX functionality
        • Cool Effects
        • Extensions to core jQuery
        • much more
        • http://jquery.com/plugins
        • http://doc.jquery.com/Plugins
    • Resources
      • http://doc.jquery.com
      • www.visualjquery.com
      • www.Google.com
        • 15 days of jQuery (blog)
        • Learning jQuery (blog)
    •  
    • Thanks A Millions
      • ?
      QEUSTIONS