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>
<script>
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>
<html><head><script>
function myFunction(x)
{x.style.background="yellow";}
</script></head><body>请输入英文字符:<input type="text" onfocus="myFunction(this)">
<p>当输入字段获得焦点时,会触发改变背景颜色的函数。</p>
</body>
</html>