jQuery's get(), map(), map().get().join() simple application

Keywords: Javascript JQuery

1 .get()

Gets the DOM element specified by the selector
 grammar
    $(selector). get(index)
parameter
    Specify which matching element to get (get by index number, starting from 0)
1.1 html(Copy code here to submit tests)
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#bt1").click(function() {
                    var x = $("p").get(0);
                    $("div").text(x.nodeName + ": " + x.innerHTML);
                });
                $("#bt2").click(function() {
                    var x = $("p").get(1);
                    $("div").text(x.nodeName + ": " + x.innerHTML);
                });
            });</script>
    </head>

    <body>
        <p>Test 01</p>
        <p>Test 02</p>
        <button id="bt1">Get the first p DOM element</button>
        <button id="bt2">Get the second p DOM element</button>
        <div></div>
    </body>
</html>
1.2 effect


2 .map()

Each element is passed to the current matching set through a function to generate a new jQuery object containing the return value
 grammar
    .map(callback(index,domElement)))
parameter
    Function object called for each element in the current collection
 Detailed description
    Because the return value is an array encapsulated by jQuery, get() is used to process the returned object to get the basic array
    You can get comma separated text information through. get().join('), which can also be defined as other symbols you want to use
2.1 html(Copy code here to submit tests)
<!DOCTYPE html>
<html>
    <head>
        <style>p { color:red; }</style>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
    </head>
    <body>
        <p><b>Values:</b></p>
        <form>
            <input type="text" name="name" value="admin" />
            <input type="text" name="password" value="password" />
            <input type="text" name="url" value="http://baidu.com" />
        </form>
        <button id="bt1">Get all input Element value</button>
        <script type="text/javascript">
            $("#bt1").click(function() {
                var values = $("input").map(function() {
                    return $(this).val();
                }).get().join(",");
                $("p").append(values);
            })
        </script>
    </body>
</html>
2.2 effect

Posted by pedroz on Sun, 15 Dec 2019 09:17:00 -0800