Free Web Development Online Tutorials, Learn to Code
Learn Jquery Function, JQuery DOM, Effects, Events, Slider, JQuery Examples

Learn Jquery Syntax

This tutorial is very basic and the first step for learning jQuery, you will learn how to attach jquery event with any html element using “id” or “class” property.

If you understand this basic 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.

How to write Jquery?

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

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:

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 Examples | JavaScript Online Course