湖南响应式网站设计,新乡商城网站建设,怎么改网站模板,静态网页设计心得体会1. 根据CSS选择器来获取DOM元素 (重点#xff09;
获取一个DOM元素我们使用谁#xff1f;能直接操作修改吗#xff1f;querySelector() 可以返回值#xff1a;CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到#xff0c;则返null 获取多个DOM元素我们使…1. 根据CSS选择器来获取DOM元素 (重点
获取一个DOM元素我们使用谁能直接操作修改吗querySelector() 可以返回值CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到则返null 获取多个DOM元素我们使用谁能直接修改吗 如果不能可以怎么做到修改querySelectorAll() 不可以 得到的是伪数组需要for遍历得到每一个元素返回值CSS选择器匹配的NodeList 对象集合注小括号里面的参数里面都要写css选择器必须是字符串也就是必须加引号
2. 操作元素内容
元素.innerText 属性将文本内容添加/更新到任意标签位置。显示纯文本不解析标签 元素.innerHTML 属性将文本内容添加/更新到任意标签位置.会解析标签多标签建议使用模板字符
3. 通过 style 属性操作CSS
语法对象.style.样式属性 ‘值’ 注1. 修改样式通过style属性引出。2. 如果属性有-连接符需要转换为小驼峰命名法。3. 赋值的时候需要的时候不要忘记加css单位 如果需要修改一个div盒子的样式比如 padding-left, 如何写 element.style.paddingLeft ‘300px’ 小驼峰命名 4. 操作类名(className) 操作CSS
可以同时修改多个样式但是直接使用 className 赋值会覆盖以前的类名 语法
//active是一个CSS类名
元素.className active5. 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名我们可以通过classList方式追加和删除类名 语法
//追加一个类
元素.classList.add(类名)
//删除一个类
元素.classList.remove(类名)
//切换一个类有该类名就删除没有就加上重要
元素.classList.toggle(类名)6. 操作表单元素属性
点击眼睛可以看到密码本质是把表单类型转换为文本框
表单.value 用户名
表单.type password如果为true 代表添加了该属性 如果是false 代表移除了该属性。 比如 disabled、checked、selected
表单.checked true//选中按钮
表单.disabled true//禁用按钮7. 定时器-间歇函数
每隔一段时间需要自动执行一段代码不需要我们手动去触发例如网页中的倒计时 开启定时器 setInterval(函数, 间隔时间)
function repeat() {console.log(一秒执行一次)
}, 1000)
//每隔一秒时间调用repeat函数
setInterval(repeat, 1000)作用每隔一段时间调用这个函数。间隔时间单位是毫秒注函数名字不需要加括号。定时器返回的是一个id数字 关闭定时器 let 变量名 setInterval(函数名, 间隔时间)clearInterval(变量名)
let timer setInterval(function(){console.log(一秒执行一次)
},1000)
clearInterval(timer)8. 事件监听
语法 元素对象.addEventListener(事件类型,要执行的函数)
button点击/button
scriptconst btn document.querySelector(button)btn.addEventListener(click, function () {alert(你早呀~)})
/script事件监听三要素 事件源那个dom元素被事件触发了要获取dom元素 事件类型用什么方式触发比如鼠标单击 click、鼠标经过 mouseover 等 事件调用的函数要做什么事 注事件类型要加引号。函数是点击之后再去执行每次点击都会执行一次
9. 事件类型
鼠标事件鼠标触发click 鼠标点击。mouseenter 鼠标经过。mouseleave 鼠标离开焦点事件表单获取光标focus 获得焦点。blur 失去焦点键盘事件键盘触发Keydown 键盘按下触发。Keyup 键盘抬起触发文本事件表单输入触发input 用户输入事件
10. 说说this吧this指向谁
非严格模式下普通函数中this指向的是window若是事件监听函数this指向的是调用者箭头函数是没有this的若想改变this的指向方向可用apply、call【谁调用 this 就是谁】 是判断 this 指向的粗略规则
11. 回调函数
将函数 A 作为参数传递给函数 B 时我们称函数 A 为回调函数使用场景setInterval里的函数和事件监听里的函数写完之后不会立马执行。 定时器每隔一段时间便回头调用这个函数事件监听每点击一次也回头调用该函数。使用匿名函数做为回调函数比较常见
12. 事件冒泡
捕获阶段加true是 从父到子。**冒泡阶段重要**是从子到父当一个元素触发事件后会依次向上调用所有父级元素的 同名事件(如都是click点击事件事件冒泡是默认存在的
13. 阻止冒泡如何做
因为默认就有冒泡模式的存在所以容易导致事件影响到父级元素
事件对象.stopPropagation()14. 阻止元素默认行为如何做
我们某些情况下需要阻止默认行为的发生比如 阻止 链接的跳转表单域跳转
e.preventDefault()15. 解绑事件
**注意匿名函数无法被解绑**所以要给函数命名
function fn() {
alert(点击了)
}
btn.addEventListener(click, fn)
// L2 事件监听移除解绑
btn.removeEventListener(click, fn)16. 鼠标经过事件
mouseover 和 mouseout 会有冒泡效果mouseenter 和 mouseleave 没有冒泡效果推荐
17.事件委托的好处
原理给父元素注册事件当我们触发子元素的时候会冒泡到父元素身上从而触发父元素的事件实现事件对象.target.tagName 可以获得真正触发事件的元素 注e.target是我们点击的对象
18. 自定义属性
定义的id值为字符串型
div data-id0/div
script
const div document.querySelector(div)
console.log(div.dataset.id) // 0
/script
