Javascript的知识整理（9）

2023-08-07 11:00:40

JavaScript

来源博客：【Harryの心阁】

querySelector的使用，兼容性较好

通过类名获取

document.getElementsByClassName('类名')根据类名获得某些元素的集合
document.querySelector('.box')返回指定选择器的第一个元素对象
document.querySelectorAll('选择器')返回指定选择器的所有元素对象

获取特殊元素

获取body元素 document.body
获取html元素 document.documentElement

事件基础

被JavaScript检测到的行为，响应机制
事件源，时间类型，时间处理程序
事件源按钮对象
事件类型比如onclick
事件处理程序通过一个函数赋值的方式完成

    <button id="btn">你好</button>
        <script>
            var btn = document.getElementById('btn');
            btn.onclick = function(){
                alert('世界')
            }
        </script>
<div>你好世界</div>
        <script>
            var dir = document.querySelector('div');
            dir.onclick = function(){
                console.log('我被选中了');
            }
</script>

操作元素

改变页面元素的内容 元素.innerText，不识别标签，非标准，去除空格和换行
元素.innerHtml 可识别标签，可获取标签和空格（形式）
这两个操作元素可获取元素里面的内容

<style>
p{
            width: 200px;
            height: 50px;
            line-height: 50px;
            background-color: #7a1d8d;
        }
        div {
            width: 100px;
            height: 40px;
            list-style: 40px;
            background-color: #8a4444;
        }
    </style>
    <button>
        显示当前系统时间
    </button>
    <div>某个时间</div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var p = document.querySelector('p')
        btn.onclick = function() {
            div.innerText = date();
        }
        function date() {
            var date = new Date();
            var day = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            return '今天是' + day[date.getDay()];
        }
        p.innerText = date();
    </script>

通过修改标签属性

比如：img.src

<style>
        img{
            width: 200px;
        }
    </style>
    <button class="ni">你好</button>
    <button class="ss">世界</button>
    <img src="https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png" alt="">
    <script>
        var ni = document.querySelector('.ni');
        var ss = document.querySelector('.ss');
        var img = document.querySelector('img');
        ni.onclick = function(){
            img.src = 'https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_68883968_20180804_203521.webp'
        }
        ss.onclick = function(){
            img.src = 'https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png'
        }
</script>

分时案例，显示不同的问候语

<style>
    img{
        width: 300px;
    }
</style>
<body>
    <img src="https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png" alt="">
    <div>当前的时间为</div>
    <script>
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        var date = new Date();
        var h = date.getHours();
        if (h < 12){
            img.src = 'https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png'
            div.innerHTML = '现在是上午，好好写代码'
        }else if(h<18){
            img.src = 'https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_68883968_20180804_203521.webp'
            div.innerHTML = '现在是傍晚，好好写代码'
        }else{
            img.src = 'https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_65203608_20171003_092952.webp'
            div.innerHTML = '现在是晚上，好好写代码'
        }
    </script>

修改表单属性

通过修改表单元素的属性，比如：表单元素按钮中，按钮禁用的两种方法
属性名(this).disabled = true

        <button>按钮</button>
        <input type="text" value="输入内容">
        <script>
            var btn = document.querySelector('button');
            var input = document.querySelector('input');
            btn.onclick = function(){
                input.value = '你好世界';
                btn.disabled = true;
                // 禁用按钮 this.disabled = true  
                // this是指时间函数的调用者
            }
        </script>

密码显示与隐藏案例

<style>
    input {
        outline: none;
        border-radius: 5px;
        border: 1px solid #888;
        width: 100%;
    }


    div {
        position: relative;
        width: 200px;
    }

    i {
        position: absolute;
        right: 0px;
        top: 5px
    }
</style>

<body>
    <div>
        <input type="text" placeholder="请输入密码"><i class="fa fa-battery-2"></i>
    </div>
    <script>
        var input = document.querySelector('input');
        var i = document.querySelector('i');
        i.onclick = function () {
            if (input.type == 'text') {
                input.type = 'password';
            } else {
                input.type = 'text';
            }
        }
</script>

通过js修改样式

元素.style里面的属性采用驼峰命名法,行内样式，权重较高
元素.className类名样式属性
利用样式的显示和隐藏 box.style.display: 'none'
精灵图对于有规律的，可以使用for循环

码农公寓

JavaScript

通过类名获取

获取特殊元素

事件基础

操作元素

通过修改标签属性

修改表单属性

通过js修改样式

相关文章