Java Script

最新推荐文章于 2023-07-17 10:00:00 发布

忆兮19921024

最新推荐文章于 2023-07-17 10:00:00 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/qq_42755549/article/details/87913605

版权

1. 与用户做交互

在windows对象的方法中，有些是专门用于处理与输入信息时、等，从而实现页面与用户的交互。

1.1. alert()

alert()的功能主要是向用户弹出一个信息的对话框，但是呢这种方式的对话框只是显示一些消息和一个确定的按钮，实际上特也就是弹出提示信息，这是有些同学就该问了只显示确定按钮而不能做别的操作，别急下面会介绍一个活用的提示弹窗，alert（）的用法demo。

<!DOCTYPE html>
<html lang="end">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function show(){
            alert("Hello World");
        }
    </script>
</head>
<body>
    <input type="button" value="ShowAlert" onclick="show()"/>
</body>
</html>

1.2 confirm()

confirm()与上面描述的alert()方法相同的是他们两个都会弹出一个信息的对话框，但是呢不同的则是confirm()方法弹出的对话框它给用户提供了一个可以选择的对话框，什么意思呢？就是这个对话框里面又多添加了一个取消按钮，点击确定脚本继续执行，点击取消则终止本次的操作，但是根据某个单击事件，confirm会返回不同的值，如以下demo

<!DOCTYPE html>
<html lang="end">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function show(){
            return confirm("是否继续？");
        }
    </script>
</head>
<body>
    <input type="button" value="继续" onclick="document.write(show())"/>
</body>
</html>

以上代码通过点击继续按钮调用show函数，返回点击继续按钮的状态，点击确定返回"true"，点击取消则返回"false"，并且上面代码通过document.write()方法写入到页面之中。

1.3 prompt()

prompt()是打开弹窗的另一种方式，这个对话框是允许用户输入信息的，prompt()方法与confirm()方法的调用方式是一样的，prompt()方法是可以有第二个可选的参数，表示默认输入的内容，从而避免用户之间点击确定按钮后而不输入任何内容，

如以下demo：

<!DOCTYPE html>
<html lang="end">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function show(){
            return prompt("请输入您的姓名","小明");
        }
    </script>
</head>
<body>
    <input type="button" value="编辑" onclick="document.write(show())"/>
</body>
</html>

2. 根据id选择器选择元素

如果想从HTML页面之中里面选择某个特定的id的元素，那么我们只需要把相对应元素的id作为参数来调用document对象的getElementById()方法，它就会返回特定id页面里元素所对应的DOM对象，如以下demo：

<!DOCTYPE html>
<html lang = "end">
<head>
    <meta charset = "UTF-8">
    <title></title>
    <script>
        function getInputId(id){
            var inputId = document.getElementById(id);
            var value = inputId.value;
            var id = inputId.id;
            var type = inputId.type;
            return id + "</br>" + type + "</br>" + value + "</br>";
        }
    </script>
</head>
<body>
    <input id = "button01" type = "button" value = "编辑" onclick = "document.write(getInputId('button01'))"/>
</body>
</html>

以上demo通过document对象的getElementById()方法获取该id为"button01"的input对象，并通过自定义的函数getInputId()获取input对象的id、type、vlaue。

3. innerHTML属性

innerHTML属性对于很多的DOM对象来说那都是一个很好用的属性，它可以读取或者设置特定页面内元素的HTML内容

如以下demo：

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title></title>
    <script>
        function setInnerHTML(id){
            document.getElementById(id).innerHTML = "<p>内容变了没有呢？</p>";
        }
        function getInnerHTML(id){
            var inputInner = document.getElementById(id).innerHTML;
            return inputInner;
        }
    </script>
</head>
<body>
    <div id = "divId">
        <p>
            DIV元素:是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。
            DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，
            其中所包含元素的特性由DIV标签的属性来控制，
            或者是通过使用样式表格式化这个块来进行控制。
        </p>
        <h5>
            DIV标签称为区隔标记。
            作用：设定字、画、表格等的摆放位置。当你把文字、图象，
            或其他的放在 DIV 中，它可称作为“DIV block”，
            或“DIV element”或“CSS-layer”，或干脆叫“layer”。
            而中文我们把它称作“层次”。
        </h5>
    </div>
    <input id = "button01" type = "button" value = "编辑" onclick = "setInnerHTML('divId')"/>
    <input id = "button02" type = "button" value = "显示" onclick = "document.write(getInnerHTML('divId'))"/>
</body>
</html>

以上demo我设置了两个按钮，分别是“编辑”和“显示”。

编辑按钮

首先我们通过点击“编辑”按钮，调用setInnerHTML()方法，是通过document.getEementById().innerHTML = "<p>内容变了没有呢？</p>" ,通过document.getElementById()方法获取id为“divId”的div对象，然后在通过innerHTML设置选定的元素的内容，

显示按钮

首先我们通过点击“显示”按钮，调用getInnerHTML()方法，是通过innerHTML获取<div>标签元素里面的HTML内容。

好了今天就分享到这里吧，有时间会更新的，这些都是我遇到过的，谢谢各位大佬的支持；

忆兮19921024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Script

1. 与用户做交互在windows对象的方法中，有些是专门用于处理与输入信息时、等，从而实现页面与用户的交互。 1.1. alert() alert()的功能主要是向用户弹出一个信息的对话框，但是呢这种方式的对话框只是显示一些消息和一个确定的按钮，实际上特也就是弹出提示信息，这是有些同学就该问了只显示确定按钮而不能做别的操作，别急下面会介绍一...
复制链接

扫一扫