1.事件

  • onclick —>点击事件
  • onmouseover —>鼠标移到某元素之上
  • onmouseout —>鼠标从某元素移开
  • onfocus —>获取焦点
  • onblur —>失去焦点
  • onkeyup —>在键盘按键松开时发生
  • onscroll —>窗口滚动
  • onload —>页面加载时触发
  • onchange —>域的内容改变时发生
  • onsubmit —>表单中的确认按钮被点击时发生
  • onresize —>浏览器的尺寸发生改变
    1. <div id="test">hello world</div>
    2. <script>
    3.     var test=document.getElementById("test");
    4.     test.onclick=function(){
    5.         // this在事件中指向正在执行事件的当前对象
    6.         this.style.color="red"   //更改颜色
    7.         /* innerHTML属性更改内容 */
    8.         this.innerHTML="change"
    9.     }
    10.     /* 鼠标悬停的事件 */
    11.     test.onmouseover=function(){
    12.         this.style.background="#333"
    13.     }
    14.     /* 鼠标移出的事件 */
    15.     test.onmouseout=function(){
    16.         this.style.background="#fff"
    17.     }
    18. </script>
  1.    <input type="text" id="input">
  2.      <script>
  3.         /* onfocus -->获取焦点
  4.         onblur    -->失去焦点*/
  5.         var input=document.getElementById("input");
  6.         input.onfocus=function(){
  7.             this.style.backgroundColor="red"
  8.         }
  9.         input.onblur=function(){
  10.             this.style.backgroundColor="green"
  11.         }
  12.         /* 键盘松开的时候发生的事件 */
  13.         input.onkeyup=function(event){
  14.             /* keycode返回一个键盘码 */
  15.             // console.log(event.keyCode)
  16.             if(event.keyCode==13){   //enter：13
  17.                 /* 只要是对象的属性，都可以通过点的方式去获取值 */
  18.                 console.log(this.value)
  19.             }
  20.         }
  21.     </script>
  1.     <p>你还可以输入<em id="section">0</em>/150</p>
  2.     <textarea id="txt" cols="30" rows="10"></textarea>
  3.     <script>
  4.         var em=document.getElementById("section");
  5.         var txt=document.getElementById("txt");
  6.         txt.onkeyup=function(){
  7.             var length=this.value.length;
  8.             em.innerHTML=length;
  9.         }
  10.     </script>

捕获.PNG

  1. 滚动
  2. <head>
  3.   <style>
  4.         body{
  5.             height:2000px;
  6.         }
  7.         .nav{
  8.             height:60px;
  9.             position:fixed;
  10.             left:0;
  11.             top:0;
  12.             width:100%;
  13.             background: red;
  14.             opacity: 0;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="nav" id="nav">导航</div>
  20.     <script>
  21.         /* onscroll 滚动事件 */
  22.         var nav=document.getElementById("nav")
  23.         window.onscroll=function(){
  24.             /* 获取滚动条距离顶部的高度 */
  25.             var scrollTop=document.documentElement.scrollTop;
  26.             /* 当滚动条距离顶部的高度到300时候完全显示 */
  27.             var opacity=scrollTop/300;
  28.             if(opacity>1){
  29.                 opacity=1
  30.             }
  31.             nav.style.opacity=opacity;
  32.             // console.log(scrollTop)
  33.         }
  34.     </script>
  35. </body>
  1.     <input type="text" id="input">
  2.     <script>
  3.         /* 
  4.         onload 等DOM树以及图片相关资源加载完毕，再执行函数中的代码
  5.          */
  6.         window.onload=function(){
  7.             var input=document.getElementById("input")
  8.             input.onchange=function(event){
  9.                 console.log(this.value)
  10.             }
  11.             // console.log("页面加载")
  12.         }
  13.     </script>
  2.     <textarea name="" id="txt" cols="30" rows="10"></textarea>
  3.     <script>
  4.         var txt=document.getElementById("txt");
  5.         txt.onchange=function(){
  6.             console.log(1)
  7.         }
  8.     </script>
  1.     <form name="form" id="form">
  2.         <input type="text" name="username">
  3.         <input type="text" name="email">
  4.         <input type="submit">
  5.     </form>
  6.     <script>
  7.         var form=document.getElementById("form")
  8.         /* form.onsubmit 不用单独抓取内部元素 */
  9.         form.onsubmit=function(){
  10.             console.log(this.username.value);
  11.             console.log(this.email.value)
  12.             return false;
  13.         }
  14.     </script>

捕获.PNG

  1.     <script>
  2.         window.onresize=function(){
  3.             /* window.innerWidth 获取窗口的width */
  4.             console.log(window.innerWidth)
  5.         }
  6.     </script>

捕获.PNG

2.切换

  1. 1.用js写    //引入<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2.     <script>
  3.         var btn=document.getElementById("btn")
  4.         var test=document.getElementById("test")
  5.         btn.onclick=function(){
  6.             var value=test.style.display;
  7.             // console.log(value)
  8.             if(value=="block"){
  9.                 test.style.display="none"
  10.             }else{
  11.                 test.style.display="block"
  12.             }
  13.         }
  14.       </script>
  15. 2.用jquery写
  16.     <script>
  17.         $("#btn").click(function(){
  18.             /* is(":visible")判断一个元素是否显示 */
  19.             var isShow=$("#test").is(":visible")
  20.             if(isShow){
  21.                 $("#test").hide(300)
  22.             }else{
  23.                 $("#test").show(300)
  24.             }
  25.         })
  26.     </script>
  27. 3.toggle() 集成了hide(),show()
  28.     <div id="test">hello world</div>
  29.     <button id="btn">切换</button>
  30.     <script>
  31.         $("#btn").click(function(){
  32.             /* toggle() 集成了hide(),show() */
  33.             $("#test").toggle(300)
  34.         })
  35.     </script>