jQuery Get

jQuery Get DOM methods are used to Get the contents and values. The jQuery Get DOM methods are - text(), html(), and val().

The text() method is used to Get the text content of selected elements.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#example-jquery-get-text-btn1").click(function(){
    alert("Text: " + $("#example-jquery-get-text").text());
  });
});
</script>
<p id="example-jquery-get-text">There is a <i>italic</i> text in this content</p>
<button id="example-jquery-get-text-btn1">click here for display Text</button>

Output

The html() method is used to Get the content of selected elements.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#example-jquery-get-html-btn2").click(function(){
    alert("HTML: " + $("#example-jquery-get-html").html());
  });
});
</script>
<p id="example-jquery-get-html">There is a <i>italic</i> text in this content</p>
<button id="example-jquery-get-html-btn2">click here for display HTML</button>

Output

The val() method is used to Get the the value of form input fields.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".example-jquery-get-val-btn3").click(function(){
    alert("Value: " + $(".example-jquery-get-val-email").val());
  });
});
</script>
<p>Email: <input type="text" class="example-jquery-get-val-email" value="abc@gmail.com"></p>
<button class="example-jquery-get-val-btn3">click here for display Value</button>

Output

The jQuery attr() method is used to get attribute values of HTML element.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-attr-button").click(function(){
    alert($(".example-jquery-attr").attr("href"));
  });
});
</script>
<p><a href="http://schools.inimisttech.com" class="example-jquery-attr">InimistSchool</a></p>
<button class="example-jquery-attr-button">Show href Value</button>

Output