DOSUG Intro to JQuery JavaScript Framework

55 %
45 %
Information about DOSUG Intro to JQuery JavaScript Framework

Published on May 13, 2008

Author: programr

Source: slideshare.net

Description

An Intro to the JQuery JavaScript Framework by Scott Damon Ryan of the Denver Open Source Users Group (DOSUG)

JQuery SCOTT RYAN MAY 2008 SCOTT@THERYANSPLACE.COM

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(quot;tablequot;); for ( var t = 0; t < tables.length; t++ ) { var rows = tables[t].getElementsByTagName(quot;trquot;); for ( var i = 1; i < rows.length; i += 2 ) if ( !/(^| s)odd(s|$)/.test( rows[i].className ) ) rows[i].className += quot; oddquot;; }

Table Striping (Prototype) $$(quot;tablequot;).each(function(table) { Selector.findChildElements(table, [quot;trquot;]) .findAll(function(row,i){ return i % 2 == 1; }) .invoke(quot;addClassNamequot;, quot;oddquot;); });

Table Striping (jQuery)   $(quot;tr:nth-child(odd)quot;).addClass(quot;oddquot;);

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   :submit   :checkbox   :selected   :checked   :text   :contains(text string)   :visible   :enabled   :disabled   :input   :hidden

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;#aTextFieldquot;).attr(quot;valuequot;,quot;testquot;)   $(‘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   append, appendTo   removeClass   prepend, prependTo   toggleClass   before,insertBefore   css(name,value)   after, insertAfter   width,height, css   wrap, wrapAll,wrapInner   hasClass, getClassNames   remove   html, html(data)   empty   text , text(data)   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

Add a comment

Related pages

DOSUG Intro to JQuery JavaScript Framework - 豆丁网

DOSUG Intro to JQuery JavaScript Framework,进行jQuery的api事件与方法以及插件的应用。但是本文档英文。
Read more

jQuery

Support from our corporate members makes it possible for the jQuery Foundation to continue our work on our JavaScript libraries ... Learning jQuery ...
Read more

Jquery, Javascript | LinkedIn

View 128927 Jquery, Javascript posts, presentations, experts, ... (HTML5,Javascript,jQuery,AngularJS) at Citrus Payment Solutions. Rajpipla Area, India.
Read more

jQuery Introduction - W3Schools Online Web Tutorials

jQuery AJAX Intro jQuery ... jQuery Introduction ... The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a ...
Read more

Introduction to JQuery - Oracle | Integrated Cloud ...

Intro to JQuery technical article, ... Introduction to JQuery ... Installing JQuery. JQuery is a JavaScript library, ...
Read more

Introduction - jQuery Mobile Demos

Introduction. jQuery Mobile is a touch-friendly UI framework built on jQuery Core that works across all popular mobile, ...
Read more

Introduction to jQuery Mobile - IBM - United States

As with the rest of the jQuery framework, jQuery Mobile ... title>Intro to jQuery Mobile Read more

Web 150 JavaScript jQuery - YouTube

Intro to jQuery. Category ... WEBプログラミングオンライン動画学習サービス『ウェブカツ!!』 javascript・jQuery部 ...
Read more

Introduction to jQuery in ASP.net Applications - CodeProject

Introduction to jQuery in ASP.net Applications; ... .NET Framework; Android; iOS; ... jQuery is a file of javascript code, ...
Read more