webAPI

00-操作图片

知识点-获取图片src属性

图片对象.src   ----> 获取图片路径注意:
1. 获取到的图片路径是一个绝对路径

知识点-动态的给图片标签设置路径

图片对象.src = '图片路径';注意:
1.可以设置绝对路径(不推荐)
2.可以设置相对路径

课堂案例-切换图片案例

01-操作标签样式

知识点-通过className方式

设置一个类名

DOM对象.className = '类名';注意:
1. className 属性的值是一个类名,不是一个类选择器

设置多个类名

DOM对象.className = '类名 类名 ....';

移除类名
```
DOM.className = '';
```
课堂案例-动画样式

知识点-通过style方式

语法

DOM.style.属性 = 值;或者DOM对象.style = '属性: 值';例如:
div.style.backgroundColor = 'red';

课堂案例
- 立体动画效果【课堂】
```
ontransitionend 事件:  过渡动画完成后触发的事件
```
- 隔行变色【案例】

知识点-通过H5新增方式

Dom.classList.add()

DOM.classList.add('类名');备注:
1. DOM指的就是一个具体的 标签对象
2. add方法中要设置的是一个类名, 不是类选择器
3. add方法中可以设置多个参数(多个类名)
4. add方法中的参数不能设置数组例如:
div.classList.add('box', 'myborder');

Dom.classList.remove()

DOM.classList.remove('类名')备注:
1. remove()方法的参数中设置的就是要被移除的类名
2. remove()方法中的参数可以设置多个例如:
div.classList.remove('myborder', 'box');

Dom.classList.toggle()

DOM.classList.toggle('类名');备注:
1. toggle() 方法是用来切换类名的
2. 如果标签有类名就移除,如果标签没有类名就添加

Dom.classList.contains()

DOM.classList.contains('类名');备注:
1. 判断标签是否有该类名
2. 返回是一个布尔类型的结果, true 代表有类名, false 代表没有类名

课堂案例-tab栏

02-操作表单控件

知识点-获取/设置输入框信息

语法

获取: DOM.value
设置: DOM.value = 值;备注:
1. DOM.value  获取 表单控件中的值
2. DOM.value  获取的值是一个字符串类型
3. DOM.value = 值; 给表单控件设置值

课堂案例-购物车案例

知识点-设置/获取按钮禁用属性

语法

获取:  DOM.disabled
设置   DOM.disabled = true | false 备注:
1.DOM.disabled  得到的结果是布尔类型的结果  false 代表按钮可以被点击 , true 代表不可以被点击
2.DOM.disabled = true | false  设置按钮的状态

知识点-设置/获取复选框属性

语法

获取: dom.checked
设置: dom.checked = true | false;备注:
1.dom.checked 获取复选框(单选框) 是否被选中, 返回的结果是布尔类型的结果 true 代表选中,false 代表未被选中2.dom.checked = true | false; 设置复选框的状态

课堂案例-同意注册案例
课堂案例-全选反选案例

知识点-设置/获取下拉列表框属性

语法

获取: dom.selected
设置: dom.selected = true | false

03-操作标签属性

系统属性

dom.getAttribute(属性名)；
dom.setAttribute(属性名,值);
dom.removeAttribute(属性名)；

自定义属性
- 标签属性的作用是什么?
- 什么是自定义属性?
- 设置自定义属性
```
dom.dataset.自定义属性名称=值;
```
- 获取自定义属性
```
dom.dataset
```
总结
- getAttribute 既可以操作系统属性又可以操作自定义属性
- dataset 只能操作自定义属性
课堂练习-自定义属性tab栏切换案例

04-事件

文本框事件
- onfocus事件
- onblur事件
- 课堂案例-搜索框案例
鼠标事件
- onmouseenter 事件
- onmouseleave 事件
- onmouseover 事件
- onmouseout 事件
- 课堂案例-鼠标进入隔行变色案例
- 课堂案例-ta栏切换

js(Dom+Bom)第二天（2）相关推荐

js(Dom+Bom)第二天（1）
JavaScript-DOM操作核心知识点 className操作标签样式 style属性方式操作标签样式操作表单控件学习目标能够通过className方式给标签设置样式能够通过style方 ...
js(Dom+Bom)第一天（1）
JavaScript-DOM(BOM)操作核心知识获取页面元素事件设置样式学习目标能够使用id名,标签名等方式获取页面中元素能够给标签注册点击事件,并实现对应效果能够给标签通过js方式 ...
js(Dom+Bom)第六天（1）
webAPI 01-键盘事件知识点-onkeydown事件[掌握] onkeydown: 当键盘上的键被按下时候触发的一个事件知识点-onkeyup事件[掌握] onkeyup: 键盘上键弹起时候 ...
js(Dom+Bom)第五天（2）
webAPI 01-事件监听为什么要学事件监听之前给元素注册事件的时候,同一个事件会被覆盖掉事件监听的本质通过另外一种方式给元素注册事件, 同时可以解决同一个事件不会被覆盖掉. 知识点-通过 ...
js(Dom+Bom)第一天（2）
webAPI 00-复习内置对象中的方法 01-JavaScript组成知识点-ECMASCRIPT 重点回顾存储容器变量数组对象逻辑语法分支语句循环语句 switch语句知识点- ...
js(Dom+Bom)第七天（1）
JavaScript BOM介绍概念 BOM(Browser Object Model)即浏览器对象模型. 本质: 通过对象抽象浏览器中的一些功能例如:(刷新页面,alert,confirm,po ...
js(Dom+Bom)第五天（1）
JavaScript BOM介绍概念 BOM(Browser Object Model)即浏览器对象模型. 本质: 通过对象抽象浏览器中的一些功能例如:(刷新页面,alert,confirm,po ...
js(Dom+Bom)第三天（1）
JavaScript-DOM 节点的层次结构 hasChildNodes() [父元素中是否包含子节点] dom.hasChildNodes() 总结:1.该方法返回的是一个布尔类型的结果用来判断当前 ...
js(Dom+Bom)第八天—Swiper(插件)
Swiper插件(库) 01-基本介绍 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话).主要使用于移动端的网站.移动web apps,nativ ...

js(Dom+Bom)第二天（2）