Quick Contact

    jQuery Getters & Setter

    Topic

    jQuery Get or Set Contents and Values

    A selection can have a value assigned to it or read from it using some jQuery methods. Text(), html(), attr(), and val are a few of these methods ().

    Because they obtain (or read) the value of the element when these methods are called without any arguments, they are known as getters. These methods are called setters when a value is passed as an argument because they set (or assign) the value.

    jQuery text() Method

    When using the jQuerytext() method, one can either scheduled the text components of the selected elements or retrieve the combined text contents of the elements, including their inheritance.

    Get Contents with text() Method

    Here we can learn how to obtain the text contents of paragraphs by referring to the example below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Get Text Contents of the Elements< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $(".btn-one").click(function(){
    varstr = $("p").text();
    alert(str);
        });
        $(".btn-two").click(function(){
    varstr = $("p:first").text();
    alert(str);
        });
        $(".btn-three").click(function(){
    varstr = $("p.extra").text();
    alert(str);
        });
    });
    < /script>
    < /head>
    < body>
    < button type="button" class="btn-one">Get All Paragraph's Text< /button>
    < button type="button" class="btn-two">Get First Paragraph's Text< /button>
    	< button type="button" class="btn-three">Get Last Paragraph's Text< /button>
    < p>This is a paragraph.< /p>
    < p>This is another paragraph.< /p>
    	< p class="extra">This is one more paragraph.< /p>
    < /body>
    < /html>
    

    Note:
    The other getters, such as html(), attr(), and val(), only return the value of the first element in the selection, in contrast to jQuery text(), which fetches the value systems of all the selected elements (i.e., combined text).

    Set Contents with text() Method

    You can understand how to modify the text components of a paragraph using the example below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Set Text Contents of the Elements< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $(".btn-one").click(function(){
            $("p").text("This is demo text.");
        });
        $(".btn-two").click(function(){
            $("p:first").text("This is another demo text.");
        });
        $(".btn-three").click(function(){
            $("p.empty").text("This is one more demo text.");
        });
    });
    < /script>
    < /head>
    < body>
    < button type="button" class="btn-one">Set All Paragraph's Text< /button>
    < button type="button" class="btn-two">Set First Paragraph's Text< /button>
    < button type="button" class="btn-three">Set Empty Paragraph's Text< /button>
    < p>This is a test paragraph.< /p>
    < p>This is another test paragraph.< /p>
    < p class="empty">< /p>
    < /body>
    < /html>
    

    Note:
    The value passed as an argument to the text(), html(), attr(), and val() methods of jQuery is applied to every element that matches.

    jQuery html() Method

    The HTML components of the elements are retrieved or set using the jQueryhtml() method.

    Get HTML Contents with html() Method

    The example that follows will demonstrate how to obtain the < div> element container as well as the HTML contents of the paragraph elements:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Get HTML Contents of an Element< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $(".btn-one").click(function(){
    varstr = $("p").html();
    alert(str);
        });
        $(".btn-two").click(function(){
    varstr = $("#container").html();
    alert(str);
        });
    });
    < /script>
    < /head>
    < body>
    < button type="button" class="btn-one">Get Paragraph's HTML Contents< /button>
    < button type="button" class="btn-two">Get Container's HTML Contents< /button>
    < div id="container">
    < h1>Hello World!< /h1>
    < p>The quick < b>brown fox< /b> jumps over the lazy dog.< /p>
    < /div>
    < /body>
    < /html>
    

    Note:
    The html() strategy just needs to return the first element from the set of matched elements when more than one element is chosen.

    Set HTML Contents with html() Method

    You can learn how to set the HTML components of the < body> element by using the example below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Set HTML Contents of the Element< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $("body").html("< p>Ducat India is Training and Development Institute< /p>");
        });
    });
    < /script>
    < /head>
    < body>
    < button type="button">Write Message< /button>
    < /body>
    < /html>
    

    jQuery attr() Method

    The jQueryattr() method enables you to set one or more characteristics for the target element as well as get the valuation of an element’s attribute.

    Get Attribute Value with attr() Method

    The example below will demonstrate how to obtain the alt attribute of an image element as well as the href attribute of a hyperlink, which is the < a> element:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Get an Element's Attribute Value< /title>
    < script src="https://tutorials.ducatindia.com/jquery/what-is-jquery/">< /script>
    < script>
    $(document).ready(function(){
        $(".btn-one").click(function(){
    varstr = $("a").attr("href");
    alert(str);
        });
        $(".btn-two").click(function(){
    varstr = $("img#sky").attr("alt");
    alert(str);
        });
    });
    < /script>
    < /head>
    < body>
    < button type="button" class="btn-one">Get Link's HREF Attribute< /button>
    < button type="button" class="btn-two">Get Image ALT Attribute< /button>
    < p>< a href="https://www.tutorial.ducatindia.com/">Tutorial.Ducatindia< /a>< /p>
    < img id="sky" src="/examples/images/sky.jpg" alt="Cloudy Sky">
    < /body>
    < /html>
    

    Note:
    When more than one element is chosen, the attr() method only returns the attribute value of the first matching element.

    Set Attributes with attr() Method

    You can learn how to set the checked attribute of the checkbox using the example below.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Set Element's Attribute Value< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $('input[type="checkbox"]').attr("checked", "checked");
        });
    });
    < /script>
    < /head>
    < body>
    < p>< label>< input type="checkbox">< /label> I agree with terms and conditions.< /p>
    < button type="button">Check< /button>
    < /body>
    < /html>
    

    You can set multiple attributes simultaneously using the attr() method as well. You can learn how to set the class and title attributes for the elements by looking at the example below.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Set Multiple Attribute for the Elements< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $("img").attr({
                "class" : "frame",
                "title" : "Hot Air Balloons"
            });
        });
    });
    < /script>
    < style>
        .frame{
    border: 6px solid #000;
        }
    < /style>
    < /head>
    < body>
    < button type="button">Set Attributes for Image< /button>
    < p>
    < imgsrc="/examples/images/balloons.jpg" alt="Hot Air Balloons">
    < /p>
    < /body>
    < /html>
    

    jQuery val() Method

    The < input>, < select>, and < textarea> HTML form elements are commonly used to get or set the current value using the jQueryval() method.

    Get the Values of Form Fields with val() Method

    We can learn how to obtain the values of form controls by using the example below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Get a Form Field Value< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button.get-name").click(function(){
    var name = $("#name").val();
    alert(name);
        });
      $(document).ready(function(){
        $("button.get-mailid").click(function(){
    varmailid = $("#maiid").val();
    alert(mailid);
        });
        $("button.get-comment").click(function(){
    var comment = $("#comment").val();
    alert(comment);
        });
        $("button.get-city").click(function(){
    var city = $("#city").val();
    alert(city);
        });
    });
    < /script>
    < /head>
    < body>
    < form>
    < table>
    < tr>
    < td>Name:< /td>
    < td>
    < input type="text" id="name">
    < /td>
    < /tr>
    < tr>
    < tr>
    < td>Email:< /td>
    < td>
    < input type="text" id="mailid">
    < /td>
    < /tr>
    < tr>
    < td>Comments:< /td>
    < td>
    < textarea rows="4" cols="30" id="comment">< /textarea>
    < /td>
    < /tr>
    < tr>
    < td>City:< /td>
    < td>
    < select id="city">
    < option>< /option>
    < option>Noida< /option>
    < option>Meerut< /option>
    < option>Gurgaon< /option>
    	< option>Meerut< /option>
    	< option>Dehradoon< /option>
    < /select>
    < /td>
    < /tr>
    < /table>
    < /form>
    < p>< strong>Note:< /strong> Fill the above form and click the following button to get the value.< /p>
    < button type="button" class="get-name">Get Name< /button>
    < button type="button" class="get-comment">Get Comment< /button>
    < button type="button" class="get-city">Get City< /button>
    < /body>
    < /html>
    

    Note:
    The val() procedure just provides the value for the first element from the set of replicated form elements when multiple form elements are selected.

    Set the Values of Form Fields with val() Method

    We can understand how to modify the value systems of the form controls by referring to the example below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Set Form Fields Values< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
    var text = $(this).text();
            $('input[type="text"]').val(text);
        });
    });
    < /script>
    < /head>
    < body>
    < button type="button">Discovery< /button>
    < button type="button">Atlantis< /button>
    < button type="button">Endeavour< /button>
    < p>< strong>Note:< /strong> Click the above buttons to set the value of following input box.< /p>
    < p>
    < input type="text">
    < /p>
    < /body>
    < /html>
    

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.