tips
button设置disable：false ，则按钮不可用
frame
![image-20220331181954955]()
可以直接在src写想要小区域显示的页面路径
添加a标签，点击a链接后iframe区域变的src变为a的href，就是把a所指向的页面在小区域打开。点a链接前显示原本src可以没有
边框0，无边框
<iframe src="demo_iframe.htm" name="iframe_a" frameborder="0"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>
提交不跳转页面
如果不需要刷新页面时，可以通过ifame实现无刷新。
在form表单下定义一个ifame
将 form 的 target 属性指向 iframe 的 name 属性，这样就实现了不刷新页面的form提交。
<form action="url" enctype="multipart/form-data" target="frameName">
<input type="file">上传文件
<button>提交</button>
</form>
<iframe src="" frameborder="0" name="frameName"></iframe>
关键帧动画，父容器为一只熊大小，图片等步距移动。看起来像动图，其实是一张长图的各部分依次展现
![image-20220316203445122](C:\Users\26021\AppData\Roaming\Typora\typora-user-images\image-20220316203445122.pn
select下拉框
document.getElementById("EEE");//定位select下拉框的Dom节点
//这时我们可以使用一个“盒子”对其进行接收
var Dom=document.getElementById("EEE");
//然后我们就可以使用 Dom 来对下拉框进行操作了。
Dom.length;//获取下拉框option的个数 10
Dom.value;//获取下拉框所选择的option中的value值
Dom[i];//获取下拉框 第i项 注意 i是从0开始的
Dom[i].value;//获取下拉框 第i项 的value值 注意 i是从0开始的
Dom.selectedIndex;//获取下拉框被选中的 index值 注意index也是从0开始的
Dom.selectedIndex='i';//选择第i项 注意 i是从0开始的
Dom.selectedOptions;//获取被选中的option 注意这是获取到的为一个数组因此我们需要用使用下面的方法进行获取
Dom.selectedOptions[0];//获取被选中的option <option value="1">第一个OPTION</option>
Dom.selectedOptions[0].value;//获取被选中的option的value值 "1"
Dom.selectedOptions[0].text;//获取被选中的option对应的中文 "第一个OPTION"
Dom[0].text='123';//将第0项的文字改为 123
$("#EEE");//获取节点
$("#EEE").length;//获取下拉框option的个数 10
$("#EEE").value;//获取下拉框所选择的option中的value值
$("#EEE")[i];//获取下拉框 第i项 注意 i是从0开始的
$("#EEE")[i].value;//获取下拉框 第i项 的value值 注意 i是从0开始的
$("#EEE").selectedIndex;//获取下拉框被选中的 index值 注意index也是从0开始的
$("#EEE").selectedIndex='i';//选择第i项 注意 i是从0开始的
$("#EEE").selectedOptions;//获取被选中的option 注意这是获取到的为一个数组因此我们需要用使用下面的方法进行获取
$("#EEE").selectedOptions[0];//获取被选中的option <option value="1">第一个OPTION</option>
$("#EEE").selectedOptions[0].value;//获取被选中的option的value值 "1"
$("#EEE").selectedOptions[0].text;//获取被选中的option对应的中文 "第一个OPTION"
例子
<select :id="item.username">
<option value="2">超级管理员</option>
<option value="1">管理员</option>
<option value="4">卖家</option>
<option value="3">买家</option>
<option value="0">停用</option>
</select>
<button @click="changeRole($event)" :tid="item.username">授权</button>
<script>
let tid = $($event.target).attr('tid'); //获取到 "item.username" 的值
let newRole = $('#'+tid).val(); //获取到 value="4" 的 4
页面回退前进
返回一个页面方法有很多，就好比给返回按钮绑定一个URL，但是如果一个页面可以从很多页面到达，那么这个页面返回的页面就不是固定的，那么绑定固定的URL显然不妥。
history.back(-1)和history.go(-1)都是返回之前页面，但是方法不同
history.back(-1)//直接返回当前页的上一页，数据全部消息，是个新页面
history.go(-1)//也是返回当前页的上一页，不过表单里的数据全部还在
window.location.reload() //刷新
window.history.go(1) //前进
window.history.go(-1) //后退
window.history.forward() //前进
window.history.back() 后退+刷新
HTML DOM 事件
鼠标事件
键盘事件
框架/对象（Frame/Object）事件
表单事件
剪贴板事件
打印事件
拖动事件
动画事件
过渡事件
其他事件
| 事件 |
描述 |
DOM |
| onmessage |
该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发 |
|
| onmousewheel |
已废弃。 使用 onwheel 事件替代 |
|
| ononline |
该事件在浏览器开始在线工作时触发。 |
|
| onoffline |
该事件在浏览器开始离线工作时触发。 |
|
| onpopstate |
该事件在窗口的浏览历史（history 对象）发生改变时触发。 |
|
| onshow |
该事件当 |
|
| onstorage |
该事件在 Web Storage(HTML 5 Web 存储)更新时触发 |
|
| ontoggle |
该事件在用户打开或关闭 元素时触发 |
|
| onwheel |
该事件在鼠标滚轮在元素上下滚动时触发 |
|
DOM事件属性、方法
使用event（jquery的$event调用）
属性
方法
| 方法 |
描述 |
DOM |
| initEvent() |
初始化新创建的 Event 对象的属性。 |
2 |
| preventDefault() |
通知浏览器不要执行与事件关联的默认动作。 |
2 |
| stopPropagation() |
不再派发事件。 |
2 |
目标事件对象
方法
| 方法 |
描述 |
DOM |
| addEventListener() |
允许在目标事件中注册监听事件(IE8 = attachEvent()) |
2 |
| dispatchEvent() |
允许发送事件到监听器上 (IE8 = fireEvent()) |
2 |
| removeEventListener() |
运行一次注册在事件目标上的监听事件(IE8 = detachEvent()) |
2 |
事件监听对象
方法
| 方法 |
描述 |
DOM |
| handleEvent() |
把任意对象注册为事件处理程序 |
2 |
鼠标/键盘事件对象
属性
| 属性 |
描述 |
DOM |
| altKey |
返回当事件被触发时，"ALT" 是否被按下。 |
2 |
| button |
返回当事件被触发时，哪个鼠标按钮被点击。 |
2 |
| clientX |
返回当事件被触发时，鼠标指针的水平坐标。 |
2 |
| clientY |
返回当事件被触发时，鼠标指针的垂直坐标。 |
2 |
| ctrlKey |
返回当事件被触发时，"CTRL" 键是否被按下。 |
2 |
| Location |
返回按键在设备上的位置 |
3 |
| charCode |
返回onkeypress事件触发键值的字母代码。 |
2 |
| key |
在按下按键时返回按键的标识符。 |
3 |
| keyCode |
返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 |
2 |
| which |
返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 |
2 |
| metaKey |
返回当事件被触发时，"meta" 键是否被按下。 |
2 |
| relatedTarget |
返回与事件的目标节点相关的节点。 |
2 |
| screenX |
返回当某个事件被触发时，鼠标指针的水平坐标。 |
2 |
| screenY |
返回当某个事件被触发时，鼠标指针的垂直坐标。 |
2 |
| shiftKey |
返回当事件被触发时，"SHIFT" 键是否被按下。 |
2 |
方法
| 方法 |
描述 |
W3C |
| initMouseEvent() |
初始化鼠标事件对象的值 |
2 |
| initKeyboardEvent() |
初始化键盘事件对象的值 |
3 |
