Hello World in a web project using jQuery_ASP.NET jQuery Cookbook（Second Edition）-QQ阅读男频科幻网

书名：ASP.NET jQuery Cookbook（Second Edition）
作者名：Sonal Aneel Allana
本章字数：344字
更新时间：2025-04-04 20:16:25

Hello World in a web project using jQuery

Until now, all recipes have demonstrated different ways to add the jQuery library to web pages. This is the first step in making the page jQuery-ready. In this recipe, let's move on to the next step: writing the jQuery code inside a script block to manipulate controls in a web form. We will display a simple Hello World message on the web page by manipulating a Label control on a web form.

Getting ready

Create a Web Application project by going to File | New | Project | ASP.NET Web Application. Select the Empty template. Name the project HelloWorld (or any other suitable name).
Add a new Web Form to the project.
Add the jQuery library files to the Scripts folder.
Add a reference to the jQuery library on the web form using any method of your choice.
Open the web form in the Design mode and drag and drop a Label control by navigating to the Toolbox | Standard controls. Change the properties of the Label control as follows:
```
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
```

How to do it…

If a jQuery reference is added to the <head> element, then include the following <script> block in the <head> element. Otherwise, include the <form> element, preferably before the <form> tag is closed:

<script type="text/javascript">
   $(document).ready(function () {
      var fontStyle = "Arial";
      var fontSize = 28;
      $("#<%=lblMessage.ClientID%>").css("font-family", fontStyle);
      $("#<%=lblMessage.ClientID%>").css("font-size", fontSize);
      $("#<%=lblMessage.ClientID%>").text("Hello World!!");
});
</script>

How it works…

Following are the steps to print Hello World!! in a web project using jQuery:

In the preceding jQuery code, the $ symbol is used to instantiate the jQuery object.
The .ready() function is triggered when the DOM is ready. It is commonly used to execute the required jQuery code on the page.
The Label control can be accessed from the jQuery code using ASP.NET's ClientID property and jQuery's #identifier selector.
Using the .css() property of the jQuery object, the font style, size, and text of the Label control are manipulated so that the following output is displayed on running the application: