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
Attribute Methods
File name : index.php
1 attr( properties )
Set a key/value object as properties to all matched elements.
2 attr( key, fn )
Set a single property to a computed value, on all matched elements.
3 removeAttr( name )
Remove an attribute from each of the matched elements.
4 hasClass( class )
Returns true if the specified class is present on at least one of the set of matched elements.
5 removeClass( class )
Removes all or the specified class(es) from the set of matched elements.
6 toggleClass( class )
Adds the specified class if it is not present, removes the specified class if it is present.
7 html( )
Get the html contents (innerHTML) of the first matched element.
8 html( val )
Set the html contents of every matched element.
9 text( )
Get the combined text contents of all matched elements.
10 text( val )
Set the text contents of all matched elements.
11 val( )
Get the input value of the first matched element.
12 val( val )
Set the value attribute of every matched element if it is called on <input> but if it is called on <select> with the passed <option> value then passed option would be selected, if it is called on check box or radio box then all the matching check box and radiobox would be checked.
attr( properties)
The attr( properties) method set a key/value object as properties to all matched elements.
Syntax : selector.attr({property1:value1, property2:value2})
File name : index.php
<html>
<head>
<title>The Selecter 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() {
$("img").attr({
src: "/images/jquery.jpg",
title: "jQuery",
alt: "jQuery Logo"
});
});
</script>
</head>
<body>
<div class = "division" id = "divid">
<p>Following is the logo of jQuery</p>
<img src="/jquery/images/jquery-mini-logo.jpg" title="None" alt="None" />
</div>
</body>
</html>
val( )
The val( ) method gets the input value of the first matched element.
Syntax
Here is the simple syntax to use this method −
selector.val( )
File name : index.php
<html>
<head>
<title>The Selecter 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() {
var content = $("input").val();
$("p#pid2").text(content);
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<input type = "text" value = "First Input Box"/>
<input type = "text" value = "Second Input Box"/>
<p class = "green" id = "pid1">This is <i>first paragraph</i>.</p>
<p class = "red" id = "pid2">This is second paragraph.</p>
</body>
</html>
File name : index.php
val( val ) method
The val( val ) method sets the input value of every matched element.
If this method is called on radio buttons, checkboxes, or select options then it would checks, or selects them at the passed value.
Syntax
Here is the simple syntax to use this method −
selector.val( val )
set the value attribute of the second input with the value content of the first input
File name : index.php
<html>
<head>
<title>The Selecter 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() {
var content = $("input").val();
$("input").val( content );
});
</script>
</head>
<body>
<input type = "text" value = "First Input Box"/><br/>
<input type = "text" value = "Second Input Box"/>
</body>
</html>
text( ) method
The text( ) method gets the combined text contents of all matched elements.
Syntax
Here is the simple syntax to use this method −
selector.text( )
File name : index.php
<html>
<head>
<title>The Selecter 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() {
var content = $("p#pid1").text();
$("#pid2").html(content);
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<p class = "green" id = "pid1">This is <i>first paragraph</i>.</p>
<p class = "red" id = "pid2">This is second paragraph.</p>
</body>
</html>
text( val )
The text( val ) method sets the text contents of all matched elements. This method is similar to html( val ) but escapes all HTML entities.
Syntax
Here is the simple syntax to use this method −
selector.text( val )
File name : index.php
<html>
<head>
<title>The Selecter 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() {
var content = $("p#pid1").html();
$("#pid2").text(content);
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<p class = "green" id = "pid1">This is <i>first paragraph</i>.</p>
<p class = "red" id = "pid2">This is second paragraph.</p>
</body>
</html>
html( ) method
The html( ) method gets the html contents of the first matched element. This property is not available on XML documents but it works for XHTML documents.
Syntax
Here is the simple syntax to use this method −
selector.html( )
get HTML content of first paragraph and would display it in second paragraph. Please check description of html(val) method
File name : index.php
<html>
<head>
<title>The Selecter 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() {
var content = $("p").html();
$("#pid2").html( content );
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<p class = "green" id = "pid1">This is first paragraph.</p>
<p class = "red" id = "pid2">This is second paragraph.</p>
</body>
</html>
removeAttr( name ) method
The removeAttr( name ) method removes an attribute from each of the matched elements.
Syntax
Here is the simple syntax to use this method
selector.removeAttr( name )
File name : index.php
<html>
<head>
<title>The Selecter 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() {
$("table").removeAttr("border");
});
</script>
</head>
<body>
<table border = "2">
<tr><td>This is first table</td></tr>
</table>
<table border = "3">
<tr><td>This is second table</td></tr>
</table>
<table border = "4">
<tr><td>This is third table</td></tr>
</table>
</body>
</html>
removeClass( class ) method
The removeClass( class ) method removes all or the specified class(es) from the set of matched elements.
Syntax
Here is the simple syntax to use this method −
selector.removeClass( class )
File name : index.php
<html>
<head>
<title>The Selecter 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#pid1").removeClass("red");
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<p class = "red" id = "pid1">This is first paragraph.</p>
<p class = "green" id = "pid2">This is second paragraph.</p>
</body>
</html>
toggleClass( class ) method
he toggleClass( class ) method adds the specified class if it is not present, removes the specified class if it is present.
Syntax
Here is the simple syntax to use this method −
selector.toggleClass( class )
File name : index.php
<html>
<head>
<title>The Selecter 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#pid").click(function () {
$(this).toggleClass("red");
});
});
</script>
<style>
.red { color:red; }
</style>
</head>
<body>
<p class = "green">Click following line to see the result</p>
<p class = "red" id = "pid">This is first paragraph.</p>
</body>
</html>
File name : index.php
File name : index.php
File name : index.php
File name : index.php