JavaScript学习日志

Faith.777

已于 2023-12-04 00:00:04 修改

阅读量396

点赞数 14

文章标签： javascript 学习开发语言

于 2023-12-02 22:18:06 首次发布

本文链接：https://blog.csdn.net/2303_80224736/article/details/134758838

版权

12.1-12.2

自主学习了JS 第一章、第二章、第四章、第九章的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <!--外部JS用script标签的引入src-->
        <title></title>
        <style type="text/css">
            table {border-collapse:collapse;}
            tr,td
            {
                width:80px;
                height:20px;
                border:1px solid gray;
            }
        </style>
    <script type="text/javascript">
       document.write("hello world")
        function alertMes(){//alert()：弹出一个对话框
                alert("The only true power comes from within.")
            }
           
    </script>
    </head>
    <body><!--JS可以放在body或者head内部放在script标签内,省略了type="text/javascript"-->
        <!--input type="button" value="按钮" onclick="alertMes()"/-->
        <!--在元素事件中编写JavaScript-->
        <script>
        var x=1;document.write("x")//变量与常量,变量由字母、下划线、$或数字组成，并且第一个字母必须是“字母、下划线或$”,变量声明:var 变量名 = 值;常量声明常量名全部大写
        document.write("'你好</br>'")//字符串:单双引号都可以,可互相包含,但是不可以同类引号叠加
        //布尔值:true和false,用于选择结构的条件判断
        //未定义值输出JS会显示undefined 空值用null
        //逻辑运算&&与,||或,!非;条件表达式:var a = 条件 ? 表达式1 : 表达式2;(true选1,false选2)
        var a=Number("123")+56;document.write(a);//类型转换 （1）Number(),将任何“数字型字符串”转换为数字 NAN指的是“Not a Number（非数字）”
        //parseInt()和parseFloat()提取“首字母为数字的任意字符串”中的数字,parseInt()提取的是整数部分，parseFloat()不仅会提取整数部分，还会提取小数部分
        var b=parseFloat("123.123hello")+56;document.write(b);
        //数字转换为空字符串1.与空字符串相加2.元素调用.toString()方法
        //用\'为英文单引号\"为双引号\,（1）如果是在document.write()中换行，则应该用：<br/>,（2）如果是在alert()中换行，则应该用：\n
        document.write("</br>The only true power comes from within.</br>真正的力量源自内心</br>");
        alert("Can't fight a little.\n奋斗不了一点");
        //注释与Java相同
        //函数用function定义
        var a = "出头";
        //定义函数
        function getMes() 
        {
            var b = a + "18速";
            return b;//可帮助调用局部变量
        }
        //调用函数
        getMes();//直接调用
        var str = "一发入魂" + getMes();//表达式中调用
        document.write(str);
        //<a href="javascript:Dream()">星期四v我50</a>//超链接中调用
        //定义阶乘函数,内部定义的函数只能在内部用
        function func(a)
         {
             //嵌套函数定义，计算平方值的函数
             function multi (x)
             {
                 return x*x;
             }
             var m=1;
             for(var i=1;i<=multi(a);i++)
             {
                 m=m*i;
             }
             return m;
         }
         //调用函数
         var sum =func(2)+func(3);
         document.write(sum);
         //Document Object Model（文档对象模型）常见节点分为元素节点,属性节点,文本节点
         window.onload = function () 
        {
            var oDiv = document.getElementById("div1");//<!--getElementByld在JavaScript中，可通过id来选中元素-->
            oDiv.style.color = "pink";
            var oUl = document.getElementById("list");
            var oLi = oUl.getElementsByTagName("li");//getElementsByTagName()方法通过标签名来选中元素
            var oL = document.getElementsByClassName("select");//getElementsByClassName()方法通过class来选中元素
            oLi[4].style.color = "red";
            oL[2].style.color="blue";
            var oInput = document.getElementsByName("status");//getElementsByName()方法通过name属性来获取表单元素
            oInput[1].checked = true;//将第二个单选框选中
            //类数组只能用到两点：length属性；下标形式
            //querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素
            //就像document.querySelectorAll(".test")表示获取所有class为test的元素。由于获取的是多个元素，因此这也是一个类数组。想要精确得到某一个元素，也需要使用数组下标的形式来获取。
            //而document.querySelector("#list li:nth-child(3)")表示选取id为list的元素下的第3个元素
            var oDiv = document.getElementById("content");
            var oStrong = document.createElement("strong");//创建元素节点
            var oTxt = document.createTextNode("haha,我数据结构要考试的部分看完了"); //创建文本节点
            //将文本节点插入strong元素
            oStrong.appendChild(oTxt);
            //将strong元素插入div元素（这个div在HTML已经存在）
            oDiv.appendChild(oStrong);
            oDiv.style.color="brown";
            //创造复杂节点
            var oInput = document.createElement("input");
            oInput.id = "submit";
            oInput.type = "button";
            oInput.value = "提交";
            document.body.appendChild(oInput);
            //可用循环创造多个元素
             //动态创建表格
             var oTable = document.createElement("table");
            for (var i = 0; i < 3; i++)
            {
                var oTr = document.createElement("tr");
                for (var j = 0; j < 3; j++)
                {
                    var oTd = document.createElement("td");
                    oTr.appendChild(oTd);
                }
                oTable.appendChild(oTr);
            }
            //添加到body中去
            document.body.appendChild(oTable);
        
        }
        </script>
        <div id="div1">It is always misty .</div>
        <ul id="list">
            <li>HTML</li>
            <li class="select">CSS</li>
            <li class="select">JavaScript</li>
            <li class="select">jQuery</li>
            <li>Vue.js</li>
            
        </ul>
        你最喜欢的游戏:
    <label><input type="radio" name="status" value="本科" />精灵与萤火意志</label>
    <label><input type="radio" name="status" value="硕士" />人类一败涂地</label>
    <label><input type="radio" name="status" value="博士" />特工A</label>
    <div id="content"></div>
    </body>
</html>

12.3

自主学习了元素的插入、删除、替换、复制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <!--外部JS用script标签的引入src-->
        <title></title>
        <style type="text/css">
            table {border-collapse:collapse;}
            tr,td
            {
                width:80px;
                height:20px;
                border:1px solid gray;
            }
        </style>
    <script type="text/javascript">
        function alertMes(){//alert()：弹出一个对话框
                alert("The only true power comes from within.")
            }
           
    </script>
    </head>
    <body><!--JS可以放在body或者head内部放在script标签内,省略了type="text/javascript"-->
        <!--input type="button" value="按钮" onclick="alertMes()"/-->
        <!--在元素事件中编写JavaScript-->
        <script>
            window.onload=function ()
            {
                var oBtn = document.getElementById("btn");
            //为按钮添加点击事件
            oBtn.onclick = function () 
            {
                var oUl1 = document.getElementById("list1");
                var oTxt = document.getElementById("txt");
                //将文本框的内容转换为“文本节点”
                var textNode = document.createTextNode(oTxt.value);
                //动态创建一个li元素
                var oLi = document.createElement("li");
                //将文本节点插入li元素中去
                oLi.appendChild(textNode);
                //将li元素插入ul元素中去
                oUl1.appendChild(oLi);
            };
            var oBtn1 = document.getElementById("btn1");
            //为按钮添加点击事件
            oBtn1.onclick = function () 
            {
                var oUl2 = document.getElementById("list2");
                var oTxt = document.getElementById("txt1");
                //将文本框的内容转换为“文本节点”
                var textNode = document.createTextNode(oTxt.value);
                //动态创建一个li元素
                var oLi = document.createElement("li");
                //将文本节点插入li元素中去
                oLi.appendChild(textNode);
                //将li元素插入ul元素中去
                oUl2.insertBefore(oLi,oUl2.firstElementChild);//将元素插入父元素中某个子元素之前
            };
            var oBtn3= document.getElementById("btn3");
            oBtn3.onclick = function () 
            {
                var oUl1 = document.getElementById("list1");
                //删除最后一个子元素
                oUl1.removeChild(oUl1.lastElementChild); //用removeChild()方法来删除父元素下的某个子元素           
            }
            var oBtn4 = document.getElementById("btn4");
            oBtn4.onclick = function () 
            {
                var oUl2 = document.getElementById("list2");
                document.body.removeChild(oUl2);
            }
            var oBtn5= document.getElementById("btn5");
            oBtn5.onclick = function () 
            {
                var oUl = document.getElementById("list1");
                document.body.appendChild(oUl.cloneNode(1));//使用cloneNode()方法来实现复制元素
                
            }
            var oBtn6 = document.getElementById("btn6");
            oBtn6.onclick = function () 
            {
                var oFirst = document.getElementById("dear");
                //获取2个文本框
                var oTag = document.getElementById("tag");
                var oTxt = document.getElementById("txt2");
                //根据2个文本框的值来创建一个新节点
                var oNewTag = document.createElement(oTag.value);
                var oNewTxt = document.createTextNode(oTxt.value);
                oNewTag.appendChild(oNewTxt);
                document.body.replaceChild(oNewTag, oFirst);//使用replaceChild()方法来实现替换元素。
            }
          
        }
        
        
        </script>
        
    <ul id="list1" type="square">
        <li>Java</li>
        <li>概率论</li>
        <li>数据结构</li>
    </ul>
    <ul id="list2" type="circle">
        <li>睡觉</li>
        <li>吃饭</li>
        <li>玩游戏</li>
    </ul>
    <input id="txt" type="text"/><input id="btn" type="button" value="插入" />
    <input id="txt1" type="text"/><input id="btn1" type="button" value="添加" />
    <input id="btn3" type="button" value="删除" />
    <input id="btn4" type="button" value="删除空心圆序列" />
    <input id="btn5" type="button" value="复制" />
    <div id="dear">hello</div>
    <hr/>
    输入标签：<input id="tag" type="text" /><br />
    输入内容：<input id="txt2" type="text" /><br />
    <input id="btn6" type="button" value="替换" />
    </body>
</html>

两种插入(插入序列后与前)