1 / 26

Enhancing Web Development with jQuery and JSSpec: A Comprehensive Guide

This guide, authored by Philip Japikse, delves into the essentials of jQuery and the JSSpec testing framework to make web development more approachable and efficient. It covers fundamental concepts such as DOM manipulation, event handling, and the use of CSS selectors, along with advanced features like managing wrapped sets and behavior-driven development. Aimed at developers of all skill levels, this resource emphasizes best practices and offers practical examples for applying jQuery effectively in modern web applications.

dalton-woods
Télécharger la présentation

Enhancing Web Development with jQuery and JSSpec: A Comprehensive Guide

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JQuery and JSSpecMaking the Web Developer Friendly Philip Japikse phil.japikse@telerik.com MVP, MCSD.Net, MCDBA, CSM, CSP Patterns & Practices Evangelist Telerik

  2. Who am I? • Patterns & Practices Evangelist, Telerik, Inc. • Microsoft MVP • MCSD, MCDBA, CSM, CSP • Coder/Speaker/Writer • Lead Director, Cincinnati .NET User’s Group • Founder, Agile Conferences, Inc.

  3. Motivation • Browsers stink

  4. JSSpec • Behavior Driven Development style test Framework for JavaScript • http://jania.pe.kr/aw/moin.cgi/JSSpec • Include: • diff_match_patch.js • JSSpec.css • JSSpec.js <script type="text/javascript"> // <![CDATA[ describe('When selecting by id (#I)', { 'Should Return one element in wrapped set with id I': function () { (expect$('#fieldSetID').size()).toEqual(1); } });

  5. JQuery • Unobtrusive JavaScript • CSS Selectors (plus more) • http://docs.jquery.com/Selectors • Managing Wrapped Sets • DOM Manipulation • Event Handling • Extensible

  6. Unobtrusive JavaScript • Ready Function • Fires when the DOM is loaded (doesn’t wait for media) • $(document).ready(function() {}); • $(function(){}); • Separates markup from programming • (wrapped set).action • click • toggle • hover • etc

  7. Which Browser? • If browser type and version are needed • Browser Check • $.browser.msie • $.browser.mozilla • $.browser.safari || $.browser.webkit • $.browser.opera • Version Check • $.browser.version • Better method • $.support $("p").html("This frame uses the W3C box model: <span>" +jQuery.support.boxModel + "</span>");

  8. CSS Selectors • Id (#foo) • Element (table#foo) • Element Type (a) • Parent child* (table tr) • Parent (direct)child* (table > tbody) • sibling(immediately preceded by) (td+a) • Sibling (preceded by) (td ~ a) • Element has descendent (tr:has(a)) • Element has class (a.classname) • All that has class (.classname)

  9. More CSS Selectors • Element has attribute (a[style]) • Element has attribute (case sensitive) • With value (a[style=“height: 100%”]) • Value begins with (a[style^=“height”] • Value ends with (a[style$=“100%”]) • Value contains (a[style*=“10”]) • Positional • First (E:first) • Last (E:last)

  10. And finally… • Child calcs • First Child (e:first-child) • Last child (tr:last-child) • Only Child (E:only-child) • Nth child (tr:nth-child(n)) • Even/Odd (tr:nth-child(even))

  11. JQuery Selector Additions • Element Type • :button • :submit • :checkbox • :radio • :text • :input • :header • Others • :contains • :checked • :parent • :hidden/:visible • :disabled/:enabled • :not

  12. Managing Wrapped Sets • .size() – Count of items • .get(x)/.get() – return item/all items • .index(elem) – Position of item in set • .add(<selector>) – Include into set • $(<selector1>,<selector2>) • $(<selector1>).add(<selector2>) • .not(<selector>) - Exclude from set • .filter(function(){}) • $('tr').filter(function() { return this.innerHTML.match('Row 1') }) • .slice(start,finish) - create a new set from range of elements in original set

  13. More Wrapped Set Fun • .children() – get unique children of all items • .contents() – get contents of all items • .next() – get unique next siblings • .nextAll() – get all following siblings • .prev() – get unique next siblings • .prevAllAll() – get all following siblings • .parent() – get immediate parent of items • .parents() – get all parents of items • .siblings() – get all siblings of items

  14. Even More Wrapped Set Fun • .find(<selector>) – new set with search • .contains(<text>) – set from current where items contain <text> • .clone() – create new wrapped set • .end() – back up in chain to previous set • .andSelf() – merges two sets in method chain into one wrapped set • .is(<selector>) – validates that at least one item passes selection criteria

  15. Reading/Changing Set Elements • JS iterator • .each(function() {$(this).html(<html>);}); • Getting/Changing Element Values • .val() - Get’s value of first element • .val(<value>) - Set’s value of all elements • .val(<values>) – set all wrapped Check/Radio/Options to be set if match found with values passed in • Getting/Changing Element HTML • .html() – returns html from first item in set • .html(<html>) – sets html for all items in set • Clearing Content • .remove() – removes all elements from the DOM • .empty() – removes contents of elements from the DOM

  16. DOM Manipulation • Append Elements • .append(<html>|<selector>|object) • .appendTo(<html>|<selector>) • Wrapping Elements • .wrap(<html>|<selector>) • .wrapAll(<html>|<selector>) • .wrapInner(<html>|<selector>)

  17. CSS/Attribute Options • Attributes • .attr(<attribute name>,value || <list>,value) • .removeAttr(<attribute name>) • CSS Styles • .css(<property>,<value>) • CSS Classes • .addClass(<class name>) • .hasClass(<class name>) • .toggleClass(<class name>) • .removeClass(<class name>)

  18. Event Handling • Use wrapped sets to bind | unbind events • No more mixing Code + Markup • General format • .bind(<event>,optional <data>,function(e) {} ); • $(‘table’).bind(‘click’, function(e) { alert(‘foo’);}); • .unbind(<event>) • Shortcuts (just a few of them) • mouse • over/out/down/up/move • blur/focus/change/(dbl)click/select • (un)load/submit/error • keydown/keypress/keyup

  19. More Event Handling • Special • .hover(<Func>,<Func>) • replaces mouseover/mouseout • .one(<event>,optional <data>, <func>) • Unbind after first execution • trigger(<event>) • toggle(<Func Even>,<Func Odd>) • Each click switches the event handler

  20. Effects • Speed • “slow”, ”normal”, ”fast”, # milliseconds • Callback • Called when animation completes • Context (this) set to the element target for animation • Opacity • Value from 0 (invisible) to 1 (visible) • Forcing a stop • .stop()

  21. Effects • Visibility • Hide/Show • .hide(<speed>, <callback>) • .show(<speed>, <callback>) • .toggle(<speed>, <callback>) • Fades • .fadeOut(<speed>, <callback>) • .fadeIn (<speed>, <callback>) • .fadeTo (<speed>, <opacity>, <callback>) • Slides • .slideDown(<speed>, <callback>) • .slideUp(<speed>, <callback>) • .slideToggle(<speed>, <callback>)

  22. Extensibility • www.plugins.jquery.com • UI Plug-in • http://jqueryui.com/download • Form Plug-in • http://plugins.jquery.com/project/form

  23. Contact Me • phil@telerik.com • www.skimedic.com/blog • www.twitter.com/skimedic • Telerik • www.twitter.com/Telerik • www.facebook.com/Telerik

  24. Stay up to date with MSDN Belux • Register for our newsletters and stay up to date:http://www.msdn-newsletters.be • Technical updates • Event announcements and registration • Top downloads • Follow our bloghttp://blogs.msdn.com/belux • Join us on Facebookhttp://www.facebook.com/msdnbehttp://www.facebook.com/msdnbelux • LinkedIn: http://linkd.in/msdnbelux/ • Twitter: @msdnbelux DownloadMSDN/TechNet Desktop Gadgethttp://bit.ly/msdntngadget

  25. TechDays 2011 On-Demand • Watchthis session on-demand via Channel9http://channel9.msdn.com/belux • Download to your favorite MP3 or video player • Get access to slides and recommended resources by the speakers

  26. THANK YOU Stop by the Telerik Booth and say “hi”

More Related