前段学习小白打卡11

最新推荐文章于 2024-10-16 16:26:58 发布

白潏

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量37

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_65719034/article/details/132106048

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了如何操作HTML表单元素的属性，使用DOM对象进行属性设置，包括数据自定义属性和表单控件的状态管理。同时讲述了定时器和间歇函数的使用，以及JavaScript事件监听，如添加事件处理器、清除定时器，以及元素的样式控制和事件对象的利用。

摘要由CSDN通过智能技术生成

操作表单元素属性
获取：DOM对象.属性名
设置：DOM对象.属性名=新值
表单.value='用户名'
表达.type='password'

表单属性中添加就有效果，移出就没有效果，一律用布尔值表示，如果true就是代表添加了该属性 false就移出了该属性
如：distable(按钮禁用) checked （默认选择·）

自定义属性
data-自定义属性
标签上一律以data-开头
在DOM对象上一律以datase对象方式获取
<div data-id="1"></div>
<div data-id="2"></div>
<div data-id="3"></div>
<div data-id="4"></div>
<div data-id="5"></div>
console.log(id.dataset)//获取对象
console.log(id.dataset.id)//对象中的id data-id

定时器-间歇函数
场景：每隔一段时间需要自动执行一段代码，如倒计时
让定时器函数重复执行代码

开启定时器--开启后就不停（不是立即执行，是浏览器渲染到该行时，过间隔时间才开始）
setInterval（函数，间隔时间）时间单位毫秒,函数不加括号
setInterval（'函数（）'，间隔时间）特殊情况可以运行
定时器返回的是一个id数字，定时器的编号

关闭定时器
let 变量名=setInterval（函数，间隔时间）
clearInterval（变量名）

button属性作为表单用innerHTML

事件监听
元素对象.addEventListener('事件类型',要执行的函数)
点击一次执行一次 click点击
隐藏是元素对象.style.display=none

事件源.on事件=function(){} 这个监听方式会被覆盖
addEventListener方式可以绑定多次，显示多次，拥有事件更多特性

事件类型：
鼠标事件
鼠标触发：click 点击 mouseenter 鼠标经过 mouseleave 鼠标离开

焦点事件
表单获得光标：focus 获得焦点 bulr 失去焦点

键盘事件
键盘触发：keydown 键盘按下触发 keyup键盘拾起触发

文本事件
表单输入触发
input 用户输入事件

获取事件对象
事件对象是有事件触发的相关信息
在事件绑定的回调函数的第一个参数就是事件对象
一般为event，ev，e
search.addEventListener('input',function(e){})
常见属性：
type 获取当前的事件类型
client/clientY 获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置
key 用户按下的键盘键的值
不提倡用keyCode

const str=' pp '
str.trim()//去除左右空格

环境对象
目标：能够分析判断函数运行在不同环境中this所指的对象
环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
普通函数（window.函数名）里面指window，谁调用，this就是谁

回调函数（回头调用）不会直接调用，时机成熟就调用
目标：将函数A作为参数传递给函数B，称函数A为回调函数
当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/my.css">
    <title>Document</title>
</head>
<body>
    <!-- <input type="text" value="电脑"> -->
    <!-- <input type="checkbox" name="" id="" >
    <button disabled>点击</button>
    <div data-id="1"></div>
    <div data-id="2"></div>
    <div data-id="3"></div>
    <div data-id="4"></div>
    <div data-id="5"></div> -->

    <!-- <textarea name="" id="" cols="30" rows="10">
        iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
        iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
        iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读(5)</button> -->


    <div class="tab">
            <div class="tab-nav">
                <h3>每日特价</h3>
                <ul>
                    <li><a class="active" href="javascript:'">精选</a></li>
                    <li><a  href="javascript:'">美食</a></li>
                    <li><a  href="javascript:'">百货</a></li>
                    <li><a  href="javascript:'">个护</a></li>
                    <li><a  href="javascript:'">预告</a></li>
                </ul>
            </div>
            <div class="tab-content">
                <div class="item active"><img src="../webAPI2/image/1.png" alt=""></div>
                <div class="item"><img src="../webAPI2/image/2.png" alt=""></div>
                <div class="item"><img src="../webAPI2/image/3.jpg" alt=""></div>
                <div class="item"><img src="../webAPI2/image/4.jpg" alt=""></div>
                <div class="item"><img src="../webAPI2/image/5.jpg" alt=""></div>
            </div>
    </div>

    <script src="./js/my.js">
    </script>
</body>
</html>

css

.active{
    color: brown;
}
.tab-content .item{
    
    opacity:0;
}
.tab-content .item .active{
    
    opacity:1;
}

白潏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录