jQuery is an open source library that simplifies the way JavaScript is written. It works across all modern browsers and is lightweight. You can use it for a variety of client-side programming tasks, such as selecting items inside your page, manipulating those items, changing styles, doing animations and effects, handling user events on the client side, and calling web services by using AJAX. There are also several plug-ins available for jQuery that provide rich controls that execute
inside a browser window.
Visual Studio 2010 and ASP.NET 4 now fully support jQuery for client-side development. The jQuery library is installed by default when you create a new ASP.NET website.
jQuery is simply a file of JavaScript code that allows you to more easily write JavaScript code that runs in many different browsers. This code can do many things; it can work with UI styles, handle user events, animate parts of your page, call back to the server via AJAX, and more.
The jQuery library has a core set of features on which you can build. In fact, there are many extensions and plug-ins available for jQuery that help with menus, UI controls, page layout, navigation, and much more. The following list outlines the essential functionality that jQuery provides.
- Core The core of the jQuery library allows you to identify code that can execute only after a document has fully loaded, create DOM elements dynamically, iterate selected
elements, create extensions to jQuery itself, and more. - Selecting jQuery’s power is in its ability to quickly select items in the DOM. You can easily return a single item from your page’s DOM or many items that match a pattern without having to write much code. You use the jQuery selectors to find specific HTML tags or to find form elements by ID, cascading style sheet class name, attribute or attribute value, and more.
- Filtering and Traversing You can create filters to select only those DOM elements that meet your filter criteria. You can also traverse through your selection and act upon the selected items (by changing their style or adding an event, for example). Some important filter and traverse functions are first, last, odd, visible, match, selected, contains, enabled, find, next, prev, parent, and siblings.
- Manipulation After you have selected an item (or multiple items), you can also use jQuery to manipulate the item. This might be as simple as evaluating the HTML contents or setting the text contents of the selected item. You can also use functions such as append, insert, replaceWith, wrap, and remove (among others) to add, modify, or remove content from the selected DOM item.
- Cascading style sheets jQuery also provides functions for working with cascading style sheets. This includes finding and setting styles, positioning items, setting height and width, and more.
- Events The jQuery library allows you to attach client code to user events in the browser. This decouples your event code from the actual markup. You can handle almost any user input event, including hover, toggle, click, dblclick, keydown, keyup, focus, mousedown, mouseenter, mouseleave, scroll, resize, and more.
- Animation and Effects jQuery provides functions for adding effects to and animating the items on your page. Functions include show, hide, fadeIn, fadeOut, fadeTo, slideDown, slideUp, animate, and more.
- AJAX The jQuery library supports AJAX calls from the browser to the server. It allows you to call a web service or client script on the server and return the results to the page without refreshing the entire page
- Utilities There are several utility functions inside the jQuery language for working with browser compatibility, arrays, strings, and more.
The jQuery language is contained in a single file, jquery-
which version is the current version (1.4.1 at the time of this writing).
The jquery-1.4.1-vsdoc.js file is used by Visual Studio to provide IntelliSense in the text editor for jQuery code. Visual Studio simply looks for this file based on the naming convention and will provide the appropriate IntelliSense. The jquery-1.4.1.js file is the debug version of jQuery. This is a version of the code that is readable. You will want to reference this file in your code when you are debugging your client scripts. The jquery-1.4.1.min.js file is the “minified” version of the jQuery language. You use this file for production applications because it is a smaller client download and executes faster.
The jQuery language files are actually hosted by several content delivery networks (or CDNs). This ensures faster downloads and caching of the jQuery language. Microsoft provides a CDN host of jQuery at http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js.
You can use this URL to reference the jQuery language in your production applications.
Where to go from here?
- Official web site
- Online documentation
- Wikipedia
- jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.
