JQuery Get

In this tutorial, we will introduce you to various jQuery Get methods. The jQuery Get methods used for getting the element content and attribute value.

The following are some of these methods: text(), html(), attr() and val().

jQuery text() Method

The jQuery text() methods used to get the element's text content.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var data = $("p").text();
       console.log(data); 
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

jQuery html() Method

The jQuery html() methods used to get the html content.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var data = $("#data").html();
       console.log(data); 
  });
});
</script>
</head>
<body>
 <p id="data">This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

jQuery attr() Method

The jQuery attr() methods used to get the value of an element's attribute.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var data = $("p").attr("id");
       console.log(data); 
  });
});
</script>
</head>
<body>
 <p id="data">This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

jQuery val() Method

The jQuery val() methods used to get the value of form fields.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var data = $("#username").val();
       console.log(data); 
  });
});
</script>
</head>
<body>
 <input type="text" name="username" id="username" value="username"/>
  <button>Click here</button>
</body>
</html>

Related Article