JavaScript学习

Posted 2021-03-17 寂天风

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript学习相关的知识，希望对你有一定的参考价值。

1，事件：

（1）onmouseover:鼠标移入某个对象等触发事件

（2）onmouseout:鼠标移出某个对象等触发事件

2,获取元素

通过Id获取只能获取一个对象：document.getElementById(‘id名‘)

获取一组同一类型的对象（数组）：document.getElementsByTagName(‘div’）；获取所有的div，设置某个div的属性：document.getElementsByTagName(‘div’)[i]

3，函数

（1）function定义函数

function 函数名(){ }

引用：事件名（如onclick=“函数名()”）

（2）调用属性的方式：

1，xxx.xxxx.xxx，例如：document.getElementById(‘ ‘)

2,xxx[‘ ‘][‘ ‘]，例如：document[‘getElementById‘](‘ ‘) ，这种方式比较好，比1方式可以接受变量值。

（3）改变对象属性的方式：

1，修改对象的style，例如：id.style.xxx ,相当于在对象的行间加入style属性

2，设置class，修改为class，例如：id.ClassName=‘class‘

js可以修改任何对象的属性

4，变量

var定义变量

5，使用

（1）a链接内放javascript：

（2）使用class时：document.getElementById(‘ ‘).ClassName=‘‘;

（3）加载事件（当script写在boad外使用2,3方式时，必须使用window.onload =function( ){ 要写的JavaScript代码 }）：

1，在要设置的按钮等的input中加载，例如：<input type="button" value="提交" onclick="aaa()" />

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">    
                         function changeColor()
                         {
                                var div1=document.getElementById(‘div1‘);
                               div1.style.background=‘red‘;
                          }
                          function retColor()
                          {
                             var div1=document.getElementById(‘div1‘);
                            div1.style.background=‘black‘;
                         }

    </script>
</head>
<style type="text/css">
    #div1{
        width: 100px;
        height: 100px;
        background-color:black;
    }
</style>
<body>
    <div id="div1" onmouseover="changeColor()" onmouseout="retColor()"></div>
</body>

2，在script中设置事件属性，例如：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()                   //加载页面完成后调用该函数
    {
        var div1=document.getElementById(‘div1‘);
                         div1.onmouseover=changeColor;
                         div1.onmouseout=retColor;
                         function changeColor()
                         {
                                var div1=document.getElementById(‘div1‘);
                               div1.style.background=‘red‘;
                          }
                          function retColor()
                          {
                             var div1=document.getElementById(‘div1‘);
                            div1.style.background=‘black‘;
                         }
    }
    </script>
</head>
<style type="text/css">
    #div1{
        width: 100px;
        height: 100px;
        background-color:black;
    }
</style>
<body>
    <div id="div1"></div>
</body>

3，直接在属性后写函数：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()
    {
        var div1=document.getElementById(‘div1‘);
                         div1.onmouseover=function ()
                         {
                                var div1=document.getElementById(‘div1‘);
                               div1.style.background=‘red‘;
                          }
                         div1.onmouseout=function ()
                          {
                             var div1=document.getElementById(‘div1‘);
                            div1.style.background=‘black‘;
                         }
                          
    }
    </script>
</head>
<style type="text/css">
    #div1{
        width: 100px;
        height: 100px;
        background-color:black;
    }
</style>
<body>
    <div id="div1"></div>
</body>

以上是关于JavaScript学习的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段（上）

如何将此 JavaScript 代码片段翻译成 Parenscript？