Jquery document ready function

In this jquery tutorial we will learn how to use document ready function $(document).ready(function () {}, and attach jquery event with any html element using “id” or “class” property.

You also learn basic jquery syntax structure, you will be able to write any jquery function, make sure you have added the correct jquery file reference to your html page.

jQuery framework has been written using JavaScript, So, you can use all JavaScript functions and Syntax while writing jQuery.

$(document).ready(function () {
        // here we write our code
});

The above function check if the document is loaded completely, so all elements are rendered, and we can access them by tag name or id

The jQuery has ready library that enable us using the power of Cascading Style Sheets by providing a mechanism to easily access elements or groups of elements in DOM (Document Object Model).

Before you start learning jQuery, you should have a basic idea of HTML, CSS and JavaScript

Jquery $() factory function

jQuery selectors start with the $() (dollar sign and parentheses) . The factory function $() helps selecting elements in three different way.

  • Tag Name

    Use any tag name available in the DOM, example $('div') or $('p') selects all <div> or <p> in the document.

  • Tag ID

    Use any tag id that match with ID in the DOM. example $('#dvStudent') selects the element in the document that has ID="dvStudent".

  • Tag Class

    Use any tag class that match with class in the DOM. example $('.dvTeacher') selects the element in the document that has class="dvTeacher" or cssClass="dvTeacher".

jQuery Example

Here as example we have added one div for student with a unique id and multiple div(s) for teacher who are congratulating student, using jQuery we have added some CSS properties to Div(s)

Here is the output

Hello World, I am a student, learning jQuery, this is my space!
Teacher Melisa: Hey... kepp learning.. jQuery is fun!
Teacher Arunavo: Good!.. See..How multiple CSS properties added using jQuery!

Now let's understand what code was written!

// 1. Added jQuery reference
<script src="~/Scripts/jquery-1.9.0.min.js"> </script>
       
// 2. Written script block
<script>
    $(document).ready(function () {
        $("#dvStudent").css({ "background-color": "green",
         "color": "#fff", "padding": "15px" });
        $(".dvTeacher").css({ "background-color": "red",
        "color": "#fff", "padding": "15px", "border-bottom": "solid 2px #fff" });
    });
</script>

Now here is html code

<div id="dvStudent">
Hello World, I am a student, learning jQuery, this is my space!
</div>
<div class="dvTeacher">
Teacher Melisa: Hey... kepp learning.. jQuery is fun! </div>
<div class="dvTeacher">
Teacher Arunavo: Good!.. See..How multiple CSS properties 
added using jQuery! </div>

Hope your basic understanding about how jQuery works with CSS and HTML is clear!
Now you apply this knowledge to create some real-time Jquery stuff

 
Jquery Tutorial
Learn Jquery Online
Learn how to use jQuery in webpage development; most popular jQuery library is free, use built-in functions that are browser compatible.
jQuery Examples | JavaScript Online Course