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 selectors start with the $() (dollar sign and parentheses) . The factory function $() helps selecting elements in three different way.
Use any tag name available in the DOM, example $('div') or $('p') selects all <div> or <p> in the document.
Use any tag id that match with ID in the DOM. example $('#dvStudent') selects the element in the document that has ID="dvStudent".
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".
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
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