Attributes of Elements
These methods get and set DOM attributes of elements.
Adds the specified class(es) to each element in the set of matched elements.
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
Determine whether any of the matched elements are assigned the given class.
Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.
Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.
Remove an attribute from each element in the set of matched elements.
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
Remove a property for the set of matched elements.
Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.
Get the current value of the first element in the set of matched elements or set the value of every matched element.
.addClass()
Description:
Adds the specified class(es) to each element in the set of matched elements.
$( "p" ).addClass( "myClass yourClass" );
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected" );
</script>
</body>
</html>
.attr()
Description:
Get the value of an attribute for the first element in the set of matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
p {
margin: 20px 0 0;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
$( "input" )
.change(function() {
var $input = $( this );
$( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
})
.change();
</script>
</body>
</html>
.hasClass()
Description:
Determine whether any of the matched elements are assigned the given class.
<div id="mydiv" class="foo bar"></div> $( "#mydiv" ).hasClass( "foo" )
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hasClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>
<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">At least one paragraph has selected class: </div>
<script>
$( "#result1" ).append( $( "p:first" ).hasClass( "selected" ).toString() );
$( "#result2" ).append( $( "p:last" ).hasClass( "selected" ).toString() );
$( "#result3" ).append( $( "p" ).hasClass( "selected" ).toString() ) ;
</script>
</body>
</html
.html()
Description:
Get the HTML contents of the first element in the set of matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
<style>
p {
margin: 8px;
font-size: 20px;
color: blue;
cursor: pointer;
}
b {
text-decoration: underline;
}
button {
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
<script>
$( "p" ).click(function() {
var htmlString = $( this ).html();
$( this ).text( htmlString );
});
</script>
</body>
</html>
.prop()
Description:
Get the value of a property for the first element in the set of matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prop demo</title>
<style>
p {
margin: 20px 0 0;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
$( "input" ).change(function() {
var $input = $( this );
$( "p" ).html(
".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
</body>
</html>
.removeAttr()
Description:
Remove an attribute from each element in the set of matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>removeAttr demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Change title</button>
<input type="text" title="hello there">
<div id="log"></div>
<script>
(function() {
var inputTitle = $( "input" ).attr( "title" );
$( "button" ).click(function() {
var input = $( this ).next();
if ( input.attr( "title" ) === inputTitle ) {
input.removeAttr( "title" )
} else {
input.attr( "title", inputTitle );
}
$( "#log" ).html( "input title is now " + input.attr( "title" ) );
});
})();
</script>
</body>
</html>
.removeClass()
Description:
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>removeClass demo</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
}
.blue {
color: blue;
}
.under {
text-decoration: underline;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
<script>
$( "p:even" ).removeClass( "blue" );
</script>
</body>
</html>
.removeProp()
Description:
Remove a property for the set of matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>removeProp demo</title>
<style>
img {
padding: 10px;
}
div {
color: red;
font-size: 24px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p></p>
<script>
para = $( "p" );
para
.prop( "luggageCode", 1234 )
.append( "The secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " )
.removeProp( "luggageCode" )
.append( "Now the secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " );
</script>
</body>
</html>
.toggleClass()
Description:
Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
</script>
</body>
</html>
.val()
Description:
Get the current value of the first element in the set of matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<script>
function displayVals() {
var singleValues = $( "#single" ).val();
var multipleValues = $( "#multiple" ).val() || [];
// When using jQuery 3:
// var multipleValues = $( "#multiple" ).val();
$( "p" ).html( "<b>Single:</b> " + singleValues +
" <b>Multiple:</b> " + multipleValues.join( ", " ) );
}
$( "select" ).change( displayVals );
displayVals();
</script>
</body>
</html>
