This recipe demonstrates how to write a simple jQuery code to display Hello World in the ASP.NET MVC project.
Following are the steps to write simple jQuery code:
Open the Index view, and add the following markup to the
<body>element:<div id="divMessage"> </div>In the
<head>element, include the following jQuery code:<script type="text/javascript"> $(document).ready(function () { var fontStyle = "Arial"; var fontSize = 28; $("#divMessage").css("font-family", fontStyle); $("#divMessage").css("font-size", fontSize); $("#divMessage").text("Hello World!!"); }); </script>Right-click on the Index view, and select View in Browser (Internet Explorer).
Following are the steps to print Hello World in ASP.NET MVC using jQuery:
The
$symbol is used to instantiate thejQueryobject.The
.ready()function is triggered when the DOM is ready. It is commonly used to execute the required jQuery code on the page.The HTML
<div>element withid = "divMessage",which is used to display the Hello World message, can be accessed using its ID with jQuery's#identifierselector—that is, using the#divMessageselector.Using the
.css()property of thejQueryobject, the font style, size, and text of the<div>element are manipulated so that the following output is displayed on running the application: