How to use JQuery in Web Application? || Basic Sample Example to Create Web Application using Jquery

Creating  first Web application Using JQuery:

Step 1: Open Visual Studio

Step 2: Create a new web application Project(Web site...)

Step 3: Open master page of your web application.
Put this line of code, above </head>
<script type="text/javascript" language="Javascript" src=""></script>

Above line adds JQuery library reference to your web application, in simple terms with above line you web application understands JQuery syntax and work accordingly.

Step 4: Put following line of code in you content page inside <asp:Content>.  Below line will display "Hello World" alert when page loads.
<script language="javascript" type="text/javascript">
        $(document).ready(function () {
            alert("Hello World");             

Understanding  $(document).ready(function ():

 If you want an JQuery event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

$(document) - means page on which JQuery code lies.
.ready() - means page is loaded and your JQuery code is ready to be executed.

And for that reason you may find that most of JQuery code lies within

<script language="javascript" type="text/javascript">
        $(document).ready(function () {


So finally you will be able to display alert on page load in your web application with JQuery.





Post a Comment