黑马程序员P23-28

陈韵涵
已于 2023-12-23 17:23:30 修改
阅读量399
点赞数 8
文章标签： html5 css
于 2023-12-23 17:22:47 首次发布
本文链接：https://blog.csdn.net/cyh20040921/article/details/135171618
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="font-size: 30px;">
    </div>
        <div style="font-size: 30px;text-align: center;" id="tb1">课程表</div>
        <table width="800px" border="1" cellspacing="0" align="center">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>分数</th>
                <th>评语</th>        
            </tr>
            <tr align="center" class="data">
                <td>001</td>
                <td>张三</td>
                <td>90</td>
                <td>很优秀</td>
            </tr>
            <tr align="center" class="data">
                <td>002</td>
                <td>李四</td>
                <td>92</td>
                <td>很优秀</td>
            </tr>
            <tr align="center" class="data">
                <td>003</td>
                <td>王五</td>
                <td>83</td>
                <td>很努力，不错</td>
            </tr>
            <tr align="center" class="data">
                <td>004</td>
                <td>赵六</td>
                <td>98</td>
                <td>666</td>
            </tr>
        </table>
        <br>
        <div style="text-align: center;">
        <input type="b1" type="button" value="改变标题内容" onclick="fn1()">
        <input type="b2" type="button" value="改变标题颜色" onclick="fn2()">
        <input type="b3" type="button" value="删除最后一个" onclick="fn3()">
        


        <img id="h1"   src="黑马程序员练习/picture1.jpeg"><br><br>
        <div class="cls">教育</div><br>
        <div class="cls">黑马程序员</div><br>
        <input type="checkbox" name="hobby">电影
        <input type="checkbox" name="hobby">旅游
        <input type="checkbox" name="hobby">游戏
    </div>
    <script>
        //创建字符串对象
        // var str=new String("Hello String");
        // var str="  Hello String   ";

        // console.log(str);
        
        //length(获取字符串长度)
        // console.log(str.length);

        //charAt（获取指定位置的字符）
        // console.log(str.charAt(4));

        //indexOf（检索字符串）
        // console.log(str.indexOf("lo"));

        //trim（去除字符串左右两端空格并返回一个新的字符串）
        // var s= str.trim();
        // console.log(s);

        //substring（start，end）---开始索引，结束索引，含头不含尾，用于截取字符串
        // console.log(s.substring(0,5));





        //自定义对象
        // var user={
        //     name:"Tom",
        //     age:10,
        //     gender:"male",
            // eat:function(){
            //     alert("用膳～")；
            // }
            // eat(){
                // alert("用膳～");
            // }//简化形式
        // }

        // alert(user,name);
        // user.eat();




        //定义json
        // var jsonstr='{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';
        // alert(jsonstr.name);

        //json字符串--js对象
        // var obj=JSON.parse(jsonstr);
        // alert(obj.name);

        //json对象--json字符串
        // alert(JSON.stringify(obj));




        //获取
        // window.alert("hello bom");
        // alert("hello bom window");

        //方法
        // confirm-对话框--确认：true，取消：false
        // var flag=confirm("您确认删除该记录吗？");
        // alert(flag);

        //定时器-setInterval--周期性地执行某一个函数
        // var i=0;
        // setInterval(function(){
        //     i++;
        //     console.log("定时器执行了"+i+"次");
        // },2000);

        //定时器-setTimeout--延迟指定时间执行一次
        // setTimeout(function(){
        //     alert("JS");
        // },3000);

        //location
        // alert(location.href);

        // location.href="https://blog.csdn.net/cyh20040921?spm=1011.2480.3001.5343"



  //DOM
  

        function fn1(){
            document.getElementById('tb1').innerHTML="学员成绩表";
        }
        function fn2(){
            document.getElementById('tb1').style="font-size:30px;text-align:center;color:red;"
        }
        function fn3(){
            var trs=document.getElementsByClassName('data');
            trs[trs.length-1].remove();
        }



        //1.获取Element元素
        //1.1获取元素-根据ID获取
        var img=document.getElementById('h1');
        alert(img);

        //1.2获取元素-根据标签获取(eg.div)
        var divs=document.getElementsByTagName('div');
        for(let i=0;i<divs.length;i++){
            alert(divs[i]);
        }

        //1.3获取元素-根据name属性获取
        var ins= document.getElementsByName('hobby');
        for(let i=0;i<divs.length;i++){
            alert(ins[i]);
        }

        //1.4获取元素-根据class标签获取
        var divs=document.getElementsByClassName('cls');
        for(let i=0;i<divs.length;i++){
            alert(divs[i]);
        }

        //2.查询参考手册，属性、方法
        var divs=document.getElementsByClassName('cls');
        var div1=divs[0];//拿到第一个div元素
        div1.innerHTML="教育666";//改变元素内容
    </script>
</body>
</html>