js的dom学习笔记（2day）

最新推荐文章于 2024-10-08 17:48:41 发布

前端要加油哇

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量96

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_68251084/article/details/123583993

版权

1.操作元素

getElementsById querySelector

练习：分时显示不同图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 300px;

        }
    </style>
</head>
<body>
    <!-- 分时显示不同图片，显示不同问候语 -->
    <img src="1.jpg" alt="">
    <div>上午好</div>
    <script>
        //1.获取元素
        var img=document.querySelector('img');
        var div=document.querySelector('div');
        //2.得到当前的小时数
        var date=new Date();
        var h=date.getHours();
        //2.判断小时数改变图片和文字信息
        if(h<12){
            img.src='1.jpg';
            div.innerHTML='上午好';
        }
        else if(h<18){
            img.src='2.jpg';
            div.innerHTML='下午好';
        }
        else {
            img.src='3.jpg';
            div.innerHTML='晚上好';
        }

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

会根据 getHours得到的事件进行判断，显示不同的提示

注意：date要进行new Date

2.表单操作元素又不相同，一般是通过value来进行修改，如input.value='点击'; btn.disabled=true;

练习：京东显示密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            /* 子绝父相 */
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img{
            position: absolute;
            top: -2px;
            right: -2px;
            width: 48px;

        }
    </style>
</head>
<body>
    <!-- 案例：仿京东显示密码
    点击按钮将密码框切换成文本框，并可以查看密码明文 -->
    <div class="box">
        <label for="">
            <img src="close.jpg" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        //1.获取元素
        var eye=document.getElementById('eye');
        var pwd=document.getElementById('pwd');
        //2.注册事件 处理程序
        var flag=0;
        eye.onclick=function(){
            //重点：点击一次，flag一定要变化
            if(flag==0){
                pwd.type='text';
                eye.src='open.jpg';
                flag=1;
            }else{
                pwd.type='password';
                eye.src='close.jpg';
                flag=0;
            }
            
        }
        //算法：利用一个flag变量来判断flag的值，如果是1切换成文本框，如果是0就是密码框

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

注意：如果想要文本框和密码框进行切换，要用flag进行判断，但是在判断后要将flag进行赋值

练习：淘宝页面的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            /* 子绝父相 */
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            display: block;
        }
        .box img{
            width: 60px;
            margin-top: 5px;
        }
        .close-btn{
            position: absolute;
            top:-1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial,Helvetica,sans-serif;
            /* 鼠标形状设置 */
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        淘宝二维码
        <img src="taobao1.jpg" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        //1.获取元素
        var btn=document.querySelector('.close-btn');
        var box=document.querySelector('.box');
        //2.注册事件 程序处理
        btn.onclick=function(){
            box.style.display='none';
        }
    </script>
    
</body>
</html>

注意：box.style.display='none';这里的display是隐藏显示的意思

练习：精灵图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 250px;
            margin: 100px auto;
        }
        .box li{
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(taobao2.png) no-repeat;
            /* 去除无序列表上的点 */
            list-style: none;
        }
    </style>
</head>
<body>
    <!-- 可以利用for循环设置一组元素的精灵背景 -->
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //1.获取元素
        var lis=document.querySelectorAll('li');
        for(var i=0;i<lis.length;i++){
            //Position'x轴坐标 y轴坐标'
            //让索引号*44 就是每个li背景y坐标
            //index就是y坐标
            var index=i*44;
            //这里的算法一定要注意
            lis[i].style.backgroundPosition='0 -'+index+'px';
        }
    </script>
</body>
</html>

注意：这里加入图片是循环进行

lis[i].style.backgroundPosition='0 -'+index+'px';

3.显示隐藏文本框获得焦点onfocus 失去焦点onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            color: #999;
        }
    </style>
</head>
<body>
    <!-- 案例：显示隐藏文本框内容
               当鼠标点击文本框，里面默认文字隐藏，当鼠标离开文本框，里面文字显示
        1.表单需要两个事件，获得焦点onfocus 失去焦点onblur
        2.如果获得了焦点，判断表单里面的内容是否是默认文字，如果是默认文字，就清空表单内容
        3.如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字 -->
    <input type="text" value="手机">
    <script>
        //1.获取元素
        var text=document.querySelector('input');
        //2.注册事件 获得焦点事件onfocue
        text.onfocus=function(){
            if(text.value==='手机'){
                text.value='';
            }
            //获得焦点需要把文本框里面文字颜色变黑
            text.style.color='#333';
        }
        //3.注册事件 失去焦点事件onblur
        text.onblur=function(){
            if(text.value===''){
                text.value='手机';
            }
            //失去焦点需要把文本框里面的文字颜色变浅
            text.style.color="#999";
        }
    </script>
    
</body>
</html>

4.通过修改元素的className更改元素的样式，适合样式较多或功能复杂的情况，

如果想要保留原先类型.这就是多类名选择器 test.className='first change';

练习：密码框提示错误

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 600px;
            margin: 100px auto;
        }
        .message{
            display: inline-block;
            font-size: 12px;
            color: #999;
            background:url(1.4.1.png) no-repeat left center ;
            /* 给background设置宽度高度，background-size:宽度 高度； */
            background-size: 20px 20px;
            padding-left: 20px;
        }
        .wrong{
            color: red;
            background: url(1.4.2.png) no-repeat left center;
            background-size: 20px 20px;
        }
        .right{
            color: green;
            background: url(1.4.1.png) no-repeat left center;
            background-size: 20px 20px;
        }

    </style>
</head>
<body>
    <!-- 1.判断事件是表单失去焦点onblur
         2.如果输入正确则提示正确的信息颜色为绿色小图标变化
         3.如果输入不是6-16位，则提示错误信息颜色为红色小图标变化
         4.因为变化样式较多，采用className修改样式 -->
    <div class="register">
        <input type="password" name="" class="ipt">
        <p class="message ">请输入6-16位密码</p>
    </div>
    <script>
        //1.获取元素
        var ipt=document.querySelector('.ipt');
        var message=document.querySelector('.message');
        //2.注册事件 失去焦点
        ipt.onblur=function(){
            //根据表单里面值的长度ipt.value.length
            if(ipt.value.length<6||ipt.value.length>16){
                message.className='message wrong';
                message.innerHTML='输入位数不对';
            }else{
                message.className='message right';
                message.innerHTML='输入正确';

            }

        }

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