前端javascript的DOM对象操作技巧,全场景解析(二)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 前端javascript的DOM对象操作技巧,全场景解析(二)

前端javascript的DOM对象操作技巧,全场景解析(一):https://developer.aliyun.com/article/1497182

4.隐藏显示密码效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏显示密码效果</title>
</head>
<body>
    <input type="password" name="pwd" value="111" class="abcd" /> <button onclick="change()" id="btn" >点我显示密码</button>
    
    <div>
        <img src="images/oneal1.jpg" />
    </div>
    
    
    <script>

        // 效果1: 显示隐藏密码
        var password = document.querySelector("input[name=pwd]")
        console.log(password);
       // 标签里面的属性叫什么可以写什么,就获取到什么
       console.log(password.type);
        console.log(password.name);
        console.log(password.value); 
        console.log(password.className)

获取到标签以后,可以获取到里面的所有属性

    function change(){
        var btn = document.querySelector("#btn")
        console.log(btn);
        if(password.type=="password"){
            password.type = "text";
            btn.innerHTML = "点我隐藏密码";
        }else{
            password.type= "password";
            btn.innerHTML = "点我显示密码";
        }
    }

    // 效果2:点击换图片
    var img = document.querySelector("img");
    console.log(img)
   // 给图片添加点击事件,这个img是上面获取的img对象
        img.onclick = function(){
        console.log(img.src) // http://127.0.0.1:5500/images/oneal1.jpg
        var arr = img.src.split("/")
        imgname = arr[arr.length - 1]
        console.log(arr , imgname);
        
        if(imgname == "oneal1.jpg"){
            img.src = "images/bakeli.jpg";
        }else{
            img.src = "images/oneal1.jpg";
        }

    }

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

5.全选 反选 全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选,反选,不选</title>
    <style>
        *
        {margin:0px;padding:0px;}
        ul
        {list-style: none;}
        #ul1 li
        {float:left;}
        #ul1 li button
        {width:80px;height:30px;}
        #ul1 li button:hover
        {background-color: tan;}
        #ul2
        {clear:both;}

    </style>
</head>
<body>

    <ul id="ul1">
        <li><button>全选</button></li>        
        <li><button>不选</button></li>
        <li><button>反选</button></li>
    </ul>
    <ul id="ul2">
        <li><input type="checkbox"  /> 看电影 </li>
        <li><input type="checkbox" /> 吃面 </li>
        <li><input type="checkbox" /> 烫头 </li>
        <li><input type="checkbox" /> 跑步 </li>
        <li><input type="checkbox" /> 篮球 </li>
    </ul>

    <script>

        // 获取btn节点对象
        var btn1 = document.querySelector("#ul1 li:nth-child(1) button");
        var btn2 = document.querySelector("#ul1 li:nth-child(2) button");
        var btn3 = document.querySelector("#ul1 li:nth-child(3) button");
        // 全选
        btn1.onclick = function(){
            // 获取#ul2 li 里的input
            /*
                此法现在不推荐使用
                var data_lst = document.getElementById("ul2").getElementsByTagName("input");
                console.log(data_lst)
            */
            var data_lst = document.querySelectorAll("#ul2 li input");
            console.log(data_lst)   //这里获取的是数组

    // 获取数组当中每一个input节点元素对象
    for(var input of data_lst){
        //console.log(input.checked)
        // 设置节点input的checked属性为true;
        input.checked = true;                
    }
}

// 不选
btn2.onclick = function(){
    var data_lst = document.querySelectorAll("#ul2 li input");
    console.log(data_lst)
    // 获取数组当中每一个input节点元素对象
    for(var input of data_lst){
        //console.log(input.checked)
        // 设置节点input的checked属性为false;
        input.checked = false;                
    }
}

// 反选
btn3.onclick = function(){
    var data_lst = document.querySelectorAll("#ul2 li input");
    console.log(data_lst)
    // 获取数组当中每一个input节点元素对象
    for(var input of data_lst){
        根据原来的值判断,取反,实现反选
        if(input.checked === true){
            input.checked = false;
        }else{
            input.checked = true;
        }
    }
}

    </script>
    


</body>
</html>

6.js控制css属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js控制css的相关属性</title>
    <style>
        .box
        {border:solid 1px red;}
        .box_new
        {position: absolute; left:200px;}

    </style>
</head>
<body>
    <button id="box1">点击我换颜色</button>
    <button id="box2">点击我隐藏</button>
    <button id="box3">点击我显示</button>
    <button id="box4">点击边框换圆角</button>
    <button id="box5">点击加样式</button>

    <div class="box" style="width:300px;height:200px;background-color: yellow;font-size:40px;">你好评</div>
   
   <script>
        var box = document.querySelector(".box");
        console.log(box);
        获取所有样式,里面属性字段采用小驼峰命名方式
        console.log(box.style);

// js的dom对象获取相关的css属性

// 获取方法一,js里面的css属性遇到多单词使用小驼峰命名

console.log(box.style.width);

console.log(box.style.backgroundColor);

如果按css的命名方式取值,则会取不到

// 获取方法二,使用css方式获取属性值,按照css的命名方式

console.log(box.style[“width”]);

console.log(box.style[“background-color”]);

console.log(box.style[“font-size”]);

上面两种方式只能获取内联的行内样式,获取不到外部引入的,写在head标签里面style里面的样式信息

内联的样式可以获取到

style引入的获取不到

// 获取方法三 getComputedStyle 获取该节点对象的所有样式,这种方式不管样式是外面css文件引入还是style内部引入,内联写入的css样式都可以获取到
获取的时候,用该方法获取,修改的时候用上面两种方式修改    
   console.log( window.getComputedStyle(box)["font-size"] , "<===getComputedStyle===>");
       console.log( window.getComputedStyle(box).fontSize , "<===getComputedStyle===>");

获取所有样式

通过该方法获取的属性值为字符串类型

 // 事件绑定,前两种获取方式常在修改的时候使用,优先级最高
       var box1 = document.getElementById("box1");
       var box2 = document.getElementById("box2");
       var box3 = document.getElementById("box3");
       var box4 = document.getElementById("box4");
       var box5 = document.getElementById("box5");
       box1.onclick = function(){
            box.style.backgroundColor = "red";
       }

       box2.onclick = function(){
            box.style.display = "none";
       }

       box3.onclick = function(){
            box.style.display = "block";
       }


     //缓慢变圆角,方法一:
       box4.onclick = function(){
   
            //box.style.borderRadius = "100%";
            var point = 0;
            var t = setInterval( function(){
                box.style.borderRadius = `${point}%`;
                if(point < 100){
                    point++;
                }else{
                    clearInterval(t)
                    console.log("结束了... ")
                }

            } , 50)
        }

    //   方法二,先定义一个睡眠函数,借助async函数
        function sleep(time){
        return new Promise((resolve) => setTimeout(resolve, time));
        }

       box4.onclick = async function(){
            for (var point = 0; point< 100; point++){
                box.style.borderRadius = `${point}%`;  
                await sleep(20);
            } 
       }

如果要控制标签button能否被点击,可以控制button的disbaled属性

    /* 重点 添加样式,提前设置好样式,点击事件触发该样式,取消样式把相关样式设为空即可*/
    box5.onclick = function(){
        // box.className = "box box_new";
        加等赋值前面必须要有空格,不然多个名字重叠到一块,不生效
        box.className += " box_new";
    }
    </script>
</body>
</html>

7.js事件

JavaScript常见的事件大体分类及常用事件:

1)鼠标事件

事件 说明

onclick 鼠标单击事件

onmouseover 鼠标移入事件

onmouseout 鼠标移出事件

onmousedown 鼠标按下事件

onmouseup 鼠标松开事件

onmousemove 鼠标移动事件

2)键盘事件

onkeydown 键盘按下

onkeyup 键盘松开

3)表单事件

onfocus 获取焦点时触发

onblur 失去焦点时触发

onselect 选中“单行文本框”或“多行文本框”中的内容时

onselectstart 开始一个新的选择时

onchange 具有多个选项的表单元素选择某一项时触发

onsubmit :确认按钮被点击。

onreset: 重置按钮被点击

4)编辑事件

oncopy 复制(拷贝)时触发

onselect 页面内容被选取时触发

oncontextmenu 按下鼠标右键时触发

5)页面事件

onload 文档加载完成后触发

onbeforeunload 离开页面之前触发

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js事件</title>
    <style>
        *{margin:0px;padding:0px;}
        .box
        {width:100px;height:100px;background: green;position: absolute;left:0px;}
    </style>
</head>
<body>
  
  <!-- 1.事件的静态绑定 -->
    <button onclick="func1()">按钮1</button>
    <div class="box"></div>
    <script>
       先获取节点对象 
       var box = document.getElementsByClassName("box")[0];
        var t;
        console.log(box);
        function func1(){
            var left = parseInt(window.getComputedStyle(box).left)
            console.log(left ,typeof(left));
            // console.log(box.style.left);
            t = setInterval(function(){
                left += 10;
                box.style.left  = `${left}px`;
            } , 50)
        } 

        
        
      
  // 2.事件的动态绑定 
       使用语法:节点对象.事件类型 = 功能函数

        // onmouseover 鼠标指针悬停在指定元素上时触发
        box.onmouseover = function(){
            clearInterval(t);
        }
        // onmouseout  鼠标指针离开指定元素时触发
        box.onmouseout = function(){
            func1()
        }


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

8.js模态框

弹出一个页面,只能点击弹出的页面,后面的页面点不动,也叫遮罩层

比如淘宝的注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <style>
        .box {
            position:fixed;
            width:100%;
            height:100%;
            top:0px;
            background-color: greenyellow;
            display: none;
        }

        .content
        {            
            border:solid 1px red;
            width:500px;
            height:500px;
            background-color:tan;
            margin:auto;
            margin-top:14%;        
        }

    </style>
</head>
<body>
    <button id="login">登录</button>
    <div class="box">
        <div class="content" >
            <span class="close">X</span>
            <br />
            <span>账号: <input type="text"  /></span>
            <br / >
            <span>密码: <input type="password"  /></span>
        </div>
    </div>

    <script>
        var btn = document.getElementById("login");
        var box = document.querySelector(".box");
        var close = document.querySelector(".close");
        btn.onclick = function(){
            console.log(11)
            box.style.display = "block";
        }
        close.onclick = function(){
            box.style.display = "none";
        }



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

点击登录按钮,显示登录界面,// 点击x,关闭登录界面


目录
打赏
0
0
0
0
40
分享
相关文章
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
45 1
JavaScript中对象的数据拷贝
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
123 17
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
91 0
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
333 14
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
109 6
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
111 1

热门文章

最新文章

推荐镜像

更多
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等