Introduction to Jquery

JQUERY

jQuery is a fast and concise JavaScript library created by John Resig in 2006 with a nice motto − Write less, do more. jQuery is a powerful JavaScript API which makes it a lot easier to perform various standard JavaScript actions in your HTML page.

List of some core features supported by jQuery –

  • DOM manipulation
  • Event handling
  • AJAX Support
  • Animations
  • Lightweight
  • Cross Browser Support
  • Latest Technology
  • Smart widgets / Latest UI
  • jQuery Features

 

How to use?

There are two ways to use jQuery.

 

Local Installation − You can download jQuery library on your local machine directly.

CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).

 

Local Installation

Go to the https://jquery.com/download/ to download the latest version available.

Now put downloaded jquery-2.1.3.min.js file in a directory of your website.

Example 1

<html>

<head>

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

<script>

$(document).ready(function()

{

$(“h1”).click(function()

{

$(this).hide();

});

$(“p”).click(function()

{

$(this).hide();

});

});

</script>

</head>

<body>

<p>Hi i m paragraph when you will click me, i will hide</p>

<h1>fkjgksfd gfh</h1>

<p>As i am also paragraph. i will also hide as this rule also apply on me </p>

</body>

</html>

 

 

Example 2

<html>

<head>

<style>

#show1

{

background:#eee;

width:200px;

height:130px;

}

</style>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>

</script>

<script>

$(document).ready(function()

{

$(“div”).click(function()

{

document.getElementById(“show1″).innerHTML=”hello.  shee hide data here…. hello.  shee hide data here….”;

 

});

});

</script>

</head>

<body>

<div>View Details </div>

<div id=”show1″></div>

</body>

</html>

 

Example 3

<html>

<head>

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

<script>

$(document).ready(function()

{

$(“button”).click(function()

{

$(“p”).hide(“slow”, function()

{

alert(“The paragraph is now hidden”);

});

});

});

</script>

</head>

<body>

<button>Hide</button>

<p>This is a paragraph with little content.This is a paragraph with little content.This is a paragraph with little content. This is a paragraph with little content.This is a paragraph with little content.</p>

</body>

</html>

jQuery fadeIn() and jQuery fadeOut() Example

<html>

<head>

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

$(document).ready(function()

{

$(“button”).click(function()

{

$(“#home”).fadeOut();

$(“#about”).fadeOut(“slow”);

$(“#contact”).fadeOut(2000);

});

});

</script>

</head>

<body>

<button>Click Here </button><br>

<div id=”home” style=”width:100px;height:100px;background:gray;”>Your content goes here</div>

<div id=”about” style=”width:100px;height:100px;background:gray;”>Your content goes here</div>

<div id=”contact” style=”width:100px;height:100px;background:gray;”>Your content goes here</div>

</body>

</html>

 

jQuery slideToggle()  – slideDown()  and slideUP() Example

<html>

<head>

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

$(document).ready(function()

{

$(“#data”).click(function()

{

$(“#panel”).slideToggle(“slow”);

});

});

</script>

<style>

#panel, #data

{

padding: 8px;

text-align: center;

background: #e5eecc;

border: solid 1px red;

}

#panel

{

padding: 20px;

display: none;

}

</style>

</head>

<body>

<div id=”data”>Expend</div>

<div id=”panel”>Your content goes here…Your content goes here</div>

</body>

</html>

 

jQuery animate() Example

<html>

<head>

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

$(document).ready(function()

{

$(“button”).click(function()

{

$(“div”).animate({left: ‘320px’});

});

});

</script>

</head>

<body>

<button>See Animation</button>

<p>Your content goes here….Your content goes here</p>

<div style=”background:yellow;height:200px;width:200px;position:absolute;border:solid 2px red”></div>

</body>

</html>

Leave a Reply

Your email address will not be published.

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
Google+2k
Google+
http://hirdeshbhardwaj.com/2017/02/22/introduction-to-jquery/
YouTube31
YouTube