公司网站文章的排版,网站添加文字大小,wordpress百度已收录,广告设计接单appJavaScript-DOM操作
核心知识点
className操作标签样式style属性方式操作标签样式操作表单控件
学习目标
能够通过className方式给标签设置样式能够通过style方式给标签设置样式能够获取表单控件中的值
操作元素样式 语法#xff1a;1.dom.className 类名;2.dom.style.属…JavaScript-DOM操作
核心知识点
className操作标签样式style属性方式操作标签样式操作表单控件
学习目标
能够通过className方式给标签设置样式能够通过style方式给标签设置样式能够获取表单控件中的值
操作元素样式 语法1.dom.className 类名;2.dom.style.属性 值;
备注1.通过style属性方式设置背景色 backgroundColor课堂案例 立体动画效果【课堂】隔行变色【案例】 H5中新增的方式Dom.classList.add() 添加类名Dom.classList.remove() 移除类名Dom.classList.toggle() 切换类名Dom.classList.contains() 是否包含案例1. 使用className方式实现tab栏切换2. 使用classListf方式实现tab栏切换操作表单属性 value属性【购物车案例】 1. 获取表单控件中的值
input type text value 123
script typetext/javascriptvar input document.querySelector(input);alert(input.value);
/script2. 设置表单控件的值
script typetext/javascriptvar input document.querySelector(input);input.value 值;
/scriptdisabled属性 readOnly属性【同意完成注册案例】 1. 获取当前控件是否被禁用
dom.disabled -- 如果返回false代表没有被禁用否则被禁用
dom.readOnly -- 如果返回false代表没有被禁用否则被禁用2. 设置控件是否禁用
dom.disabled true | false;
dom.readOnly true | false;checked属性 1. 获取控件是否被选中
dom.checked --- true 选中 | false (未选中)2. 设置控件是否被选中
dom.checked true | false;selected属性 1. 获取下拉列表是否被选中
dom.selected --- true (选中) | false (未选中)2. 设置控件是否被选中dom.selected true (选中) | false (未选中)
备注1. 下拉列表默认是从第一项开始显示的默认第一项是被选中的状态课堂案例 购物车全选案例反选案例【课堂】 文本框事件 onfocus 获取焦点 dom.onfocus --- 获取焦点时候触发事件onblur 失去焦点 dom.onblur --- 失去焦点触发事件鼠标事件 onmouseenter 鼠标进入事件【没有事件冒泡】 dom.onmouseenter function() {}onmouseleave 鼠标离开事件 dom.onmouseleave function() {}
备注
onmouseenter 和 onmouseleave 是对应的一组onmouseover 鼠标放到标签之上【会有事件冒泡少用】 dom.onmouseover function() {}onmouseout 鼠标离开 dom.onmouseout function() {}多个标签注册事件获取索引方式 实现的功能用户点击鼠标悬停到标签上获取该标签对应的索引方式1. 通过给标签对象动态添加一个表示索引的属性并赋值2. 通过代码获取该索引值即可课堂案例 隔行变色鼠标移动高亮显示案例【课堂】tab栏切换案例【课堂】 标签属性操作方式 系统属性 ☞ 获取属性的值dom.getAttribute(属性名)备注1. 通过getAttribute可以获取标签属性对应的值2. 如果标签没有对应的属性那么getAttribute返回null
☞ 设置dom.setAttribute(属性名,值);备注1.通过setAttribute可以给标签添加新的属性2.如果该标签已经存在某个属性是对该属性值得修改
☞ 删除dom.removeAttribute(属性名)备注1. 通过removeAttribute可以将属性移除 自定义属性 概念以 data-* 开始的属性为自定义属性作用 保存数据(处理业务中的数据)☞ 获取dom.dataset --- 返回自定义属性的对象【该属性只能获取自定义属性】 dom.dataset.属性名称 dom.dataset[属性名称]
☞ 设置Dom.dataset.自定义属性名称值;
备注getAttribute()也可以用来获取自定义属性课堂案例 利用自定义属性实现tab栏切换效果【课堂】
