CSS、EVENT DOM

使用JS操作CSS中的各属性
JS只能操作或修改行内样式，如imgObj.style.border=“1px solid red”
对于类样式通过className来赋值 imgObj.className=“imgClass”

style对象
每一个HTML标记，都有一个style属性。但这个style属性又是一个style对象
style对象的属性，与css中的属性，一一对应
因此，style对象用来代替CSS
如：imgObj.style.border=“1px solid red”

style对象属性与css属性的转换

1. 如果是一个单词，style对象属性，与css属性一样
2. 如果是多个单词，第一单词全小写，后面每个单词首字母大写，并去掉中划线
   divObj.style.backgroundColor=“red”;
   divObj.style.backgroundImage=“url()”;
   divObj.style.fontSize=“18px”;

EVENT DOM

1.事件简介

事件主要实现“用户与网页的交互”
当事件发生时，去执行JS功能代码
- 当点击（onClick），将图片方法两倍（JS代码）
- 加载完成onload
- 鼠标放到文本上onMouseOver
- 拖动滚动条 onscroll
- …

2. 常用事件

• onload: 网页加载完成,只能给body使用
• onClick 鼠标单击 所有标记使用
• onscroll 当拖动滚动条时
• onMouseOver 当鼠标放上时
• onmouseout; 当鼠标离开时
• onsubmit 当提交表单时
• onreset 当重置表单时
• onfocus 当获得焦点是，把光标定位到文本框
• onblur 当时去焦点，把光标从文本框移开
• onchange 当下拉列表内容改变是，用于下拉列表、上传菜单
• onselect 当选中文本时
• onresize 当改变矿口大小事，发生的事件

Event 对象简介

DOM中有Event 对象
DOM中引入Event对象，通过HTML标记的事件属性来传递event对象，使用元素对象的事件属性来传递event对象
DOM中Event对象（DOM浏览器就是标准浏览器）

1. 通过HTML标记的事件属性来传递event
   在DOM中，event对象是作为事件调用函数时的参数，传递给函数的
   

DOM中Event对象属性
type 事件类型
clientX 和clientY 窗口距离左边和上边的距离
pageX 和 pageY 距离网页左边和上边的距离
screenX和screenY 距离屏幕左边和上边的距离

IE中event对象
ie中的event对象，是window对象的一个属性，可以通过window对象调用，而不需要传智。如：window.event

IE中event对象属性
type：事件的类型
clientX和clientY 距离窗口左边和上边的距离
x和y 距离网页左边和上边的距离
screenX和screenY 距离屏幕左边和上边的距离

表格对象的属性

一个<table>标记，对应一个<table>对象

• rows：获取一个表格所有的行组成的数组。
• cells：获取一个行中所有表格构成的数组。

from对象
from对象的属性
name表单的名称，主要用来让JS来控制表单
action：表单的数据处理程序
method：表单的提交方式，get/post
enctype： 表单数据的编码方式

form对象的方法
submit（） 调教表单， 与<input type="submit">功能一样
reset() 重置表单 与重置按钮功能一样

form对象的事件
onsubmit: 当单击提交按钮是发生，并数据发往服务器之前发生，主要用来“在表单提交之前进行变淡验证”
onreset： 当单击重置按钮式发生（了解）

获取表单元素的方法

• 通过网页元素的id来获取对象 document.getElementById(id)
• 通过HTML标签名来获取对象。 parentNode.getElementsByTagName(tagName)
• 通过name属性来获取表单对象，表单中所有元素的起点都必须是document对象
  语法：document.formObj.elementObj
  其中，formObj代表表单对象，elementObj代表表单元素对象
  举例：document,form1.username.value,length
  事件返回值
  事件的返回值，会影响对象的默认动作如《A》标记的默认动作打开一个网址
  如果事件返回false，则阻止默认动作的执行，如果事件返回True，则默认动作继续执行
  提交和验证方法总结

1. 使用submit按钮，结合onsubmit事件来实现（最常用）如果表单验证失败 使用return false阻止提交 受返回值影响的有两个：onclick、onsubmit
2. submit按钮 ，结合onclick事件，实现表单的验证和提交
   
3. button按钮，结合submit() 方法，实现表单验证提交

function verForm(){
	if(document.formObj.username.value==""){
		alert("不能为空");
	}else if(document.formObj.username.value.length < 5|| document.formObj.username.value.length>20 ){
		alert("只能输入5-20个字符");
	}else if(checkOtherChar(document.formObj.username.value)){
		alert("含有特殊字符")；
	}else
	{
		//验证通过给普通按钮添加提交方法
		document.formObj.submit();
	}
	
}

• input对象
  一个<input>标记，就是一个input对象
  input对象的属性（以type=text为例）
  - name 表单元素的名称
  - value 表单元素的值 用户输入的内容，可以通过该属性获取
  - size： 表单的长度，可以容纳多少字符
  - maxlength 表单元素的最大长度（最多输入的字符数）
  - disable 禁用属性
  - readonly 只读属性
  input对象的方法
  - focus（） 获得焦点的方法（定位光标）。
  - blur（） 失去焦点的方法（移走光标）。
  - select（） 选中文本的方法
  input对象的事件
  - onfocus 当获得焦点时
  - onblur 当失去焦点时

option对象
一个option标记，对应一个option对象

option对象属性
text：指<option>和</option>之间的文本
value 是指《option》标记的属性
selected 默认选中