《前端》js交互练习

最新推荐文章于 2022-04-19 11:22:11 发布

bellediao

最新推荐文章于 2022-04-19 11:22:11 发布

阅读量325

点赞数

分类专栏：前端例子 #JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/bellediao/article/details/104906974

版权

前端同时被 3 个专栏收录

257 篇文章 1 订阅

订阅专栏

#JavaScript

43 篇文章 0 订阅

订阅专栏

例子

18 篇文章 0 订阅

订阅专栏

实现效果如下：在文本框中输入名字，点击保存数据按钮，再点击显示数据按钮。在下方会出现保存的名字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>交互练习</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

    <style>
        ul {margin: 0; padding: 0;}
        li { list-style: none;}
        .txt { padding-left: 4px; outline: none;}
    </style>
</head>
<body>
    <!-- <form action="#" method="get"> -->
        <label>
            <input id="txt" class="txt" type="text" name="UserName" placeholder="请输入姓名">
        </label>
        <input id="save-btn" type="button" value="保存数据">
        <input id="show-btn" type="button" value="显示数据">
    <!-- </form> -->
    <ul></ul>
    <script>
            var $txt = $('#txt'); 
            //定义一个json对象，用于保存学生的相关资料
            var json = [];
        
            $('#save-btn').on('click', function () {
                // push() 方法向数组的末尾添加一个或多个元素，并返回新的长度。
                // 这里是获取文本框中的值作为"name",放到json数组中
                json.push({
                    name : $txt.val()
                });
                // $txt.val('');
            });
            $('#show-btn').on('click',function () {
                //通过$.each()工具函数，获取数组中各元素的名称与内容，显示在页面中。 
                $.each(json,function (i) {
                    $('ul').append('<li>'+json[i].name+'</li>');
                });
            });
    </script>

</body>
</html>

有几点总结一下：

主体是一个文本框和两个分别用于保存和显示的按钮。本例中还有一个ul标签，用来定义添加的文本加入的位置。

剩下的就是，Js部分：

用到了获取数值的val()函数。

push() 方法：向数组的末尾添加一个或多个元素，并返回新的长度。这里是获取文本框中的值作为"name",放到json数组中。

append()函数.

each()遍历：通过$.each()工具函数，获取数组中各元素的名称与内容，显示在页面中。

值得注意的是，这里定义了一个Json数组。用来存放文本框的值。点击保存按钮之后，文本框的值将放在Json数组中name属性下，再次点击显示按钮之后，将遍历取出Json数组中name属性中的值，把这个值放在ul标签里，并加li标签。

bellediao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《前端》js交互练习

实现效果如下：在文本框中输入名字，点击保存数据按钮，再点击显示数据按钮。在下方会出现保存的名字。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
复制链接

扫一扫