The main focus of the JQuery library has always been to simplify the way you access the elements in your web pages, provide help in working with client-side events, enable visual effects like animation, and make it easier to use Ajax in your applications.
An Introduction to jQueryThe main focus of the jQuery library has always been to simplify the way you access the elements in your web pages, provide help in working with client-side events, enable visual effects like animation, and make it easier to use Ajax in your applications. In January 2006, Jhon Resign announced the first version of jQuery, that was followed by an official release of jQuery 1.0 in August 2006. Many more versions would follow, with version 1.4.1 as a stable release.Note: You can download the latest version of jQuery from the official web site at http://jquery.comChoosing the Location for Your jQuery Reference
Adding the reference to jQuery in the master page of your site is quite convenient, because all pages based on this master page automatically get access to the jQuery functionality. However this can affect the performance of your first page because the libraries mst be downloaded from the server.Various Ways To Include The jQuery LibraryBecause the jQuery library is a single file with JavaScript code, you can embed a reference to the library in a page, user control, or master page using the standerd <script> syntax:<script src="FileName" type="text/javascript"> </script>It is good practice to store all script files in one folder in the root of your site as shown in the following figure.
In the above case your reference to jQuery will look like:<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>Another alternative is to refer to an online version of the library with Microsoft's Content Delivery Network (CDN). For more information about that, visit : www.asp.net/ajax/cdn Selecting Items Using jQueryIn jQuery you use the dollar sign($) as a shortcut to find an element in your page. The elements that are found and returned are referred to as a matched set. The basic syntax for the $ method is:$('Selector Here') Basic SelectorsUniversal SelectorJust like CSS, a universal selector matches all the elements in your page.$('*').css ('font-family', 'Arial');ID SelectorThis selector finds and retrieves the elements by its ID. For example:$ ('#Button1 ').addClass(' NewClassName'): Element SelectorThis selector gets a reference to zero or more elements that match the specific tag name.$('h2').css ('color', 'blue');Class SelectorThis selector gets a reference to zero or more elements that match the specific class name. Consider the following HTML code:<h1 class="Highlight">Demo of jQuery </h1><h2>Heading 2</h2><p class="Highlight"> first paragraph</p><p>Second Paragraph</p>Notice how two of the four elements have a CSS class called Highlight. The following jQuery code changes the background color of the first heading and the first paragraph to red, leaving other elements unmodified:$(' . Highlight'). css ('background-color', 'red');Grouped and Combined SelectorsJust as with the CSS, you can group and combine selectors. The following grouped selector changes the text color of all h1 and h2 elements in your page.$( 'h1 , h2 ').css ('color', 'orange');IntelliSence for jQueryIntelligence for jQuery work through the extra file --> jquery-1.4.1-vsdoc.jsAfter adding a reference to the file specified above in your web page you will get intelligence for jQuery code in VWD as in the following.TRY IT OUT
<form id="form1" runat="server">
<div>
<h1>JQuery Demo Part 1</h1>
</div>
<table id="DemoTable">
<tr>
<td>
<b>Row 1 Cell 1</b>
</td>
<b>Row 1 Cell 2</b>
</tr>
<b> Row 2 Cell 1</b>
<b>Row 2 Cell 2</b>
<b>Row3 Cell 1</b>
<b>Row3 Cell 2</b>
</table>
<input id="Button1" type="button" value="Red" />
<input id="Button2" type="button" value="Blue" />
</form>
Write the following jQuery code in the Head tag of HTML source view:
<script type="text/javascript">
$(function () {
$('#DemoTable').css('background-color', 'green');
$('#Button1').click(function () {
$('#DemoTable').css('background-color', 'red');
});
$('#Button2').click(function () {
$('#DemoTable').css('background-color', 'blue');
</script>
Save all your changes and press F5 to run the application. If everything goes well then you will see in the browser that the table background is green as shown in the following figure:
Click on the red button, you will see the background color change to red as shown in the following figure:
In the same way, click on the blue button, you will see the background color change to blue as shown in the following figure:
SummaryIn this article you were introduced to jQuery, a very popular, open source, client-side JavaScript framework for interacting with the Document Object Modeling (DOM).
Pro WPF: Windows Presentation Foundation in .NET 3.0