2021-07-22实训js

最新推荐文章于 2022-08-09 21:02:19 发布

sunmengfan__

最新推荐文章于 2022-08-09 21:02:19 发布

阅读量82

点赞数

本文链接：https://blog.csdn.net/sunmengfan__/article/details/118990780

版权

作用域链：

内部函数访问外部函数的变量，采取的是链式查找的方式来决定取什么值，就近与原则。

预解析：

js引擎运行，首先预解析后代码执行。

预解析：会把所有var还有function提升到当前作用域最前面。分为变量预分析但不赋值,所以会出现undefined结果和函数预分析只把函数声明提到前面但不调用。函数表达式一定在函数调用上面。

代码执行：从上到下

web API:

交互效果的实现。

浏览器功能：BOM，页面元素：DOM

DOM：是一个接口。

获取元素：

1.id获取：

<body>
    <div id="time">2019-9-9</div>
    <script>
        //返回一个元素对象,id区分大小写
        var timer = document.getElementById('time');
        console.log(timer);
        console.dir(timer);
    </script>

</body>

2.标签名获取

var timer = document.getElementsByTagName('div');

返回伪数组形式，若页面中没有

可以指定父元素必须是指定的单个元素，可以给其取一个id在使用。

3。新增获取元素

<body>
    <div>
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
    
    <script>
        var boxs=document.getElementsByClassName('box');//类名获得
        console.log(boxs);
        //返回指定选择器第一个元素对象
        var firstBox=document.querySelector('.box');
        console.log('firstBox');
        var nav=document.querySelector('#nav');
        console.log('nav');
        var li=document.querySelector('li');
        console.log(li);
         //返回指定选择器所有元素对象集合
        var allBox =document.querySelectorAll('.box');
        console.log(allBox);
        var lis=document.querySelectorAll('li');
        console.log('lis');
    </script>
</body>

获得html，body标签

var bodyEle=document.body;
var htmlEle=document.documentElement;

事件

三部分：事件源（是事件源被触发的对象）、事件类型（鼠标点击，键盘按下等）、事件处理程序（通过一个函数赋值方式完成）

<body>
    <div>
        123
    </div>

    <script>
        var div = document.querySelector('div');
        div.onclick = function () {
            alert("xuanzhon");
        }
    </script>
</body>

操作元素:

元素内容修改点击改为

body>
    <button>dianji</button>
    <div> shi:</div>
    <!-- 点击按钮时间按改变 -->
    <script>
        //获取元素
        var div = document.querySelector('div');
        var btn = document.querySelector('button');
        btn.onclick = function () {
            div.innerText = '123';
        }
    </script>
</body>

innerText，innerHTML区别

innerHTML常用，显示内容和html标签，识别innerText。innerText不识别innerHTML，清除空格和换行。

修改元素属性：

<body>
    <button id="tu1">tu1</button>
    <button id="tu2">tu2</button>
    <img src="1.jpg" alt="">

    <!-- 点击按钮时间按改变 -->
    <script>
        //获取元素
        var tu1 = document.getElementById('tu1');
        var tu2 = document.getElementById('tu2');
        var img = document.querySelector('img');
        tu1.onclick = function () {
            img.src = "1.jpg";
        }
        tu2.onclick = function () {
            img.src = "2.jpg";
        }
    </script>
</body>

案例

时间不同显示不同

    <style>
        img {
            width: 130px;
        }
    </style>



<body>
    <img src="1.jpg" alt="">
    <div>上午好</div>
    <script>
        var div = document.querySelector('div');
        var img = document.querySelector('img');
        var date = new Date();
        var h = date.getHours();
        document.write(h);
        if (h < 12) {
            div.innerHTML = 'good moring1';
            img.src = '1.jpg';
        }
        else if (h < 18) {
            div.innerHTML = 'good afternoon2';
            img.src = '2.jpg';
        }
        else {
            div.innerHTML = 'good evening3';
            img.src = '3.jpg';
        }
    </script>
</body>

表单元素修改

<body>
    <button>anniu</button>
    <input type="text" value="shuru">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 改变value修改
        btn.onclick = function () {
            input.value = 'beidianji';
            // 禁用按钮
            // this指向函数调用函数的
            this.disabled = true;
        }
    </script>
</body>

京东登录显示密码：

    <style>
        .box {
            width: 400px;
            border-bottom: 1px solid rgba(233, 226, 225, 0.623);
            margin: 100px auto;

        }

        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box img {
            position: absolute;
            top: 95px;
            right: 80px;
            width: 24px;
        }
    </style>


<body>
    <div class="box">
        <label for="">
            <img src="3.jpg" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var f = 0;
        eye.onclick = function () {
            if (f == 0) {
                pwd.type = 'text';
                eye.src = '1.jpg';
                f = 1;
            }
            else {
                pwd.type = 'password';
                eye.src = '3.jpg';
                f = 0;
            }
        }
    </script>
</body>

样式属性

1.element.style=’‘进行修改

2.element.className=’‘修改

操作元素

排他思想

<body>
    <button>111</button>
    <button>111</button>
    <button>111</button>
    <button>111</button>
    <script>
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.background = ' ';
                }
                this.style.backgroundColor = 'red';
            }
        }
    </script>

DOM核心

创建、增删改查

创建：

document.write

innerHTML

createElement

增:

appendChild

insertBefore

删:

removeChile

改:

见上思维导图

查：

DOM的API方法：getElementByld、getElementsByTagName不推荐

H5的新方法：querySelector、querySelectorALL提倡

利用节点获取元素：父（parentNode）、子（children）、兄（previousElenmentSibling、nextElementAibling）提倡。

属性操作：

1.setAttribute：设置dom属性值

2.getAttribute：得到dom属性值

3.removeAttribute移除属性

事件操作：

事件源.事件类型=事件处理程序

注册事件：

监听注册方式：按顺序依次执行

type：事件类型字符串，比如click，mouseover等

listener：事件处理函数，调用于监听函数

useCapture：可选参数，是一个布尔值，默认false

<body>
    <button>111</button>
    <script>
        var but = document.querySelectorAll('button');
        but[0].addEventListener('click', function () {
            alert(22);
        })
        but[0].addEventListener('click', function () {
            alert(33);
        })
    </script>
</body>

删除事件

<body>
    <button>111</button>
    <script>
        var but = document.querySelectorAll('button');
        // but[0].onclick=null;传统方式解除
        but[0].addEventListener('click', fn)//fn不需要加（）
        function fn() {
            alert(22);
            but[0].removeEventListener('click', fn);
        }
    </script>
</body>

DOM事件流

3各阶段：捕获阶段（从上往下传播）、目标阶段、冒泡阶段（事件传播，从底层往上传播）

js只能执行捕获或者冒泡阶段中的一个。

onclick、attachEvent只能得到冒泡阶段

addEventListener（type，listener，【useCapture】）第三个参数=ture表示事件捕获阶段，若为false（不写）表示冒泡事件

事件对象

<body>
    <button>111</button>
    <script>
        var but = document.querySelector('button');
        but.addEventmentListener('click', function (event) {
            console.log(event);
        })
            //event就是一个事件对象，写道侦听函数的小括号力当形参，系统自动创建，不需要传参，是时间一系列相关数据集合比如：鼠标点击包含鼠标相关信息。

    </script>
</body>

sunmengfan__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-22实训js

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取什么值，就近与原则。预解析：js引擎运行，首先预解析后代码执行。预解析：会把所有var还有function提升到当前作用域最前面。分为变量预分析但不赋值,所以会出现undefined结果和函数预分析只把函数声明提到前面但不调用。函数表达式一定在函数调用上面。代码执行：从上到下web API:交互效果的实现。浏览器功能：BOM，页面元素：DOMDOM：是一个接口。获取元素：1.id获取：&lt
复制链接

扫一扫