javaScript DOM 学习

javaScript DOM 事件学习

HTML 事件属性

HTML 事件的例子：

• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

HTML DOM 事件

onmousedown,onmouseup, onclick鼠标点击事件的所有部分。
onClick ：向 button 元素分配 onclick 事件；

<button onclick="displayDate()">点这里</button>

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onchange 事件常结合对输入字段的验证来使用。

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onfocus 当输入框获得焦点时。

#JS HTML DOM

HTML DOM EventListener

addEventListener() 方法用于向指定元素添加事件句柄。

语法

    element.addEventListener(event, function, useCapture);

event

click 点击事件

mouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发.

resize 用户重置窗口大小时添加事件监听.

实例

    element.addEventListener("click", function(){ alert("Hello World!"); });

HTML DOM 事件对象参考手册
所有 HTML DOM 事件，可以查看完整的 HTML DOM Event 对象参考手册。

JS DOM CSS

TML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

HTML DOM 对象

• HTML Document ：Document 对象
• HTML Element ：DOM 元素对象
• HTML Attributes：DOM 属性对象
• HTML Events ：DOM 事件
• Console：Console 对象
• CSSStyleDeclaration：CSS 样式声明对象

HTML 对象

常用HTML 标签对象

• Anchor：Anchor 对象表示 HTML 超链接
• base
• body
• button
• Canvas
• from
• iframe
• img
• table
• input
• checkbox
• map
• label
• li
• object
• tr、td、th、table
• title
• video
• ol
• p
• select、option
• menu menuItem

Java Script 对象

• Array
• Boolean
• Date
• Math
• Number
• String
• RegExp

JavaScript 全局属性

Infinity ：代表正的无穷大的数值。

NaN ：指示某个值是不是数字值。

undefined ：指示未定义的值。

JavaScript 运算符

• 比较运算符

给定 x=5。

运算符	描述	比较	结果
==	等于	x == 8	false
===	值及类型均相等（恒等于）	x === “5”	false
!=	不等于	x != 8	true
!==	值与类型均不等（不恒等于）	x !== “5”	true

javascript 消息框

alert(); 显示警告框

confirm();确认框

prompt(hint,value); 提示框

javascript 正则

正则表达式主体/修饰符(可选)

var patt = /runoob/i

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

var str = '129 1231 2315';
var n = str.search("oob");
console.log(n);
var srep = str.replace(/\s+/g, "");
console.log(srep);

RegExp

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

var patt = /^1(3|4|5|7|8)\d{9}$/;
var isPhone = patt.test("13911113963");
console.log(patt.exec("13900003963").input);
console.log(isPhone);