An Introduction to jQuery

  • 1,192 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,192
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
22
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • jQuery is a lightweight open source JavaScript library (only 15kb in size) that in a relatively short span of time has become one of the most popular libraries on the web. A big part of the appeal of jQuery is that it allows you to elegantly (and efficiently) find and manipulate HTML elements with minimum lines of code.  jQuery supports this via a nice "selector" API that allows developers to query for HTML elements, and then apply "commands" to them.  One of the characteristics of jQuery commands is that they can be "chained" together - so that the result of one command can feed into another.  jQuery also includes a built-in set of animation APIs that can be used as commands.  The combination allows you to do some really cool things with only a few keystrokes. For example, the below JavaScript uses jQuery to find all <div> elements within a page that have a CSS class of "product", and then animate them to slowly disappear: As another example, the JavaScript below uses jQuery to find a specific <table> on the page with an id of "datagrid1", then retrieves every other <tr> row within the datagrid, and sets those <tr> elements to have a CSS class of "even" - which could be used to alternate the background color of each row: [Note: both of these samples were adapted from code snippets in the excellent jQuery in Action book] Providing the ability to perform selection and animation operations like above is something that a lot of developers have asked us to add to ASP.NET AJAX, and this support was something we listed as a proposed feature in the ASP.NET AJAX Roadmap we published a few months ago.  As the team started to investigate building it, though, they quickly realized that the jQuery support for these scenarios is already excellent, and that there is a huge ecosystem and community built up around it already.  The jQuery library also works well on the same page with ASP.NET AJAX and the ASP.NET AJAX Control Toolkit. Rather than duplicate functionality, we thought, wouldn't it be great to just use jQuery as-is, and add it as a standard, supported, library in VS/ASP.NET, and then focus our energy building new features that took advantage of it?  We sent mail the jQuery team to gauge their interest in this, and quickly heard back that they thought that it sounded like an interesting idea too. Supporting jQuery I'm excited today to announce that Microsoft will be shipping jQuery with Visual Studio going forward.  We will distribute the jQuery JavaScript library as-is, and will not be forking or changing the source from the main jQuery branch.  The files will continue to use and ship under the existing jQuery MIT license. We will also distribute intellisense-annotated versions that provide great Visual Studio intellisense and help-integration at design-time.  For example: and with a chained command: The jQuery intellisense annotation support will be available as a free web-download in a few weeks (and will work great with VS 2008 SP1 and the free Visual Web Developer 2008 Express SP1).  The new ASP.NET MVC download will also distribute it, and add the jQuery library by default to all new projects. We will also extend Microsoft product support to jQuery beginning later this year, which will enable developers and enterprises to call and open jQuery support cases 24x7 with Microsoft PSS. Going forward we'll use jQuery as one of the libraries used to implement higher-level controls in the ASP.NET AJAX Control Toolkit, as well as to implement new Ajax server-side helper methods for ASP.NET MVC.  New features we add to ASP.NET AJAX (like the new client template support ) will be designed to integrate nicely with jQuery as well.  We also plan to contribute tests, bug fixes, and patches back to the jQuery open source project.  These will all go through the standard jQuery patch review process. Summary We are really excited to be able to partner with the jQuery team on this.  jQuery is a fantastic library, and something we think can really benefit ASP.NET and ASP.NET AJAX developers.  We are looking forward to having it work great with Visual Studio and ASP.NET, and to help bring it to an even larger set of developers. For more details on today's announcement, please check out John Resig's post on the jQuery team blog.  Scott Hanselman is also about to post a nice tutorial that shows off integrating jQuery with ASP.NET AJAX (including the new client templating engine) as well as ADO.NET Data Services (which shipped in .NET 3.5 SP1 and was previously code-named "Astoria"). Hope this helps, Scott Published Sunday, September 28, 2008 11:32 AM by ScottGu

Transcript

  • 1. Cleveland C#/VB.Net User Group February 24, 2009 Marv Schwartz [email_address]
  • 2.
    • … you write cascading style sheets (css)
    • … you write ASP.net software?
    • … you write javascript?
    • … you write jQuery?
    • … you enjoy writing javascript?
  • 3.
    • Why YOU might use jQuery
    • How to update VS-2008 for jQuery
    • Write some jQuery code
    • Ideas for debugging jQuery code
    • References
    • Sam Nasr has kindly agreed to post these slides on http://www.clevelanddotnet.info/ .
  • 4.  
  • 5.
    • Javascript has become essential to current web page development, but …
    • Javascript is not a good language design
    • Javascript has become bloated
      • DOM navigation
      • Browser differences
    • Writing Javascript code is tedious, time-consuming, and error-prone
  • 6.
    • jQuery makes writing Javascript much easier
      • DOM navigation (css-like syntax)
      • Apply methods to sets of DOM elements
      • Builder model (chain method calls)
      • Extensible and there are tons of libraries
      • Handles most browser differences so you don’t have to
    • Server provides data
    • jQuery on client provides presentation
  • 7.
    • Scott Guthrie is a Corporate Vice President in
    • the Microsoft Developer Division. He runs the development teams that build the following products/technologies:
    • CLR and the core .NET Base Class Libraries 
    • ASP.NET 
    • Silverlight
    • WPF
    • IIS 7.0
    • Visual Studio Tools for ASP.NET, WPF, Silverlight and Mobile
    • jQuery and Microsoft (Google ScottGu jQuery )
  • 8.
    • Scott Guthrie announced “… that Microsoft will be shipping jQuery with Visual Studio going forward.  We will distribute the jQuery JavaScript library as-is, and will not be forking or changing the source from the main jQuery branch.  The files will continue to use and ship under the existing jQuery MIT license.
    • We will also distribute intellisense-annotated versions that provide great Visual Studio intellisense and help-integration at design-time”
  • 9.
    • ScottGu, jQuery Intellisense in VS 2008 http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx
    • VS2008 sp1
    • KB958502-JScript Editor support for “-vsdoc.js” IntelliSense documentation files http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
  • 10.
    • February 7th, 2009
    • FLOSS Weekly 55: jQuery
    • Hosts: Randal Schwartz and Leo Laporte
    • jQuery, a lightweight JavaScript library emphasizing JavaScript and HTML interaction.
    • Guest: John Resig for jQuery
    • TWiT Wiki for this show
    • John Resig is the creator, project lead and the head of the development team of the jQuery JavaScript library, released in January, 2006. For Resig's day job he works as a JavaScript Evangelist for the Mozilla Corporation, where he does JavaScript testing, performance analysis, speaking, and writing. He's also the author of a number of other projects, including:
    • Sizzle : A cross-browser, standalone, JavaScript library for implementing CSS selector DOM selection in JavaScript, which is in the process of being integrated into jQuery, Prototype, Sizzle, YUI, and MochiKIt.
    • Processing.js : A port of the Processing visualization language to JavaScript (running in an HTML 5 canvas element).
    • Resig also speaks on the Open Web Podcast with Dion Almaer and Alex Russel, where they discuss web standards, JavaScript, and browsers. He's the author of the book "Pro JavaScript Techniques" and is working on his second book: "Secrets of the JavaScript Ninja" (due out in 2009)
  • 11.
    • HTML only
      • Text
      • Tables
    • ASP.net AJAX
  • 12.
    • ASP.net
    • No ScriptHandler
    • Uses WebMethods
    • Uses query string
  • 13.
    • Compress jQuery-1.3.2.js
    • or use Google to host jQuery http://code.google.com/apis/ajax/documentation/
    • Not needed: jQuery-1.3.2.vsdoc.js
  • 14.
    • Plugins: http://docs.jquery.com/Plugins
    • and Google returns many more
      • flot
      • SimpleModal
  • 15.
    • jQuery in Action
    • http://www.manning.com/bibeault/
    • chapter2lab selectors.html
    • chapter2lab.wrapped.set.html
  • 16.
    • http://jquery.com/
    • Scott Guthrie’s blog: http://weblogs.asp.net/scottgu/
    • Rick Strahl’s blog: http://www.west-wind.com/weblog/
    • Book: jQuery in Action
  • 17.
    • A problem with Google is that it finds outdated information as easily as current information. Integration with Visual Studio 2008 is improving quickly. Be wary of old hints. Some are unnecessary. Some break things.
    • Go code some cool web pages using jQuery.
    • Thank you.
    • Marv Schwartz
    • [email_address]