Introduction to JQuery and JSSpec for Web Developers
Dive into the world of JQuery and JSSpec with expert guidance from Philip Japikse, a seasoned Patterns & Practices Evangelist at Telerik. Explore the power of Behavior Driven Development, Unobtrusive JavaScript techniques, and CSS Selectors. Discover helpful tips on managing wrapped sets, DOM manipulation, event handling, and more to enhance your web development skills.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
JQuery and JSSpec Making the Web Developer Friendly Philip Japikse phil.japikse@telerik.com MVP, MCSD.Net, MCDBA, CSM, CSP Patterns & Practices Evangelist Telerik
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. 2/20/2 025 2
Motivation Browsers stink 2/20/2 025 3
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); } }); 2/20/2 025 4
JQuery Unobtrusive JavaScript CSS Selectors (plus more) http://docs.jquery.com/Selectors Managing Wrapped Sets DOM Manipulation Event Handling Extensible 2/20/2 025 5
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 2/20/2 025 6
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>"); 2/20/2 025 7
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) 2/20/2 025 8
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) 2/20/2 025 9
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)) 2/20/2 025 10
JQuery Selector Additions Element Type :button :submit :checkbox :radio :text :input :header Others :contains :checked :parent :hidden/:visible :disabled/:enabled :not 2/20/2 025 11
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 2/20/2 025 12
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 2/20/2 025 13
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 2/20/2 025 14
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 2/20/2 025 15
DOM Manipulation Append Elements .append(<html>|<selector>|object) .appendTo(<html>|<selector>) Wrapping Elements .wrap(<html>|<selector>) .wrapAll(<html>|<selector>) .wrapInner(<html>|<selector>) 2/20/2 025 16
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>) 2/20/2 025 17
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 2/20/2 025 18
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 2/20/2 025 19
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() 2/20/2 025 20
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>) 2/20/2 025 21
Extensibility www.plugins.jquery.com UI Plug-in http://jqueryui.com/download Form Plug-in http://plugins.jquery.com/project/form 2/20/2 025 22
Contact Me phil@telerik.com www.skimedic.com/blog www.twitter.com/skimedic Telerik www.twitter.com/Telerik www.facebook.com/Telerik 2/20/2 025 23
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 blog http://blogs.msdn.com/belux Join us on Facebook http://www.facebook.com/msdnbe http://www.facebook.com/msdnbelux LinkedIn: http://linkd.in/msdnbelux/ Twitter: @msdnbelux Download MSDN/TechNet Desktop Gadget http://bit.ly/msdntngadget
TechDays 2011 On-Demand Watch this session on-demand via Channel9 http://channel9.msdn.com/belux Download to your favorite MP3 or video player Get access to slides and recommended resources by the speakers
THANK YOU Stop by the Telerik Booth and say hi
