What is jQuery? Explain jQuery with simple example.

Content:

What is jQuery?
Example

What is jQuery:

jQuery is library which is written on the top of Java Script language. This jQuery library will reduce the developer work.

Now we will see how jquery library works and how it will reduces the developers job.

Example:

Assume, we have one text box in our page as shown below:

<html>
    <head>
        <title>jQuery - Simple Example</title>
    </head>
    <body>
        <input type="text" id="txtName" />
    </body>
</html>

Now i will update text box data by using java script.

<script language="javascript">
    document.getElementById("txtName").value = "jQuery example";
</script>

If we use jquery library, this can be simplified as shown below:

<script language="javascript">
    //document.getElementById("txtName").value = "jQuery example";
    $("#txtName").val("jQuery example");
</script>

To run above script we need include jquery library as shown below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

We can download jquery library from jquery website. And include that jquery file in your html/aspx/other page.

In the above, we are referencing jquery file from Google CDN. If you want you can refer from other other CDN's as well. CDN means Content Delivery Network. Ref. Other CDNs

Here we need to understand two things: 1). What is $ 2). val()

To select an element in jquery we start with $ followed by element id. Element id is prefixed with hash(#). document.getElementById("txtName") is equivalent to $("#txtName"). val() is a function which is used to set value or get value of input element.

Full source code:

<html>
    <head>
        <title>jQuery - Simple Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="txtName" />
        <script language="javascript">
            //document.getElementById("txtName").value = "jQuery example";
            $("#txtName").val("jQuery example");
        </script>
    </body>
</html>

Updated
May 15, 2017
Views
3,743