Introduction to JQuery
Upcoming SlideShare
Loading in...5
×
 

Introduction to JQuery

on

  • 6,398 views

Presentation at Denver Open Source Users\' Group and the Colorado Springs Open Source User\'s Group on JQuery

Presentation at Denver Open Source Users\' Group and the Colorado Springs Open Source User\'s Group on JQuery

Statistics

Views

Total Views
6,398
Slideshare-icon Views on SlideShare
6,345
Embed Views
53

Actions

Likes
6
Downloads
204
Comments
1

7 Embeds 53

http://scottryansblog.blogspot.com 31
http://scryan7371.onsugar.com 8
http://www.linkedin.com 8
http://www.slideshare.net 3
http://soaringeagleco.com 1
http://webcache.googleusercontent.com 1
https://www.linkedin.com 1
More...

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks for sharing
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to JQuery Introduction to JQuery Presentation Transcript

    • SCOTT RYAN MAY 2008 [email_address] JQuery
    • Agenda
      • Web Development Introduction
      • JQuery Introduction
      • Selectors
      • Modifiers
      • Events
      • Animation
      • Ajax
      • Plugins
    • Best Practices
      • Separation of Concerns
        • HTML – Layout
        • CSS – Look and Feel
        • JavaScript – Event Handling and Dynamic Behavior
        • Ajax – Remote access and dynamic data
    • Why JQuery
      • Captures standard pattern
        • Select ,add or filter, manipulate, repeat
        • Unobtrusive JavaScript
      • Table Striping Example
    • Table Striping (Dom Code)
      • var tables = document.getElementsByTagName("table");
      • for ( var t = 0; t < tables.length; t++ )
      • {
      • var rows = tables[t].getElementsByTagName(&quot;tr&quot;); for ( var i = 1; i < rows.length; i += 2 ) if ( !/(^|s)odd(s|$)/.test( rows[i].className ) ) rows[i].className += &quot; odd&quot;;
      • }
    • Table Striping (Prototype)
      • $$(&quot;table&quot;).each(function(table)
      • {
      • Selector.findChildElements(table, [&quot;tr&quot;]) .findAll(function(row,i){ return i % 2 == 1;
      • }) .invoke(&quot;addClassName&quot;, &quot;odd&quot;);
      • });
    • Table Striping (jQuery)
      • $(&quot;tr:nth-child(odd)&quot;).addClass(&quot;odd&quot;);
    • JQuery Wrapper
      • $(selector) or jQuery(selector)
      • Returns an array of Dom elements
      • Includes many methods
        • Example
          • $(“div.fademeout”).fadeOut();
      • Can be chained and always return a new array of elements
      • Supports CSS selectors and custom selectors
    • Document Ready Handler
      • $(document).ready(function(){});
      • $(function(){});
        • Runs when DOM is loaded
        • Cross Browser
        • Don’t need to wait for resources
    • Extending JQuery
      • $.fn.samplefunc = function()
          • {
          • Return
          • this.each(
          • function(){code goes here});
          • }
      • $(‘#sample’).samplefunc().addClass(‘NewClass’);
    • Other Libraries
      • jQuery.noConflict();
    • Select
    • Selectors
      • Generic
        • Element Name (a, p, img, tr, etc)
        • ID (#theId)
        • Class (.theclassname)
          • a#theId.theclassname
          • p a.theclassname
      • Parent – Child
        • ul.myList > li > a
    • Positional Selectors
      • :first
      • :last
      • :first-child
      • :last-child
      • :only-child
      • :nth-child(2)
      • :nth-child(even)
    • Special Selectors
      • :button
      • :checkbox
      • :checked
      • :contains(text string)
      • :enabled
      • :disabled
      • :input
      • :hidden
      • :submit
      • :selected
      • :text
      • :visible
    • Managing the Wrapped Set
      • size
      • get(x)
      • index(element)
      • add(expression)
      • not(expression)
      • filter(expression)
      • Slice(begin, end)
    • Selection Demo
      • $(‘#hibiscus’)
      • $(‘img[alt],img[title]’)
      • $('img[alt]').add('img[title]')
      • $('li > a')
      • $('li > a:first')
      • $(&quot;#aTextField&quot;).attr(&quot;value&quot;,&quot;test&quot;)
      • $(‘input[type=text]’)
      • $(‘a[href$=.pdf]’)
      • $(‘div[title^=my]’)
    • More Sample Selectors
      • $(‘li:has(a)’);
      • $(‘li a’);
    • Create/Filter/Manipulate
    • Creating HTML
      • $(“<div>Hello</div>”) or $(“<div>”)
      • $(“<div class=‘foo’>I have Foo</div><div>I Don’t</div>”)
      • .filter(“.foo”)
      • .click(function(){alert (‘I am Foo’);})
      • .end()
      • .appendTo(“#somedivoutthere”);
    • DOM Manipulation
      • Each accesses every element in the wrapped set
      • Attr get and set values
        • Can use json syntax
        • Attr(title:’test’, value:’yes’)
        • removeAttr
        • $(“a[href^http://]”).attr(“target”,”_blank”);
    • More Manipulation
      • addClass
      • removeClass
      • toggleClass
      • css(name,value)
      • width,height, css
      • hasClass, getClassNames
      • html, html(data)
      • text , text(data)
      • append, appendTo
      • prepend, prependTo
      • before,insertBefore
      • after, insertAfter
      • wrap, wrapAll,wrapInner
      • remove
      • empty
      • replaceWith (after.remove)
    • Replacing Elements
      • $(‘#divToReplace’)
      • .replaceWith(‘<p>This is new Data</p>’)
      • .remove();
    • Events and Event Model
      • Dom Level 0 Event Model
        • Single Events
        • Event Class (Proprietary)
      • Dom Level 2 Event Model
        • Multi Event
        • Event Class
        • Non IE
      • IE Event Model
      • Propagation (Bubble and Capture)
    • JQuery Event Model
      • Unified Event Model
      • Unified Event Object
      • Supports Model 2 Semantics
      • Propagation
        • Cascade
        • Bubble
    • Event Semantics
      • bind(eventType,data,listener)
      • eventTypeName(listener)
      • one(eventType, data,listener)
      • unbind(eventType, listener)
      • unbind(event)
      • trigger(eventType)
      • toggle(oddListener,evenListener)
    • Simple Bind
      • $(function(){
      • $(‘#sample’)
      • .bind(‘click’,clickOne)
      • .bind(‘click’,clickTwo)
      • .bind(‘click’,clickThree)
      • .bind(‘mouseover’,mouse);
    • Event Sample (Toggle/Inline)
      • $(function(){
      • $(‘#sample’).toggle(
      • function(event){
      • $(event.target).css(‘opacity’0.4);},
      • function(event){
      • $(event.target).css(‘opacity”,1.0;}
      • );
      • });
    • Event Sample (Hover/External)
      • $(‘#sample’)
      • .bind(‘mouseover’ , report)
      • .bind(‘mouseout’ , report);
      • function report (event) {
      • $(‘#output’).append(‘<div>’+event.type+’</div>’);
      • }
      • $(‘#sample’).hover(report , report);
    • Animation and Effects
      • show (speed, callback)
      • hide(speed, callback)
      • toggle(speed, callback)
        • Callback is a function that is passed a reference to this as the calling element.
      • fadeIn, fadeOut, fadeTo
      • slideDown, slideUp, slideToggle
      • Custom animations
    • JQuery Utility Functions
      • browser, box model, float style flags
      • trim
      • each
      • grep
      • inArray, makeArray, unique, extend
      • getScript
    • Plugins
      • Complex extensions
      • Should be developed to work with other libraries
      • Custom Utility functions
      • Custom wrapped methods
      • Form, Dimensions, Live Query, UI, MarkitUp
      • Beware of the $ but not too timid
      • Naming jquery.pluginname.js
      • Parameter Tricks
    • Ajax
      • load (url, parameters, callback)
      • serialize, serializeArray
      • get
      • getJSON
      • post
      • ajax