JavaScript技术:
JavaScript语言:变量,数据类型,流程控制,函数,内置对象(strin,array,math,date)
JavaScript语言操作网页对象:标签对象,浏览器对象
网页对象介绍
- HTML文件中的每个标签都是一个对象
- 对象具有:属性和方法
- 获取网页标签对象的方法:
var v1 = document.getElementById("id名");
- 操作对象的标签属性:
获取:var v1 = obj1.标签属性名;
赋值:obj1.标签属性名 = 某值;
- 操作对象的样式属性:
获取:var v1 = obj.style.样式属性名;(只能获取”行内样式“)
赋值:obj1.style.样式属性名 = 某值
事件初步
- 简单来说,事件就是“动作”,也就是用户所在的某种操作,比如:点击,鼠标移动,双击……
- JS是一门基于对象的事件驱动的脚本语言
- 事件有以下:
- 鼠标事件:
onclick:
onmouseover:
onmouseout:
ondblclick:双击事件
onmousedown:鼠标按下去的那一刻
onmouseup:鼠标抬起来的那一刻
onmousemove:鼠标移动的时候```
- 键盘事件:
onkeypress:按键点击一次发生
onkeydown:按键按下去的时候发生
onkeyup:按键抬起来的时候发生
- 表单事件:
onsubmit:当一个表单正要“提交”的时候发生
onfocus:当一个表单项“获得焦点”的时候发生
onblur:当一个表单项“失去焦点”的时候发生
onchange:当一个表单项的数据发生改变的时候——通常只用于select标签的选项改变
- 其他
onload:当网页“一加载成功”的时候发生,也就是网页打开的时刻,他在一个页面上只出现一次。(onload只能写在body标签上,或者要么就不在标签中写,而是在脚本中使用window.onload中实现)
小结:事件随时发生,无处不在,只在于我们想要在哪个对象上使用哪个事件来完成什么工作
其基本的代码模式:
<标签名……on事件名 = "函数名;">……</标签名>
<script>
function 函数名(){
//此处就是小结里面我们需要做什么
}
</script>
则其基本的含义是:某个对象发生什么事件的时候会去调用某个函数以完成某种任务
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
#t1{
color: #999999;
}
</style>
<script>
function f1(obj){
if(obj.value == "请输入你的用户名"){
obj.value = "";
}
obj.style.color = "black";
}
function f2(obj) {
if(obj.value == ""){
obj.value = "请输入你的用户名";
obj.style.color = "gray";
}
}
</script>
</head>
<body>
<form>
<div>
要求:用户名一获得焦点,文字就消失,且颜色变为正常的黑色,
如果用户什么也没填写就离开,则文字提示重新出现
</div>
<!--onfocus获得焦点,onblur失去焦点-->
登录:<input type="text" value="请输入你的用户名" id="t1" onfocus="f1(this)" onblur="f2(this)" />
<br />
密码:<input type="password" />
<br />
<input type="submit" value="登录" />
</form>
</body>
</html>
网友评论