【学习记录】JavaScript day1

最新推荐文章于 2024-07-26 11:41:15 发布

汪王往往忘

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量96

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/Andyi_Dufresne/article/details/125689048

版权

昨天学了事件，但是好多逻辑都没搞懂，今天重学，JS重点也结束

事件

onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--静态注册onclick事件-->
<button onclick="onclickFun()">按钮1</button>
<!--// 👆 具有了onClick方法（静态注册）-->

<button id="btn01">按钮2</button>
<button id="btn02">按钮3</button>

<script type="text/javascript">
    //方法1
    function onclickFun() {
        //单击事件
        alert("静态注册onclick事件");
    }

    /*document:JavaScript提供的对象（文档）（代表整个页面里面的所有的内容）
    get Element 获取元素（就是标签！）ById
    通过Id获取标签对象
    * */
    //  👇 动态注册onclick事件
    window.onload = function () {
        /*个人理解：
        动态注册：
          window.onload = function (){xxx}
          在页面（window）加载时就载入的function
          同理：
        静态注册就是随用随调用，因为有函数名可查
          function onclickFun(){
          alert("静态注册onclick事件");}
       */
        //加载时载入function，里面两个步骤1 获取对象 2 标签对象.事件名 = function（）{}
        //1获取标签对象
        var btnObj = document.getElementById("btn01");//传参
        alert(btnObj)
        //alert(btnObj) 输出的是[object HTMLButtonElement]
        //2通过标签对象.事件名 = function（）{}
        btnObj.onclick = function () {//点击就执行
            alert("动态注册的onclick事件")
            // PS:相当于btn.function
            // btnObj.(onclick = function (){xxx})
        }

    }

    //  👇 脑洞时刻
    document.getElementById("btn02").onclick = function () {
        alert("zao")
    }
    //没有创建对象，就不能调用方法，ou！只有对象才能调用方法！
    //是不是，语法没问题，执行有问题？  是！
    //Cannot set property of null 无法设置空的属性，嗯，没有找到绑定的方法当然没有对象咯
    //解决方法
    /*
    * 吧SCRIPT
    * 放到最后*/


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

执行过程中console提示Cannot set property of null

无法设置空的属性

其中，onclick有执行错误，当<script>标签再前面的时候，代码

document.getElementById("btn02").onclick = function () {
    alert("zao")
}

提示找不到绑定方法的对象如图：e

没有创建对象，就不能调用方法，ou！只有对象才能调用方法！

是不是语法没问题，执行有问题？是！

Cannot set property of null 无法设置空的属性，嗯，没有找到绑定的方法当然没有对象咯

解决方法吧SCRIPT * 放到最后

对onclick动态注册和静态注册的理解

动态注册逻辑图：

onblur

blur：v.弄脏 模糊

The onblur event occurs when an object loses focus.
当一个对象失去被选种状态时触发onblur事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>失去焦点</title>
    <!--blur：v.弄脏 模糊-->
    <!--
            The onblur event occurs when an object loses focus.
            当一个对象失去被选种状态时触发onblur事件。
            -->
</head>
<body>
<p>
    用户名：<input type="text" onblur="onblurFun()"></p>
<!--直接绑定onblure事件-->
<!--input的onblure，input的功能，所以点进去再点出来，才会有控制台的onblure事件-->
<p>
    密 码：<input type="password" id="password"></p>


onblur 失去焦点事件
<br>
console.log("静态注册失去焦点事件");
<br>

<script type="text/javascript">
    // 静态注册失去焦点
    function onblurFun() {
        //控制台 console，JS提供，用于对浏览器控制台打印输出，用于测试
        //log：打印方法
        console.log("静态注册，失去焦点事件");
        /* alert("在console里面输出哦~~")
         不建议使用alert，会和onblure冲突*/
    }

    // 👇    动态注册 onblur 事件
    window.onload = function (){
        //1 获取标签对象
        var passwordObj = document.getElementById("password");
        //2 对象.事件名 = function(){xx}
        passwordObj.onblur =function () {
            console.log("动态注册，失去焦点事件");

        }
    }

</script>

</body>
</html>

以下依旧是对事件的理解：

在上课的时候代码其实敲错了很多，必须复习和完善，解决自己代码的bug，删了改，改了删

终于没有报错了，放张图片庆贺一下

onchange

这个好简单哈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        <!--直接调用onchange事件-->
        function onchangeFun() {
            alert("女神已经改变了");
        }
        <!--id调用onchange事件-->
        window.onload = function () {
            //1 获取标签对象，将sel赋给selObj！
            var selObj = document.getElementById("sel01");

            // 2 获取标签对象：对象.事件名 = function(){}
            selObj.onchange = function () {
                //对象调用onchange方法
                alert("男神已经改变了");
            }
        }
    </script>

</head>
<body>
请选择你心中的女神：
<!--静态注册 onchange 事件-->
<select onchange="onchangeFun();"><!--直接调用onchange事件-->
    <option>--女神--</option>
    <option>芳芳</option>
    <option>佳佳</option>
    <option>娘娘</option>
</select>
<!--动态注册-->
    请选择你心中的男神：
    <select id="sel01"><!--id调用onchange事件-->
        <option>--男神--</option>
        <option>国哥</option>
        <option>华仔</option>
        <option>富城</option>
    </select>
</select>
</body>
</html>

onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
    <script type="text/javascript">
        //静态注册表单提交
        function onsubmitFun(){
            //如果有不合法就阻止表单提交
            alert("发现不合法，请修改")
            return false;
        }

        window.onload = function (){
            //1 获取标签对象
            var formObj = document.getElementById("form1");
            formObj.onsubmit = function (){

                alert("动态注册发现不合法")

                return true;
                //2 标签对象.事件名
            }
        }
    </script>
</head>
<body>
   <!--returnfalse阻止表单提交-->
   <!-- <form action="http://baidu.com" method="get" onsubmit="onsubmitFun()"> 直接提交-->
   <!--<form action="http://baidu.com" method="get" onsubmit="return false">   一直不能提交-->
   <form action="http://baidu.com" method="get" onsubmit="return onsubmitFun()"><!--返回onsubmit方法-->
        <input type="submit" value="静态注册"/>

   </form>
   <form action="http://baidu.com" method="get" id="form1">
        <input type="submit" value="动态注册"/>
    </form>
<p> onsubmit 事件在提交表单时发生。</p>

</body>
</html>

onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // onload 事件的方法
        // onload 事件是浏览器解析完页面之后就会自动触发的事件
        function onloadFun() {
            alert('静态注册 onload 事件，所有代码');
        }
        //  👆  静态

        // onload 事件动态注册  👇
        window.onload = function (){//加载就触发！
            /*个人理解：
             window.onload = function (){xxx}
            在页面（window）加载时就载入的function
             */
            alert("动态注册的 onload 事件1");
        }
        //  👆 动态注册
        //两者效果一样写法不同
/*        window.onload = function (){
            alert("动态注册的 onload 事件2")
        }*/
        </script>
</head>
<!--事件的注册又分为静态注册和动态注册两种：
什么是事件的注册（绑定）？
就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
静态注册：通过 html 标签的事件属性直接赋于事件响应后的代码。

动态注册：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){}
这种形式赋于事件响应后的代码，叫动态注册。

动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名 = fucntion(){}-->

<!--静态注册 onload 事件
onload 事件是浏览器解析完页面之后就会自动触发的事件
 <body onload="onloadFun();">
 //一句话还行，一直讲就太难了，所以将onload定义在script方法中
 -->
<body>

</body>
</html>

onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
    <script type="text/javascript">
        //静态注册表单提交
        function onsubmitFun(){
            //如果有不合法就阻止表单提交
            alert("发现不合法，请修改")
            return false;
        }

        window.onload = function (){
            //1 获取标签对象
            var formObj = document.getElementById("form1");
            formObj.onsubmit = function (){
                alert("动态注册发现不合法")
                return true;
                //2 标签对象.事件名
            }
        }
    </script>
</head>
<body>
   <!--returnfalse阻止表单提交-->
   <!-- <form action="http://baidu.com" method="get" onsubmit="onsubmitFun()"> 直接提交-->
   <!--<form action="http://baidu.com" method="get" onsubmit="return false">   一直不能提交-->
   <form action="http://baidu.com" method="get" onsubmit="return onsubmitFun()"><!--返回onsubmit方法-->
        <input type="submit" value="静态注册"/>

   </form>
   <form action="http://baidu.com" method="get" id="form1">
        <input type="submit" value="动态注册"/>
    </form>
<p> onsubmit 事件在提交表单时发生。</p>

</body>
</html>

DOM操作

正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script type="text/javascript">
        // 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
        var usernameObj = document.getElementById("username");
        // [object HTMLInputElement] 它就是 dom 对象
        var usernameText = usernameObj.value;
        // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术
        var patt = /^\w{5,12}$/;
                //包含字母e
    var patt = new RegExp("e");
    var patt = /e/;             //也是正则表达式对象
    var patt = /[abc]/
    /*alert(patt);*/

    var patt = /[a-z]/
    var patt = /[a-z]/

    var str = /\w/;
    //test方法
    alert(patt.test(str) );


    </script>
</head>
<body>
RegExp 正则表达式

\w
匹配字母、数字、下划线。等价于 [A-Za-z0-9_]

[A-Z]
[A-Z] 表示一个区间，匹配所有大写字母，[a-z] 表示所有小写字母。

*	匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。
以下正则表达式匹配一个正整数，[1-9]设置第一个数字不是 0，
[0-9]* 表示任意多个数字： /[1-9][0-9]*/

直接用正则，(?i)表示整体忽略大小写，如果单个，则可以写成^d(?i)oc表示oc忽略大小写，^d((?i)o)c表示只有o忽略大小写

String regex1 = "^(?i)doc$";

若要匹配一行文本开始处的文本，请在正则表达式的开始使用 ^ 字符。不要将 ^ 的这种用法与中括号表达式内的用法混淆。//从头到尾检查

若要匹配一行文本的结束处的文本，请在正则表达式的结束处使用 $ 字符。//从头到尾检查

? 问号代表前面的字符最多只可以出现一次

'\\' 匹配 "\"，而 '\(' 则匹配 "("。
</body>
</html>

getElementByXX的查找

getElementById

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GEBID</title>

</head>
<body>
    用户名：<input type="text" name="" id="username" value="btn">
    <span id="usernameSpan" style="color: blue"></span>
    <button onclick="onclilckFun()">校验</button>
    标签被用来组合文档中的行内元素。
    注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
    <img src="../img/getElementByID流程图.png" alt="">
    <script type="text/javascript">
        /*
        * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
        * 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。* */
        function   onclilckFun() {
            //1当操作标签的时候先获取标签对象
            var usernameObj = document.getElementById("username");
            //他就是dom对象
            alert(usernameObj)//ok
            alert(usernameObj.id)//ok
            alert(usernameObj.value)//此valu与<input>的value不一样，这个值会变化的
            var userNameTest = usernameObj.value;//取到username输入的Text，

            //验证字符串的要求：正则表达式：
            var patt = /^w{5,12}$/      //正则表达式！
            /*
            * test()方法用于测试某个字符串，是不是匹配我的规则 ，
            * 匹配就返回 true。不匹配就返回 false.
            * */

            var usernameSpanObj = document.getElementById("usernameSpan");
            //表示起始标签和结束标签的内容
            //innerHTML属性可读可写
            /*   usernameSpanObj.innerHTML("坚持学习！")
            */

            alert(usernameSpanObj.innerHTML);
            //test,用于测试字符串，符合T，不符合F
            if(patt.test(userNameTest)) {//调用userNameTest
                // alert("合法")
                usernameSpanObj.innerHTML = "用户名合法";
            }else {
                // alert("不合法")
                usernameSpanObj.innerHTML = "用户名不合法";

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

getElementsByName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            //所有复选框都选中,根据指定的name指定查询返回多个标签对象的集合
            //和数组一样集合中每个元素都是DOM对象,集合的顺序是创建的顺序
            var hobbies = document.getElementsByName("hobby");//名字都一样哦
            //checked表示复选框中的状态，选中true 没选中false
            //checked属性可读可写// alert(hobbies.length)
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;
                //把chenked的属性改为true！
            }
            alert("一共有：" + hobbies.length + "个"+", 第" +0+"个是" + hobbies[0].value )
        }

        function checkNo() {
            var hobbies = document.getElementsByName("hobby");//名字都一样哦

            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }
        }

        function checkReverse() {
            /*思路：先查到，再遍历,第一次自己解决问题，点个赞！*/
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                if (hobbies[i].checked == true){
                    hobbies[i].checked = false;
                }else {
                    hobbies[i].checked = true;
                }
            }

        }
        function sum(){
            var sum = document.getElementsByName("hobby");
            alert("一共有：" + sum.length + "个"+", 第" +0+"个是" + sum[0].value )

        }
    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp" checked>c++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="python">python
<input type="checkbox" name="hobby" value="go">go
<input type="checkbox" name="hobby" value="c">c

<br>
<button onclick="checkAll()">全选</button>
<!--//绑定函数要加括号！！！！-->
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
<button onclick="sum()">计总数</button>


</body>
</html>

getElementsByName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function sum() {

            var hobbies = document.getElementsByName("hobby");//名字都一样哦

            alert("一共有：" + hobbies.length + "个")
        }

    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp" checked/>c++
<input type="checkbox" name="hobby" value="java"/>java
<input type="checkbox" name="hobby" value="c"/>c
<input type="checkbox" name="hobby" value="ja"/>ja
<input type="checkbox" name="hobby" value="cp"/>c+
<input type="checkbox" name="hobby" value="jav"/>jav


<br>
<button onclick="sum()">checkbox计数器</button>


</body>
</html>

getElementsByTagName

这个全选和反选什么的很有意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            //按照指定标签名查询并且返回集合，和数组一样，集合中都是dom对象，顺序是定义顺序
           var inputs = document.getElementsByTagName("input");
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
            /*t妈的，给爷整笑了，就这？
            * 嗯，就这*/

        }


    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp" checked>c++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="python">python
<input type="checkbox" name="hobby" value="go">go
<input type="checkbox" name="hobby" value="c">c

<br>
<button onclick="checkAll()">全选</button>
<button onclick="checkReverse()">反选</button>



</body>
</html>

查询总结

<!DOCTYPE html>
<html lang="en">
/*
@date 2022-07-08 19:46
Learning objective: Keep learning
title:
*/
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

注：
document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询
如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName


以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。
PS：所以建议将<script>     </script>
    标签写在后面

越往后查询范围越来越大，要过滤的也多

方法：
通过具体的元素节点调用
getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode )
方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

属性：
childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的 class 属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本


</body>
</html>