- Easily traverse the DOM without writing large chunks of JavaScript.
- Helps to change the CSS even after the page has been rendered.
- Easily alter the page content with minimal code.
- Efficient event handling.
- Animations to the page.
- Integrated with AJAX.
- JavaScript tasks such as array manipulations and iterations.
- Multiple actions in one line of code.
- Library file size is minimal.
Let’s create our first jQuery website. For this follow the steps outlined below.
- Open Visual Studio and add a new website, name is Part1
- Now we will add the jQuery js file we have downloaded. Right click the solution, Add Existing Item, open the folder where the file was downloaded. And click Ok.
- Now our solution will have the following structure.
- Open default.aspx and paste the following code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Part1._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script src="jquery-1.3.2.js" type="text/javascript"></script> <style type="text/css"> .oldstyle { margin: 0 2em; } .newstyle { font-style: italic; border: 1px solid #888; padding: 0.5em; color:Red; } </style> </head> <script type="text/javascript" language="javascript"> $(document).ready(function() { $('.oldstyle').addClass('newstyle'); }); </script> <body> <form id="form1" runat="server"> <div> <h1> Part 1</h1> <div> by Amal Hashim </div> <div class="oldstyle" id="part-1"> Easily traverse the DOM without writing large chunks of JavaScript. Helps to change the CSS even after the page has been rendered. Easily alter the page content with minimal code. Efficient event handling. Animations to the page. Integrated with AJAX. JavaScript tasks such as array manipulations and iterations. Multiple actions in one line of code. Library file size is minimal. </div> </div> </form> </body> </html>
- Right click the default.aspx file and View in browser.
Now the next question if when this code get’s executed. JavaScript is interpreted language, and it executes as and when it is encountered. But in our case, we want to have newstyle to be applied once the page gets loaded. One way to do this is using the onload event of the body tag. But in this case we will be modifying the HTML. But this is against the design pattern jQuery suggest, whose aim is to separate the tight coupling of HTML and JavaScript. To avoid this jQuery gives $(document).ready() construct. This does not require any HTML modification, on the other hand will get executed as and when the document is loaded. In our example we are using lambda function. Using the function keyword without method name, we are creating a method as and when its required. We mainly use lambda function as those methods are not being reused.
Hope all of you have read and had a good starting experience with jQuery. In Part 2 of this series i will cover in depth of how to select elements. jQuery supports XPath as well has jQuery’s own custom selector for traversing DOM. See you in Part 2.
No comments:
Post a Comment