JavaScript学习-操作元素案例学习笔记

学习资源为 B站pink老师 JavaScript全集 真的超级详细！！！

来看JS的小伙伴应该学习完HTML和CSS了吧，所以本文案例全部省略css和html部分，直接上JS代码，以供参考，也便于我复习。

1. 仿京东显示隐藏密码

思路分析：

① 核心思路： 点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
② 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
③ 算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1

实现代码：

<script>
        //获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0;
        //注册事件
        eye.onclick = function() {
            //程序执行代码
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = '../img/open.png'
                flag =1;
            }else {
                pwd.type = 'password';
                eye.src = '../img/close.png'
                flag = 0;
            }
        }
    </script>

实现效果：

2.关闭淘宝二维码

思路分析

① 核心思路： 利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素

② 点击按钮，就让这个二维码盒子隐藏起来即可

实现代码：

<script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            box.style.display = 'none';
        }
    </script>

实现效果：

3.显示隐藏文本框内容

当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。

思路分析：

① 首先表单需要2个新事件，获得焦点 onfocus 失去焦点 onblur
② 如果获得焦点， 判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
③ 如果失去焦点， 判断表单内容是否为空，如果为空，则表单内容改为默认文字

代码实现：

<script>
        // 1.获取元素
        var text = document.querySelector('input');
        // 2.注册事件 获得焦点事件 onfocus 
        text.onfocus = function() {
                // console.log('得到了焦点');
                if (this.value === '手机') {
                    this.value = '';
                }
                // 获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = '#333';
            }
            // 3. 注册事件 失去焦点事件 onblur
        text.onblur = function() {
            // console.log('失去了焦点');
            if (this.value === '') {
                this.value = '手机';
            }
            // 失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';
        }
    </script>

效果：