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
JQuery Syntax
A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.
The $() factory function :- jQuery selectors start with the dollar sign and parentheses $(). and ends with a semicolon (;). the dollar sign ($) is just an alias for jQuery. The factory function $() makes use of following three building blocks while selecting elements in a given document −
<script type="text/javascript">
$(document).ready(function(){
// Some code to be executed...
alert("Hello Jquery!");
});
</script>
The $(document).ready(handler); — This statement is typically known as ready event. Where the handler is basically a function that is passed to the ready() method to be executed safely as soon as the document is ready to be manipulated i.e. when the DOM hierarchy has been fully constructed.
inside an event handler function you can write the jQuery statements to perform any action following the basic syntax, like: $(selector).action(); Where, the $(selector) basically selects the HTML elements from the DOM tree so that it can be manipulated and the action() applies some action on the selected elements such as changes the CSS property value, or sets the element's contents, etc.
File name : index.php
Tag Name
Represents a tag name available in the DOM. For example $('p') selects all paragraphs in the document.
Tag ID
Represents a tag available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has an ID of some-id.
Tag Class
Represents a tag available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class.
NOTE − The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $().
Example
select all the elements with a tag name p.
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() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>
<p class = "myclass">My paragraph.</p>
<p id = "myid">My second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>
How to Use Selectors?
with jQuery you select (query) HTML elements and
perform "actions" on them.
Syntax :- $(selector).action()
- Using jQuery selecting HTML elements and performing some action on the elements.
- A $ sign to define/access jQuery
- A (selector) to "query (or find)" HTML elements
- A JQuery action() to be performed on the elements.
- Examples:
- $(this).hide() - hides the current element.
- $("p").hide() - hides all
elements.
- $(".test").hide() - hides all elements with class="test".
- $("#test").hide() - hides the element with id="test".
The Document Ready Event
all jQuery methods write inside a document ready function.
$(document).ready(function()
{
// all statements ....
// jQuery methods go here..
});
Tip:-
The jQuery team has also created an even shorter method for the document ready event.
$(function(){
// jQuery methods go here...
});
How to Select an Element in jQuery?
- selects 'only one' HTML element with ID "myButton". we use hashes (#) for ids
- $("#myButton");
- selects all HTML elements with class "myClass", for instance: <div class='myClass'></div>
- we used dots (.) for classes, like that of CSS
$(".myClass"); - selects all button HTML element, for example:
<button>Click Me!</button>
$("button"); - selects all div element, example: <div>Me and all other
div will be selected!</div>
$("div"); - selects all anchor link element, for example: <a
href="http://codeofaninja.com/">Me and all other 'a' tags will
be selected!</a>
$("a");
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
<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>
All Selector ("*")
Find every element (including head, body, etc) in the document.
File name : index.php
<!doctype html>
<html
lang="en"><head><style>
h3 {
margin:
0;
}
div, span, p {
width: 80px;
height:
40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script
src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head><body>
<div>DIV</div>
<span>SPAN</span>
<p>P
<button>Button</button></p>
<script>
var elementCount = $( "*" ).css( "border",
"3px solid red" ).length;
$( "body" ).prepend( "<h3>"
+ elementCount + " elements found</h3>" );
</script>
</body>
</html>
EXAMPLE
Find every element (including head, body, etc) in the document.
File name : index.php
<head>
<style>
h3 {
margin: 0;
}
div, span, p {
width: 80px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
#test {
width:
auto;
height: auto;
background-color: transparent;
}
</style>
<script
src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="test">
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
</div>
<script>
var elementCount = $(
"#test" ).find( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements
found</h3>" );
</script>
</body>
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>
How to declare a variable in jquery.
File name : index.php
var name = "mahtab";
File name : index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Document Ready Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<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(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Click Handler Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<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(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>