jQuery Get

Some jQuery methods allow you to assign or read a value from a selection. text(), html(), attr(), and val() are a few examples.

When these methods are called with no arguments, they are referred to as getters since they get (or read) the element's value. When these methods are used with a value as an argument, they are known as setters because they set (or assign) that value.

jQuery text() Method

The jQuery text() function is used to either retrieve or set the combined text contents of the chosen components, including their descendants.

Get Contents with text() Method

The following example demonstrates how to obtain the text contents of paragraphs:

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Get Text of the Elements</h1>
<button class="btnGet">Get Text</button>
<p>Webtutor.dev</p>

<script>
    $(document).ready(function(){
        $(".btnGet").click(function(){
            let str = $("p").text();
            alert("Welcome to " + str);
        });
    });
</script>
</body>
</html>

Preview

jQuery html() Method

The html() function of jQuery is used to obtain or set the HTML contents of elements.

Get HTML Contents with html() Method

The following example demonstrates how to obtain the HTML contents of paragraph elements as well as an element container:

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Get HTML of the Element</h1>
<button class="btnGet">Get HTML</button>
<p><b>Webtutor</b>.dev</p>

<script>
    $(document).ready(function(){
        $(".btnGet").click(function(){
            let str = $("p").html();
            alert("Welcome to " + str);
        });
    });
</script>
</body>
</html>

Preview

jQuery attr() Method

The jQuery attr() function may be used to retrieve the value of an element's attribute or to set one or more attributes for the specified element.

Get Attribute Value with attr() Method

The following example demonstrates how to obtain the href attribute of a hyperlink, i.e. the <a> element, as well as the alt attribute of an image:

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Get an Element's Attribute Value</h1>
<img src="https://webtutor.dev/images/women.jpg" width="250" height="150" alt=""><br><br>
<button class="btnGet">Get Attribute</button>

<script>
    $(document).ready(function(){
        $(".btnGet").click(function(){
            let url = $("img").attr("src");
            alert(url);
        });
    });
</script>
</body>
</html>

Preview

jQuery val() Method

The val() function of jQuery is mostly used to acquire or set the current value of HTML form elements such as <input>, <select>, and <textarea>.

Get the Values of Form Fields with val() Method

The following example demonstrates how to obtain the values of form controls:

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Get a Form Field Value</h1>
<input type="text" id="name"><br><br>
<button class="btnGet">Get Value</button>

<script>
    $(document).ready(function(){
        $(".btnGet").click(function(){
            let name = $("#name").val();
            alert(name);
        });
    });
</script>
</body>
</html>

Preview

jQuery Chaining

jQuery Set

jQuery Get

jQuery text() Method

Get Contents with text() Method

Example

jQuery html() Method

Get HTML Contents with html() Method

Example

jQuery attr() Method

Get Attribute Value with attr() Method

Example

jQuery val() Method

Get the Values of Form Fields with val() Method

Example

Links

Tutorials

Connect with us