Download to read offline
![4 of 18 Introduction to jQuery
jQuery basics
• Syntax
– $('select element').doSomething('info').doSomethingElse('more info');
• Selectors
– $('#txtSearchBox'): element with ID txtSearchBox
– $('.SelectedCell'): element(s) with class attribute SelectedCell
– $('#userGrid tr:even'): even rows of the element with ID userGrid
– $('input:checkbox[id$='chkDelete']'): input element(s) of the type
checkbox with ID that ends with chkDelete
– $('img.ImgLink[id$='imgOK'],img.ImgLink[id$='imgCancel']'): IMG
element(s) with class attribute ImgLink and ID ending with imgOK or
imgCancel
• Animations
– $(…).hide() $(…).show()
– $(…).fadeIn("fast") $(…).fadeOut("slow")
– $(…).slideUp(1000) $(…).slideDown(5000)
– …
9/3/2015](https://image.slidesharecdn.com/jquery-150903201008-lva1-app6891/75/Introduction-to-jQuery-4-2048.jpg)
![12 of 18
On pageLoad()
• pageLoad is not the same as $(document).ready
– pageLoad is called on initial page load and after every partial postback
– Can cause repeated event bindings
• One event (such as click) triggers event handler multiple times
• What to do?
– Call unbind before any defining any bindings for an element (selector)
function pageLoad(sender, args){
$('a[id$='ItemName']').unbind();
$('a[id$='ItemName']').click(function(e){…}
}
• See $(document).ready() and pageLoad()are not the same! by Dave Ward
– Or use live for event binding inside of $(document).ready:
$(document).ready(function(){
$('a[id$='ItemName']').live("click", function(e){…});
});
• live binds all current and future elements (selectors)
• live works for most common, but not all event types
• See jQuery live() and ASP.NET Ajax asynchronous postback by Arnold Matusz
Introduction to jQuery 9/3/2015](https://image.slidesharecdn.com/jquery-150903201008-lva1-app6891/75/Introduction-to-jQuery-12-2048.jpg)
![13 of 18 Introduction to jQuery
Find controls via jQuery
• If you do not know IDs of elements (e.g. in Repeater)
– Example: Make sure that check box A gets checked and disabled when
user checks box B (both check boxes belong to a repeater item and have
IDs chkA and chkB)
$('input:checkbox[id$='chkB']').click(function(e)
{
var elemID = $(e.target).attr('id');
var prefixID = elemID.replace(/chkB$/i, "");
var elemIDchkA = "#" + elemID.replace(/chkB$/, "chkA");
if (this.checked)
{
$(elemIDchkA).attr('checked', 'true');
$(elemIDchkA).attr('disabled', 'true');
}
else
$(elemIDchkA).removeAttr('disabled');
});
9/3/2015](https://image.slidesharecdn.com/jquery-150903201008-lva1-app6891/75/Introduction-to-jQuery-13-2048.jpg)
![14 of 18 Introduction to jQuery
What is $(this)?
• this can have different contexts
– Most common contexts
• Context #1: JavaScript DOM element
– Inside of a callback function (click, hover, …)
• Context #2: jQuery object
– Inside of custom jQuery function
• Context #3: JavaScript object
– Such as an array element
• What about $(this)?
– $(this) converts a DOM object into a jQuery object
• To convert a jQuery object to a DOM object use:
– $(…).get(0) or $(…)[0]
• See also
– What is this? By Mike Alsup
– jQuery's this: demystified by Remy Sharp
9/3/2015](https://image.slidesharecdn.com/jquery-150903201008-lva1-app6891/75/Introduction-to-jQuery-14-2048.jpg)
More Related Content
![[2015/2016] JavaScript](https://cdn.slidesharecdn.com/ss_thumbnails/04javascript-160321110338-thumbnail.jpg?width=640&height=640&fit=bounds)
Introduction to jQuery
- 1. Introduction to jQuery AlekDavis http://alekdavis.blogspot.com June 2010
- 2. 2 of 18Introduction to jQuery jQuery • Quick facts – JavaScript library (file) created by John Resig – Open source (MIT and GPL licenses; good for commercial use) – Current version: 1.4.2 – Size: ~155 KB (~24 KB minimized) – Browser support: IE 6+, Firefox 2+, Opera 9+, Safari 2+, Chrome – Actively developed – Large and active community – Used by many companies (Google, IBM, Amazon, Dell, Netflix, Intel, …) – Shipped with ASP.NET MVC Framework – Included with Visual Studio 2010 (and later) – 24/7 support by Microsoft through Product Support Services (PSS) • See also – Learning jQuery @ MIT (presented by John Resig at MIT) • More facts, performance benchmarks, key features 9/3/2015
- 3. 3 of 18Introduction to jQuery Learning jQuery • Web sites – http://jquery.com/ (downloads, docs, tutorials, bug tracker, forums) – http://www.learningjquery.com/ (tips, techniques, tutorials, RSS) • Tutorials/articles – jQuery for Absolute Beginners (15 short videos, about 5 minutes each) – An introduction to jQuery (Part 1: The Client Side) – Using jQuery with ASP.NET (Part 2: Making Ajax Callbacks to the Server) – Six Things Every jQuery Developer Should Know by Elijah Manor • Books – Learning jQuery: … by Karl Swedberg & Jonathan Chaffer – jQuery Reference Guide by Karl Swedberg & Jonathan Chaffer – jQuery in Action by Bear Bibeault & Yehuda Katz 9/3/2015
- 4. 4 of 18Introduction to jQuery jQuery basics • Syntax – $('select element').doSomething('info').doSomethingElse('more info'); • Selectors – $('#txtSearchBox'): element with ID txtSearchBox – $('.SelectedCell'): element(s) with class attribute SelectedCell – $('#userGrid tr:even'): even rows of the element with ID userGrid – $('input:checkbox[id$='chkDelete']'): input element(s) of the type checkbox with ID that ends with chkDelete – $('img.ImgLink[id$='imgOK'],img.ImgLink[id$='imgCancel']'): IMG element(s) with class attribute ImgLink and ID ending with imgOK or imgCancel • Animations – $(…).hide() $(…).show() – $(…).fadeIn("fast") $(…).fadeOut("slow") – $(…).slideUp(1000) $(…).slideDown(5000) – … 9/3/2015
- 5. 5 of 18Introduction to jQuery More jQuery • Common operations – $(…).preventDefaults(): prevents default behavior – $(…).attr(): sets/gets attribute value – $(…).css(): sets/gets CSS attribute value – $(…).val(): sets/gets value of a text input element (text box, text area) – $(…).text(): sets/gets text value of an element (span, etc) – … • Events – $(…).click(function(e){ … }): on click event handler – $(…).keydown(function(e){ … }): on key down event handler – $(…).hover(function(){ … }, function()): on hover (in and out) event handler – $(…).bind("eventX eventY …", …): binds one or more event to event hander – … 9/3/2015
- 6. 6 of 18Introduction to jQuery jQuery extras • jQuery UI – jQuery widgets • Handle drag-and-drop, sorting, resizing, selecting • Accordion, date picker, dialog, progress bar, slider, tabs controls • Effects (color animation, class transitions, theming) • Plugins – Third party widgets • User interface • Data manipulation • AJAX • … – See also: Plugins/Authoring • See also – http://docs.jquery.com/ (documentation) 9/3/2015
- 7. 7 of 18Introduction to jQuery jQuery demo • Features – Custom search box • Auto-show, auto-hide • Submit, cancel • Buttons and keyboard • Input validation 9/3/2015
- 8. 8 of 18Introduction to jQuery Browsers and tools • Firefox – Use IE Tab add-on to switch between Firefox and IE views – Use Web Developer add-on/toolbar for… lots of things – Use Firebug add-on for debugging • console.log is your friend – Use YSlow add-on to see performance score • Chrome – Use the built-in Developer Tools menu • Internet Explorer – Use Fiddler to debug HTTP traffic – Use Internet Explorer Developer Toolbar for debugging – Use IE7Pro add-on for "everything" else • Web tools – jQuery API Browser – Visual jQuery 9/3/2015
- 9. 9 of 18Introduction to jQuery Using jQuery in a project • Options – Option 1: Reference distribution source (Google) • Pros: Download speed, caching, proximity • Cons: External reference – Option 2: Make your own copy • Pros: Internal reference • Cons: Download speed (possibly) 9/3/2015
- 10. 10 of 18Introduction to jQuery jQuery and IntelliSense • The documentation (-vsdoc.js) file – Use for documentation only (it’s not functional) – If official version is not available (e.g. immediately after release) • Generate vsdoc file via InfoBasis JQuery IntelliSense Header Generator – Generated stub file contains no code (only comments, only works wit v.1.3) • Usage options – If using VS 2008 SP1 • Install hotfix KB958502 (see Visual Studio patched for better jQuery IntelliSense) • Add the vsdoc file to the project; do not reference it in code • Vsdoc file must have the same name as the original with –vsdoc suffix – If not using VS 2008 SP1 (also see the Resources slide) • Add the vsdoc file to the project • Wrap the vsdoc file in an invisible control (use appropriate name): <asp:Label Visible="false" runat="server"> <script src="../Scripts/jQuery-1.3.1-vsdoc.js" type="text/javascript" /> </asp:Label> • In JavaScript files, add at the top (use appropriate name): /// <reference path="jQuery-1.3.1-vsdoc.js"/> 9/3/2015
- 11. 11 of 18Introduction to jQuery jQuery code • Traditional jQuery code – Does not work after partial postback $(document).ready(function() // or $(function() { // JavaScript code here // … }); • ASP.NET AJAX-specific jQuery – Works after partial postback // $(function() function pageLoad(sender, args) { // JavaScript code here // … } // }); – But… 9/3/2015
- 12. 12 of 18 OnpageLoad() • pageLoad is not the same as $(document).ready – pageLoad is called on initial page load and after every partial postback – Can cause repeated event bindings • One event (such as click) triggers event handler multiple times • What to do? – Call unbind before any defining any bindings for an element (selector) function pageLoad(sender, args){ $('a[id$='ItemName']').unbind(); $('a[id$='ItemName']').click(function(e){…} } • See $(document).ready() and pageLoad()are not the same! by Dave Ward – Or use live for event binding inside of $(document).ready: $(document).ready(function(){ $('a[id$='ItemName']').live("click", function(e){…}); }); • live binds all current and future elements (selectors) • live works for most common, but not all event types • See jQuery live() and ASP.NET Ajax asynchronous postback by Arnold Matusz Introduction to jQuery 9/3/2015
- 13. 13 of 18Introduction to jQuery Find controls via jQuery • If you do not know IDs of elements (e.g. in Repeater) – Example: Make sure that check box A gets checked and disabled when user checks box B (both check boxes belong to a repeater item and have IDs chkA and chkB) $('input:checkbox[id$='chkB']').click(function(e) { var elemID = $(e.target).attr('id'); var prefixID = elemID.replace(/chkB$/i, ""); var elemIDchkA = "#" + elemID.replace(/chkB$/, "chkA"); if (this.checked) { $(elemIDchkA).attr('checked', 'true'); $(elemIDchkA).attr('disabled', 'true'); } else $(elemIDchkA).removeAttr('disabled'); }); 9/3/2015
- 14. 14 of 18Introduction to jQuery What is $(this)? • this can have different contexts – Most common contexts • Context #1: JavaScript DOM element – Inside of a callback function (click, hover, …) • Context #2: jQuery object – Inside of custom jQuery function • Context #3: JavaScript object – Such as an array element • What about $(this)? – $(this) converts a DOM object into a jQuery object • To convert a jQuery object to a DOM object use: – $(…).get(0) or $(…)[0] • See also – What is this? By Mike Alsup – jQuery's this: demystified by Remy Sharp 9/3/2015
- 15. 15 of 18 DebuggingjQuery code • Tools – Firebug (Firebug Lite) • Just use it – FireQuery • Allows injecting jQuery into Web pages that don't have it loaded – FireFinder • Finds selectors • Articles • How to Debug Your jQuery Code by Elijah Manor 9/3/2015Introduction to jQuery
- 16. 16 of 18Introduction to jQuery What's next? • Interesting topics – Client templates in ASP.NET 4.0 AJAX – jQuery plugins – jQuery UI – Internationalization 9/3/2015
- 17. 17 of 18Introduction to jQuery Videos • Presentations/talks/demos/videocasts/samples – Performance Improvements in Browsers by John Resig at Google (92 min) – MIX08 Presentation : Real-World AJAX with ASP.NET Video by Nikhil Kothari (references to presentations/demos/talks/samples) – ASP.NET 3.5: Adding AJAX Functionality to an Existing ASP.NET Page by Todd Miranda – ASP.NET Podcast Show #128 - AJAX with jQuery by Wallace B. (Wally) McClure 9/3/2015
- 18. 18 of 18Introduction to jQuery Resources • JavaScript – Create Advanced Web Applications With Object-Oriented Techniques by Ray Djajadinata • jQuery – The Grubbsian: jQuery (a few interesting articles) – jQuery for JavaScript programmers by Simon Willison • jQuery, ASP.NET, AJAX – Tales from the Evil Empire by Bertrand Le Roy – Blog - Microsoft .NET, ASP.NET, AJAX and more by Visoft, Inc. • IntelliSense – JQuery 1.3 and Visual Studio 2008 IntelliSense by James Hart – (Better) JQuery IntelliSense in VS2008 by Brad Vin – JScript IntelliSense FAQ • Rich Internet Applications (RIA) – Developing rich Internet applications (RIA) by Alek Davis (links to many samples) • CSS – Which CSS Grid Framework Should You Use for Web Design? 9/3/2015
Editor's Notes
- #2 Introduction to jQuery