Loading Please Wait...
jQuery contains powerful methods for accessing HTML elements, attributes, and values.
There are three simple, but useful, jQuery methods for accessing DOM content:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn3").click(function(){
alert("Value: " + $("#textField").val());
});
});
</script>
</head>
<body>
<p id="test">This is paragraph with <b>bold</b> text.</p>
<input type="text" id="textField" value="Lynxsia IT Solutions">
<button id="btn1">test()</button>
<button id="btn2">html()</button>
<button id="btn3">val()</button>
</body>
</html>
The jQuery attr() method is used to get attribute values.
The following example demonstrates how to get the value of the href attribute in a link:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#link").attr('href'));
});
});
</script>
</head>
<body>
<a id="link" href="https://lynxsia.com/">lynxsia.com</a>
<button id="btn1">attr()</button>
</body>
</html>
Though attr() method can be used to access any attribute of HTML elements such as href, class, id, data, aria, etc.
The data() method is used to access data attribute specially.
The data attribute is defined by the writing data followed by hyphen (-) and then valid name of the data attribute:
<element data-name-of_Data="value">
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").data('user'));
});
});
</script>
</head>
<body>
<p id="test" data-user="Lynxsia IT Solutions">This is paragraph</p>
<button id="btn1">data()</button>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved