js2函数用法

最新推荐文章于 2023-08-11 01:20:56 发布

苗苗大佬

最新推荐文章于 2023-08-11 01:20:56 发布

阅读量635

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_39349045/article/details/120035546

版权

this和函数对象的取值

<input type="button" value="点击" onclick="funName(this)"> 
<input type="button" value="点击" onclick="funName()"> 


      function funName(ths){
        console.log("已被点击")
        console.log(this) // 这个this是window的对象
        console.log(ths.value)
        ths.value = "11112222"
        // self



      }

onchange,onblur失去焦点,onfoucs获得焦点,onclick点击学习

 <!-- onchange,onblur失去焦点,onfoucs获得焦点,onclick点击 -->

<!DOCTYPE html>

<html>
  <head>
    <title>title</title>
    <link></link>
    <style>
    </style>
  </head>
  <body>

    <div style="margin: 300px">
      <div id="div1">
        <!-- onchange,onblur失去焦点,onfoucs获得焦点,onclick点击 -->
        <input type="text" placeholder="请输入用户名" id="input1" onblur="clean()" >
        <input type="password" placeholder="请输入密码" id="input2">
      </div>
      <div id="div2">

          <input type="button" value="登录" onclick="login()">

        </div>

      </div>
    </div>
    <script>
    
      function clean(){
        var cleanalert = document.getElementById("alert");
        if (cleanalert){
          cleanalert.remove()
        }
      }
      function login(){
        var input1 = document.getElementById("input1");
        if (input1.value && input1.value.length >=  4 && input1.value.length <=20){
          alert("输入符合要求");
        } else{
          var add  = document.createElement("p");

          add.innerHTML = "<span id='alert'>用户名或密码不符合规范，请重新输入</span>";
          var div1 = document.getElementById("div1");
          div1.appendChild(add);
        }
        console.log("输入的用户名是：",input1.value,"密码:",input2.value)
        alert("输入的用户名是：" + input1.value + "密码:" + input2.value)
      }

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

页面效果
在这里插入图片描述

在这里插入图片描述
光标消失，显示提示：用户名或密码不符合规范，请重新输入

操作上一个节点

 <div id="div3">
          <input type="text" value="1" onblur="clean2(this)">
          <input type="text" value="2" onblur="clean2(this)">
          <input type="text" value="3" onblur="clean2(this)">
          <input type="text" value="4" onblur="clean2(this)">
          <input type="text" value="5" onblur="clean2(this)">
          <input type="text" value="6" onblur="clean2(this)">
          <input type="text" value="7" onblur="clean2(this)">
      </div>

function clean2(ths){
        var cleanalert = document.getElementById("alert");
        alert("当前输入的内容是:"+ths.value)
        // 每次输出前一个标签是什么内容 ？
        if (ths.previousElementSibling){
          alert(ths.previousElementSibling.value);
          console.log(ths.previousElementSibling.value);
        }
        if (cleanalert){
          cleanalert.remove()
        }
      }

区别

function demo1(){
        console.log(name);
        var name = "zhangsan";
      }
      
      function demo2(){
        console.log(names);
        const names = "zhangsan";
      }
      function demo3(){
        console.log(names);
        let names = "zhangsan";
      }

苗苗大佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js2函数用法

this和函数对象的取值<input type="button" value="点击" onclick="funName(this)"> <input type="button" value="点击" onclick="funName()"> function funName(ths){ console.log("已被点击") console.log(this) // 这个this是window的对象 consol
复制链接

扫一扫