JS中BOM事件，JS样式特效，表格对象和表单操作

梦向心海

DOM事件

1.DOM中的事件可以分为两类

• 1.浏览器行为
  如：文档加载完成，图片加载完成
  
• 2.用户行为
  如：输入框输入数据，点击按钮
  

(2).常见的DOM事件

1. onload        浏览器已完成页面的加载
2. 支持事件的对象    window image
3. onchange    HTML 元素改变
4. onclick        用户点击 HTML 元素
5. onmousemove    用户移动鼠标
6. onmouseover    鼠标移动到元素上
7. onmouseout    鼠标移开某元素上
8. onmousedown    鼠标按下
9. onmouseup    鼠标松开
10. onkeydown    用户按下键盘按键
11. onkeyup        按下键盘松开
12. onblur        失去焦点
13. onfocus        获取焦点

复制代码

(3).DOM事件绑定的二种方式
1.在元素的事件属性中直接绑定
如：

1. <button type="button" onclick="alert('haha')">点击看看</button>

复制代码

2.通过元素对象的事件属性赋值(匿名函数实现)
如：

1. <button type="button" onclick="alert('haha')">点击看看</button> var oBtn=document.getElmentById("btn"); oBtn.onclick=function(){     alert('haha'); }

复制代码

JS样式特效

1.使用js获取或设置css样式(只能获取或设置行内样式)

语法：

1. node.style.属性名=属性值
2. 注意：当属性名为蛇形命名时，要转换成小驼峰命名
4. node.style.color="red"
5. node.style.fontSize="30px"

复制代码

2.使用js获取或设置css类名

语法：

1. node.className=类名
2. node.className="a1";
3. node.className="a1 b1";
4. 获取元素的位置:
5. event.offsetX；
6. event.offsetY；
7. event.clientX；
8. event.clienY；

复制代码

3.实现广告图所需事件

事件：当网页滚动时触发的事件

1. onscroll
2. 获取网页滚动上边距的距离
4. document.body.scrollTop
5. 或者
7. docuemnt.documentElement.scrollTop

复制代码

4.日期时间对象

Date日期对象用于处理日期和时间
1、【创建】Date 对象：

1. var myDate=new Date();
3. 创建空的Date对象时表示的值是当前的日期和时间
5. var myDate=new Date(dateString)
6. var myDate=new Date(year, month, day, hours, minutes, seconds, milliseconds)；
7. 日期字符串dateString：
8. 规则：
9. 1、日期字符串是可选的。
10. 2、日期在前，时间在后。
11. 3、日期常用（空格，横线-，逗号,）分隔，时间以（冒号:）分隔

复制代码

2、Date对象的属性和方法
获取当前时间：

1. var d=new Date();
2. //获取年：
3. var year=d.getFullYear();
4. //获取月：
5. var month=d.getMonth();
6. //获取日：
7. var date=d.getDate();
8. //获取时分秒：
9. var hours=d.getHours();
10. var minutes=d.getMinutes();
11. var seconds=d.getSeconds();
12. //获取星期：
13. var day=d.getDay();

复制代码

表格对象和表单操作
1、表格对象的属性

• 表格对象的边框：表格对象.border
  
• 表格对象的宽度：表格对象.width
  

2、表格对象的行操作（row）

1. 表格对象的所有行： 表格对象.rows;
2. 表格对象的行数：  表格对象.rows.length
3. 表格对象的第一行： 表格对象.rows[0]
4. 表格对象的最后一行：表格对象.rows[表格对象.rows.length-1]
5. 行对象获取行下标: 行对象.rowIndex
6. 删除行：删除指定下标行        表格对象.deleteRow(行的下标)
7. 插入行：在指定下标行前插入行    表格对象.insertRow(行的下标)
8. 返回值：返回行对象

复制代码

3、表格对象的列操作（cell）

1. 行对象的所有列：    行对象.cells;
2. 行对象的第一列：    行对象.cells[0]
3. 行对象的最后一列：    行对象.cells[行对象.cells.length-1]
4. 列对象获取列下标:  列对象.cellIndex
5. 删除列：删除指定下标列        行对象.deleteCell(列的下标);
6. 插入列：在指定下标列前面插入列    行对象.insertCell(列的下标);

复制代码

事件：

• 点击事件：onclick
  
• 失去焦点事件：onblur
  
• 获取焦点事件：onfocus
  

2.表单操作
一、 获取表单元素的方法

• 第一种方法,通过元素的name获取
  
• 第二种方法：通过元素的index获取
  
• 第三种方法：通过元素的id获取
  例如：
  

1. <form name="fr1" id="fm" action="demo.html">
2.    账号:<input type="text" id="tx1" />
3.    密码:<input type="password" id="pwd1" />
4.    确认密码<input type="password" id="pwd2" />
5.    <input type="submit" value="登录" />
6. </form>

复制代码

二、表单验证
return false : 在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.
案例一：

1. document.forms[0].onsubmit=function(){
2.     var zh=document.forms[0].tx1.value;
3.     if(zh==""){
4.     alert("账号不能为空!!");
5.     return false;
6.     }
7. }

复制代码

案例二:

1. <a target="_blank" href="https://www.cnblogs.com/demo.html">点击跳转</a>
2. var a1=document.getElementsByTagName("a")[0];
3.     a1.onclick=function(){
4.     return false;
5. }

复制代码

来源:https://www.cnblogs.com/xw-01/p/17608015.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！