JavaScript学习day01

一，改变 HTML 内容

（1）方法一：

document.getElementById("demo").innerHTML=

"My First JavaScriptFunction";

（2）方法二：

x = document.getElementById("sss") //查找元素
x.innerHTML = "请重新填写"; //改变的内容

二，写入 HTML 输出

<script>

document.write("<h1>This is a heading</h1>"); //html内部添加

document.write("<p>This is a paragraph.</p>");

</script>（内部使用的方法）

警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

三，改变 HTML 样式

x=document.getElementById("demo") //找到元素

x.style.color="#ff0000"; //改变样式

四，JavaScript:验证输入

<script type="text/javascript">

function check() {

var name = document.getElementById("name").value; //通过id获取对应的值

var phone = document.getElementById("phone").value;

if(!/^[a-z]+$/i.test(name)) { //正则表达验证

alert("姓名中只能包含英文字母\n请重新输入");

}

else if(!/^\d{7}(\d{1}(\d{3}(\d{1})?)?)?$/.test(phone)) {

alert("电话号码必须为数字且长度为 7,8,11或12位" +

"\n请重新输入");

}

else {

alert("正确");

}

</script>

五，JavaScript:一条语句，多个变量

六，JavaScript的数据类型

字符串、数字、布尔、数组、对象、Null、Undefined

七，JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。

（1）访问对象属性的语法是：

objectName（对象的名）.propertyName（对象的属性）

（2）您可以通过下面的语法调用方法：

objectName（对象名）.methodName()（对象方法）

八，JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

九，JavaScript的运算符和比较符

如果把数字与字符串相加，结果将成为字符串。

十，DOM事件

（1）onchange 事件

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

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

（2）onload 和 onunload 事件

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

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

（3）onmouseover 和 onmouseout 事件

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

例子：

<!DOCTYPE html>

<html>

function mOver(obj)

{

obj.innerHTML="谢谢"

}

function mOut(obj)

{

obj.innerHTML="把鼠标移到上面"

}

</script>

<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

</body>

</html>

(4)onmousedown（点击鼠标按钮）、onmouseup（释放鼠标按钮）以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件

(5)onfocu事件实例：

<!DOCTYPE html>

function myFunction(x)

{x.style.background="yellow";}

</script></head><body>请输入英文字符：<input type="text" onfocus="myFunction(this)">

<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>

</body>

</html>