JavaScript

过往已是曾经

已于 2022-03-26 01:00:49 修改

阅读量811

点赞数

分类专栏：基本内容使用文章标签： javascript

于 2022-03-24 13:21:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40701750/article/details/123707990

版权

基本内容使用专栏收录该内容

1 篇文章

订阅专栏

1. 输出

1.1 innerText

语法

document.getElementById("id值").innerText="字符串"

代码

<!doctype html>
<meta encoding='utf-8'>
<html lang="en">
    <head>
        <title>innerText</title>
        <script>
            function showInnerText() {
                document.getElementById("paragraph").innerText="I am innerText!"
            }
        </script>
    </head>
    <body>
        <p id="paragraph"></p>
        <button onclick="showInnerText()">innerText</button>
    </body>
</html>

1.2 innerHTML

语法

document.getElementById("Id值").innerHTML="字符串"

代码

<!doctype html>
<meta encoding='utf-8'>
<html lang="en">
    <head>
        <title>innerHTML</title>
        <script>
            function showInnerHTML() {
                document.getElementById("paragraph").innerHTML="I am innerHTML!"
            }
        </script>
    </head>
    <body>
        <p id="paragraph"></p>
        <button onclick="showInnerHTML()">innerHTML</button>
    </body>
</html>

1.3 document.write()

语法

document.write("字符串")

代码

<!doctype html>
<meta encoding='utf-8'>
<html lang="en">
    <head>
        <title>window.write</title>
        <script>
            function showDocumentWrite() {
                document.write("I am document.write!")
            }
        </script>
    </head>
    <body>
        <p id="paragraph"></p>
        <button onclick="showDocumentWrite()">document.write</button>
    </body>
</html>

1.4 console.log()

语法

console.log("字符串")

代码

<!doctype html>
<meta encoding='utf-8'>
<html lang="en">
    <head>
        <title>console.log</title>
        <script>
            function showConsoleLog()
            {
                console.log("I am console.log!")
            }
        </script>
    </head>
    <body>
        <button onclick="showConsoleLog()">console.log</button>
    </body>
</html>

2. 事件

2.1 鼠标单击事件

语法

onclick="调用的函数"

代码

<!doctype html>
<meta encoding='utf-8'>
<html lang="en">
    <head>
        <title>onClick</title>
        <script>
            function showOnClick()
            {
               document.getElementById("paragraph").style.color="red"
            }
        </script>
    </head>
    <body>
        <p id="paragraph">Time is gentle, the breeze is just right; then when you were young, don't miss the good time</p>
        <button onclick="showOnClick()">onClick</button>
    </body>
</html>

2.2 鼠标双击事件

语法

ondbclick="调用的函数"

代码

<!doctype html>
<meta encoding='utf-8'>
<html lang="en">
    <head>
        <title>ondbclick</title>
        <script>
            function showOnDbClick()
            {
               document.getElementById("paragraph").style.color="orange"
            }
        </script>
    </head>
    <body>
        <p id="paragraph"  ondblclick="showOnDbClick()">I am ondbclick</p>
    </body>
</html>

2.3 鼠标移入事件

语法

onmouseover="调用的函数"

代码

<!doctype html>
<meta encoding='utf-8'>
<html lang="en">
    <head>
        <title>onMouseOver</title>
        <script>
            function showOnMouseOver()
            {
               document.getElementById("paragraph").style.color="yellow"
            }
        </script>
    </head>
    <body>
        <p id="paragraph" onmouseover="showOnMouseOver()">I am onMouseOver</p>
    </body>
</html>

2.4 鼠标外部事件

语法

onmouseout="调用的函数"

代码

<!doctype html>
<meta encoding='utf-8'>
<html lang="en">
    <head>
        <title>onMouseOut</title>
        <script>
            function showOnMouseOut()
            {
               document.getElementById("paragraph").style.color="green"
            }
        </script>
    </head>
    <body>
        <p id="paragraph" onmouseout="showOnMouseOut()">I am onMouseOut</p>
    </body>
</html>

2.5 键盘下降事件

语法

onkeydown="调用的函数"

代码

<!doctype html>
<meta encoding='utf-8'>
<html lang="en">
    <head>
        <title>onKeyDown</title>
        <script>
            alert("Please input key!")
            function showOnKeyDown()
            {
               document.getElementById("paragraph").style.color="cyan"
            }
        </script>
    </head>
    <body>
        <p id="paragraph">I am onkeydown</p>
        <input type="text" onkeydown="showOnKeyDown()"/>
    </body>
</html>

2.6 键盘上升事件

语法

onkeyup="调用的函数"

代码

<!doctype html>
<meta encoding='utf-8'>
<html lang="en">
    <head>
        <title>onKeyup</title>
        <script>
            alert("Please input key!")
            function showOnKeyUp()
            {
               document.getElementById("paragraph").style.color="blue"
            }
        </script>
    </head>
    <body>
        <p id="paragraph">I am onkeyup</p>
        <input type="text" onkeydown="showOnKeyUp()"/>
    </body>
</html>

2.7 键盘按下事件

语法

onkeypress="调用的函数"

代码

<!doctype html>
<meta encoding='utf-8'>
<html lang="en">
    <head>
        <title>onKeypress</title>
        <script>
            alert("Please input key!")
            function showOnKeyPress()
            {
               document.getElementById("paragraph").style.color="purple"
            }
        </script>
    </head>
    <body>
        <p id="paragraph">I am onkeypress</p>
        <input type="text" onkeypress="showOnKeyPress()"/>
    </body>
</html>

3. HTML元素寻找方式

3.1 getElementById()

语法

document.getElementById("Id属性值")

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
    <script>
        function showGetElementById() {
                document.getElementById("paragraph").style.color="red"
        }
    </script>
</head>
<body>
    <p id="paragraph">I am getElementById</p>
    <button onclick="showGetElementById()">getElementById</button>
</body>
</html>

3.2 getElementsByClassName()

语法

document.getElementsByClassName("类属性值")

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByClassName</title>
    <script>
        function showGetElementsByClassName() {
                var num=document.getElementsByClassName("paragraph").length
                document.write("The number of p is :"+num)
        }
    </script>
</head>
<body>
    <p class="paragraph">I am getElementsByClassName</p>
    <button onclick="showGetElementsByClassName()">getElementsByClassName</button>
</body>
</html>