Jquery tutorial for beginners with examples

Now i have started learning JQuery so i wanted to have my own concise tutorial article for JQuery. I hope this will be helpful to other beginners too.

Note*: There are other tutorial on web which is quite good, basically JQuery’s own tutorial. If you are looking for more details you can also look for the API document of JQuery.

What is JQuery and What is not

JQuery is open source lightweight Javascript Library which is used to simplify interaction between HTML and JavaScript. 

JQuery is not a language. JavaScript is a Language. JQuery is built over JavaScript.

What JQuery can do

  • DOM Manipulation
  • CSS Manipulation
  • AJAX
  • Effects and Animation

How to use JQuery

You can start using JQuery by adding JQuery library in HTML file.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<a href="http://Javabeginnerstutotrial.com/">JBT</a>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</body>
</html>

 

Imp Point in above code

  • Here we are using JQuery.min.js instead of JQuery.js. In Production you should use minified version of library. It will load fast as it doesn’t contain unnecessary comment and whitespaces.
  • JQuery is getting loaded from Google CDN instead of self hosting. It will again make your site load faster. Also it will help you website take advantage of cache.

JQuery Syntax

Now we know how to use JQuery in web page. Next step would be using JQuery syntax. Common syntax for JQuery would be

$(<Where_to_do_Action>).<When_To_Do_Action>(<What_To_Do>);

Example of JQuery Syntax

I want to show an alert message when ever document is ready or loaded completely.

Where(Selectors) : On Document.

When (Action): Document is in ready state or loaded completely.

What(Function) : Show an alert message.

Syntax in JQuery for above requirement


$(document).ready(alert("Hi"));

Different options for Selector(Where)

All Element – *

Current HTML element – this

Class –   .<Class_Name>   (look for dot)

Id – #<Id_Name> (look for #)

HTML element 

  • a (hyperlink)
  • table
  • tr
  • td
  • p
  • …….

 

Complete HTML Code


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>

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

$(document).ready(alert("Hi"));

</script>
</body>
</html>
By | 2013-12-22T06:24:18+00:00 December 22nd, 2013|JavaScript|10 Comments

About the Author:

10 Comments

  1. ramkumar jangid March 12, 2015 at 10:47 am - Reply

    this is really helpful, thanks.

  2. Tharun June 25, 2015 at 9:07 am - Reply

    Understandable in a good way.

  3. Tharun June 25, 2015 at 9:07 am - Reply

    Nice site to learn

  4. Raviteja November 19, 2015 at 6:10 am - Reply

    Very Good Explanation..! My Clouds are clear with the basic steps. Thanks

  5. venu February 18, 2016 at 9:10 am - Reply

    Very Nice And clear explantion…….. 5stars

  6. laxmi March 26, 2016 at 11:05 am - Reply

    can u post more detail about jquery

  7. Abadat April 18, 2016 at 11:47 am - Reply

    Thanks

  8. sujitha April 21, 2016 at 10:17 am - Reply

    Nice explanation..

  9. Florian May 1, 2016 at 11:45 am - Reply

    Hi there, nice tutorial.

    Thanks!

  10. Bala April 11, 2017 at 12:14 pm - Reply

    Nice way to begin my jquery concept ,thanks for the very clear explanation

Leave A Comment