- 博客(16)
- 收藏
- 关注
RSS订阅原创 DOM滚动
1.监听页面滚动事件window.onscroll = function() {} window.onscroll = function(){ // 打印网页的滚动位置/坐标, 要用html调用 console.log(html.scrollTop, html.scrollLeft) // 需求: 如何判断网页滚动到底? 课堂练习 // 网页滚动距离 + 显示窗口高度 == 网页总高
2022-03-01 15:59:24
524
原创 Dom尺寸和位置
1.clientWidth,clientHeight 网页的可视高度2.offsetWidth,offsetHeight 网页的实际高度3.scrollWidth,scrollHeight 网页占用的高度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device..
2022-02-28 19:03:02
374
原创 闭包（JavaScript）
不废话，直接看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <
2022-02-25 16:36:39
367
原创 表单事件（JavaScript）
常见的表单事件类型：1.input输入事件 关注输入过程var textInput = document.getElementById("myInput")var radios = document.getElementsByName("sex")textInput.oninput = function(){ console.log("input", this.value) }2.change更新事件 关注输入结果textInput.oncha
2022-02-25 16:33:40
3404
1
原创 键盘事件（JavaScript）
三种键盘事件：onkeydown：键盘按下（持续按下会连续触发） onkeyup：键盘抬起 onkeypress：键盘长按（建议使用keydown代替）键盘事件的事件目标可以是input输入框，也可以是window窗口<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev.
2022-02-25 16:27:21
1216
原创 DOM事件委托机制（javascript）
根据事件传播机制,子标签的事件会冒泡给父标签, 此时我们把本应绑定到子标签上的事件,绑定给父标签, 由父标签来影响子标签触发的事件, 通过e.target获取子标签来实现不同的结果, 这种操作称之为: 事件委托/事件代理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-.
2022-02-24 19:22:16
121
原创 DOM事件传播机制（javascript）
首先，先用一张图（以HTML-->button为例）简单了解一下DOM事件传播机制的基本原理：一个事件从触发到响应，会经历两个阶段（挖洞和冒泡的过程）：挖洞：先从根标签开始，逐层向子标签传递这个事件，直到遇见事件目标（button）结束，然后由事件目标开始响应事件，并且调用事件函数。冒泡：事件目标响应事件，调用事件函数，逐层向父标签传递事件响应，直至HTML根标签结束。注意：事件函数默认是在冒泡过程中调用的，可以通过addEventListener()设置第三个参数为True,改为挖洞
2022-02-24 19:18:33
300
原创 事件参数event总结（JavaScript）
当我们使用属性绑定事件时如果需要事件参数e，需要传入event这个实参。event 事件信息对象，包含了事件目标和坐标信息 event.type 事件类型 event.target 事件触发目标，谁触发了事件（不确定是谁） event.currentTarget 事件目标本身，谁绑定了事件（总是指向事件目标） this this指向事件目标 == event.currentTarget 关于参数e的坐标问题
2022-02-24 17:47:26
1493
原创 属性节点API的增删改查（javascript）
1.特殊属性：可以通过打点进行设置。如：id,href,sec div.id = "d1" // id属性可以直接打点设置 a.href = "www.baidu.com" // a标签的herf属性和img标签的src属性都可以直接打点设置 console.log(div.id) // id， href, src 特殊属性可以直接打点查2.普通属性：name，或者自定义属性 div.setAttribute
2022-02-24 17:24:01
126
原创 DOM节点
1.HTML文档中的所有事物都是DOM节点。HTML文档中的元素 元素节点 HTML文档中的属性 属性节点 HTML文档中的文本 文本节点 HTML文档中的注释 注释节点 HTML文档中的文档本身 文档节点（根节点） HTML文档中的空格和换行 一般被划分为文本节点 2.nodeName属性是获取某一个节点的节点名称。元素节点的nodeName 和元素名称一样（大写） 属性节点的nodeName 和属性名一样 文本节点的
2022-02-24 17:03:30
126
原创 DOM事件简介（javascript）
1.什么是事件？时间就是网页在展示过程中产生的一些用户行为和客户端行为。用户行为：用户点击，输入，拖拽等行为客户端行为：窗口打开关闭，数据的上传 下载，解析等行为2.事件有哪些类型？鼠标事件，键盘事件，表单事件，window事件，拖拽事件3.事件结构事件目标：事件发生在那个目标上，如点击到的button就是事件目标事件类型/事件名：在目标上发生了什么事件，如click指点击事件事件函数：事件发生触发时，调用的函数4.事件的触发流程？客户端或者用户产生了
2022-02-23 11:26:58
570
原创 常用元素节点API的增删改查操作总结（HTML，JavaScript）
声明：只收录常用的API1.增.appendChild()：添加元素节点作为最后一个子节点.append()：添加元素或者文本节点作为最后一个子节点以上两个之间的区别：.append()可以同时传入多个节点或者字符串没有返回值；.appendChild()只能传入一个节点，且不支持字符串。.prepend()：添加元素节点或者文本节点作为第一个子节点.insertBefore( , )：把一个新的元素节点插入到一个已有的节点前边2.删.remove()：把一个元素自身删掉
2022-02-22 17:07:32
627
原创 回调函数（html, javascript）
回调函数的概念：一个函数A的参数（形参），是另一个函数B，那么函数B就是一个回调函数（函数A称为母函数）。回调函数的结构和用法： var arr = ['a','b','c'] arr.forEach(function(item, index){ console.log(index, item) }) // forEach方法遍历数组就是运用回调函数的思想回调函数的实现原理 // Array.pr
2022-02-22 16:30:11
829
原创 JavaScript判断数据类型方法
// typeof 返回一个字符串，表示对应数据的类型 // 可以判断基本类型数据（除了 null）和函数 var type = typeof 123; console.log(type); // number console.log(typeof 'abc'); // string console.log(typeof true); // boolean console.log(typeof undefine.
2022-02-20 21:25:33
244
原创 数组去重方法总结
// 去重方法 1 // 返回 一个满足条件的数组 return classlist.filter((item, index) => { // 判断遍历到的字符串所在的位置是不是第一次出现的位置 return classlist.indexOf(item) === index; // 拼接字符串 }).join(' '); // 去重方法 2, new Set() 把数组结构转成对象结构,自动去重, 然后再[....
2022-02-20 21:24:13
143
原创 HTML基础知识总结
块元素独占一行，可以设置宽高。display:block;form表单form验证：<form action="http://www.baidu.com/s"> <!-- required 必填 --> <!-- \d正则表达式，代表0-9数字，{1,}1个或多个数字，{11}11位数字，{1,10}1-10位数字 --> <input type="text" name="wd" required pattern="\d.
2022-02-19 19:32:00
724
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人