JS学习笔记day04
今日内容
零、 复习昨日
一、事件
二、DOM操作
三、案例
零、 复习昨日
js 脚本语言,弱类型
引入方案: 3种
js的内容:
- 语法
- dom
- bom
语法
变量 var
数据类型
引用类型 - 对象,JSON
- {key:value,key:value}
数组
- var arr = new Array();
- var arr = [1,2];
- 下标取值赋值
- pop() shift() push() unshift()
日期
- var date = new Date()
运算
- 没有& , |
- === 用来判断类型和值都相等才返回true
分支+循环
函数
function m1(a,b){
return a+b;
}
一、事件
1.1 事件介绍
事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等
1.2 事件绑定方式
事件要想发生,就得将事件和标签先绑定
一个完整的事件有三部分
- 事件源(标签)
- 什么事(事件)
- 响应(动作效果)
事件绑定,其实就是事件和标签绑定
- 方式1: 事件源,事件,响应在一起
- 方式2: 事件源,事件在一起,响应抽取函数
- 方式3: 事件和响应全部抽取
方式1: 事件源,事件,响应在一起
方式2: 事件源,事件在一起,响应抽取函数
方式3【重要】: 事件和响应全部抽取
练习：div宽高各200,背景颜色red,设计点击事件,点击是出现弹框,并有输出语句 计算,点击次数
1.3 不同事件的演示
这些事件,都是html中标签的属性,都是以onxxx开头
| 事件名称 | 描述 |
|---|---|
| onchange | HTML 元素内容改变 |
| onblur | 输入框失去焦点 |
| onfocus | 输入框获得焦点 |
| onclick | 用户点击 （单击）HTML 元素 |
| ondblclick | 用户双击HTML元素 |
| onmouseover | 用户将鼠标移入一个HTML元素中 |
| onmousemove | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeyup | 键盘弹起 |
| onkeydown | 用户按下键盘按键 |
| onkeypress | 按压键盘 |
| onload | 浏览器已完成页面的加载 |
| onsubmit | 表单提交 |
1.3.1 鼠标事件
1.3.2 键盘事件
1.3.3 表单事件【重点】
是指表单中能用上的一系列事件
- onblur 失去焦点
- onfocus 获得焦点
- onchange 内容改变
- onsubmit 表单提交
1.3.4 加载事件【重点】
浏览器加载页面,是瀑布式加载,即从上之下依次加载执行.
加载事件
二、DOM操作
2.1 概述
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pq4GefEE-1678454186311)(https://qiushiju-tuchuang.oss-cn-hangzhou.aliyuncs.com/image/dom%E6%A0%91.jpg)]
有了DOM树,就可以通过树来查找节点(元素),找到元素就可以对元素进行操作(修改,删除,添加),还可以操作元素的样式
JavaScript 能够改变页面中的所有 HTML 元素。
JavaScript 能够改变页面中的所有 HTML 属性。
JavaScript 能够改变页面中的所有 CSS 样式。
JavaScript 能够对页面中的所有事件做出反应。
2.2 查找元素
查找元素(标签)有很多方式
- 通过id查找元素
- document.getElementById(“id属性值”);
- 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
- 如果未找到该元素，则 x 将包含 null。
- 通过标签名查找元素
- 方法：getElementsByTagName(“合法的元素名”);
- 如果找到,返回的是数组
- 通过class查找元素
- 方法：getElementsByClassName(“class属性的值”)
- 如果找到,返回的是数组
- 貂蝉
- 西施
- 王昭君
- 杨玉环
- 邓紫棋
- 邓丽君
- 张曼玉
- 朱茵
2.3 元素内容的查找和设置
元素内容,是指标签开闭之间的内容.
这就是内容
这就是内容
查找和设置使用的是相同的属性
- innerHTML 获得或设置标签的内容
- get === value 获得提交的信息内容
- set === value 设置
- innerText 获得或设置标签的内容
你好啊,JavaScript
2.4 元素属性的查找和设置
元素属性,是指开标签内的属性,通过dom对象直接调用操作.比如
- domObj.id
- domObj.name
- domObj.value
- …
2.5 元素CSS样式的查找和设置
元素css样式的查找和设置,是指标签中style的属性值的获得和设置
- 获得属性值
- 元素对象.style.属性
- 设置属性值
- 元素对象.style.属性 = “值”
2.6 操作元素
如需向 HTML DOM 添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
创建元素：document.createElement()
追加元素：appendChild()
创建出一个文本内容,这个内容是值开闭标签间的文本内容
document.createTextNode(“文本内容”);
删除已有的 HTML 元素,使用方法：removeChild()
2.9 删除元素
删除子节点
- 元素对象.removeChild(子元素);
- 刘德华
- 吴彦祖
- 彭于晏
2.10 改变HTML
改变HTML输出流：document.write() 可用于直接向 HTML 输出流写内容
三、案例
练习1
输入框,点击输入框时,将输入框变高300,宽300,边框蓝色,背景红色.当离开输入框时,样式消失
事件: 获得焦点,失去焦点
要设置css样式