Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





What is Jquery?

What is JQuery?


jQuery is a javascript library. it is developed by John Resig in 2006. it is a lightweight. The purpose of jQuery is to make it much easier to use JavaScript on your website. Make your JavaScript code shorter, faster and cross browser. Manipulate your HTML, like showing or hiding something from the page. The jQuery library contains the following features:

  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities
  • HTML/DOM manipulation

  • Lightweight: The jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
  • DOM manipulation:The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine calledSizzle.
  • Event handling:using jquery, you can handle events, such as a user clicking on a button,link,or any other activity a user can do with a mouse.
  • AJAX Support:jquery support ajax technoloty. using jquery ajax you can perform task on the browser without loading or refreshing the page.
  • Animations:you can hadle animation problem through jquery. for example make a part of your page fade in, fade out or just simply make something move.


How to add jQuery Libray on your webpage ?

There are several ways to add jQuery on your web site.

  • Download the jQuery library from jQuery.com
  • Include jQuery from a CDN, like Google

Downloading jQuery

The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):
<head><script src="jquery-1.11.1.min.js"></script></head>


jQuery CDN

If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). Both Google and Microsoft host jQuery. To use jQuery from Google or Microsoft, use one of the following: Google CDN:
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></head>

Example :-

Syntax :-

File name : index.php


File name : index.php

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>

</body>
</html>

Example :- How to implement a jquery on your html page.

File name : index.php

File Name:- demo.html

<html> <head> <title>The jQuery Result Example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
< script > $("#myButton").click(function () { $("p").slideToggle("slow"); }); </script > </head>
<body>
<button id='myButton'>Click to Slide or Toggle</button>
<h2>THIS IS RESULT...</h2>
<p> This is some text in a paragraph. this script show or hide the paragraph. </p>

</body>
</html>

when you click on button then control go on script tag. and check which id is clicked. such as myButton. then it show the paragraph.


File name : index.php

Run jQuery when DOM is ready.

What is DOM?


<script>
$(document).ready(function() {

// write jquery code here.
});
</script>


Example

File name : index.php

<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello itechtuto!");
});
</script>
</head>

<body>
<h1>Hi itechxpert</h1>
</body>
</html>

Example

File name : index.php

<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
} );
});
</script>
</head>

<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>

Example

File name : index.php

<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello, div!");});

$("button").click(function() {alert("Hello button!");});

$("p").click(function() {alert("Hello Paragraph!");});

$("#mahi").click(function() {alert("Hello anchor tag");});





});
</script>
</head>

<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
<button type="button">Click Me</button>
<p>hello paragraph</p>

<a href="#" id="mahi">Hello mahi </a>

</body>
</html>





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link