Jquery Tutorials
- What is JQuery
- DOM Document Object Model
- JQuery Syntax
- Jquery Selector
- Get & Set Form value
- jQuery - Attributes
- Attribute Methods
- jQuery - DOM Manipulation
- JQuery Events
- JQuery Effects
- JQuery Html/Css
- jQuery Insert Content
- Auto Hide Div
- JQuery noConflict()
- JQuery Form Validation
- Form Validation
- Login Form Validation
- Jquery Fadeout message
- Modal popup
- Jquery Ajax Forms
- Dependent Dropdown
- Autocomplete Country jquery ajax
- Dynamic Content Load using jQuery AJAX
- Dynamic star rating jQuery AJAX
- Drag and Drop Image Upload
- show Hide Elements By click on checkbox
- How to Add class in jQuery
- calculate discount in jQuery
- Calculate GST by input value in text box
- check Password strength in jQuery
- Count Remaining Character
- onClick Checkbox check all
- password match or not
- DataTable
- Date Picker
- Multiselect Dropdown with Checkbox
- Add Dynamic Input Field (Add More Input Field)
- submit button disable after one click
- Show hide password in Password textbox using checkbox
- Put value in the text field
- Set Data and Attributes
Customer Say
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 :-
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>
Example
File name : index.php