【javascript系列】史上最全javascript系列教程(二)

javascript系列教程(二)

            • innerHTML和innerTextd的用法
            • JS常见事件
            • 操作div的任意样式
            • 下一篇开始JS的数据类型介绍

innerHTML和innerTextd的用法

这两个都是对元素的一个操作,简单讲,innerHTML可以在某种特定环境下重构某个元素节点的DOM结构,innerText只能修改文本值。 给获取到的元素⼀些内容,document.getElementById(‘id名’).innerHTML=‘内容’。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js输出方式</title>
     
</head>
<body>
    <div id="tim"></div>
    <script type="text/javascript">
    console.log("我是在浏览器调试窗口输出的内容")
    //使用了innerHTML的话,H1标签会生效,使用innerText给元素值的时候h1标签不生效
    document.getElementById("tim").innerHTML="

这里是被注入的内容

"
//document.getElementById('tim').innerText='

这里是被注入的内容

'
</script> </body> </html>

效果:本来div标签下面是没有文字的,获取标签后给到元素文字显示。

JS常见事件

Js事件就是我们的行为能被侦测到,且触发相应的函数(函数里面写上事件的行为)

1. onmouseover ⿏标被移到某元素之上
2. onmouseout ⿏标从某元素上⾯移开
3. onchange 元素值改变,⼀般⽤在表单元素上
4. onkeydown ⽤户按下键盘按键
5. onfocus 元素获得焦点
6. onblur 元素失去焦点
7. window.onload ⻚⾯加载完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见JS事件</title>
    <style type="text/css">
    #tim{
     
        width:300px;
        height:300px;
        background:red;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <input type="" name="" id="xd">
    <div id="tim"></div>
    <script type="text/javascript">

      document.getElementById("tim").onclick=function{
     
          //函数里面写我们要做的事情
          alert("我是被点击了")
      }
          //鼠标移入事件
      document.getElementById("tim").onmouseover=function(){
     
      //当鼠标移入红框控制台输出下面数字。
              console.log("鼠标移入")
          }

          //鼠标移出事件
      document.getElementById("tim").onmouseout=function(){
     
          //当鼠标移入红框控制台输出下面数字,鼠标移入移除会在控制台显示下面的文字。
              console.log("鼠标移出")
          }
          //onchange 元素值改变,⼀般⽤在表单元素上
      document.getElementById("xd").onchange=function(){
     
              console.log(document.getElementById("xd").value)
          } 
            //onkeydown ⽤户按下键盘按键
          document.getElementById("xd").onmouseout=function(){
     
         
              console.log("键盘按下了")
          }   
          //onfocus 元素获得焦点事件,获取到焦点就是当你把鼠标放进输入框,之后点击一下,鼠标变成一条竖线之后输入的那种。
    </script>
    
</body>
</html>
操作div的任意样式

先获取到div元素,再通过事件的触发来改变div的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动手操作DIV样式</title>
    <style type="text/css">
    #tim{
     
        width:100px;
        height:100px;
        background:black;
        margin:0 auto;
    }
    </style>
</head>
<body>
    <button id="taller">增高</buttom>
    <button id="longer">增长</buttom>
    <button id="changebg">改变背景颜色</buttom>

    <div id="tim"></div>
    <script type="text/javascript">
    //window.onload,在文档加载完之后执行,要养成好习惯写这个
    window.onload=function(){
     
    //给增高按钮增加事件
        document.getElementById("taller").onclick=function(){
     
            // 获取ID为tim的div,点一下增高按钮长度就会增加
            document.getElementById("tim").style.height="300px"
        }
        document.getElementById("longer").onclick=function(){
     
            // 获取ID为tim的div
            document.getElementById("tim").style.width="300px"
    }
    document.getElementById("changebg").onclick=function(){
     
            // 获取ID为tim的div
            document.getElementById("tim").style.background="yellow"
    }
    }
    </script>
</body>
</html>

【javascript系列】史上最全javascript系列教程(二)_第1张图片

下一篇开始JS的数据类型介绍

你可能感兴趣的:(【javascript系列】史上最全javascript系列教程(二))