FavoriteLoading
0

我的php学习第十七天之dom对象篇

昨日回顾

事件对象event

主要目的:主要获取事件发生时的环境信息,比如说:坐标。

事件对象的存在:当事件发生时,事件对象event就存在了。

<h1 onClick=“get_xy(event,name,value)”></h1>

注意:event对象参数是固定,不能加引号;

事件发生时,可以根据函数的功能,传递多个参数。

如果使用元素对象的事件属性,则不能传递多个参数。

<div id=“box”></div>

<script>

//先获取到id=box的对象

Var obj = document.getElementById(“h1”);

//给id=box的对象绑定一个onclick事件

obj.onclick = get_xy  //JS中的事件句柄属性必须全小写

//定义函数get_xy()

function get_xy(event)

{

……

}

</script>

 

事件发生时,将向调用函数,传递一个参数,这个参数就是event对象。

客户端脚本:JavaScript、VBScript、ActionScript

常用事件:

onselect:当选择时

event对象在DOM浏览器和IE浏览器下是有差别的

(1)引入方式的不同

DOM浏览器:事件发生时,调用处理函数,会向处理函数传递一个event对象。

IE浏览器:event对象是window对象的一个属性(子对象),比如说 location、screen、navigator、 event等

window.location.href 省略window对象后   location.href

window.event.clinetX 省略window对象后   event.clientX

<div id=“box” onClick=“get_xy()”></div>

<script>

function get_xy()

{

Var str = “窗口的坐标:x=”+ window.event.clientX

}

</script>

(2)event对象的属性名称可能不一样

 

 

form对象

主要功能:表单验证、二级联动菜单、全选

<form>标记,对应的对象就是form对象。

获取一个HTML元素对象的方法:

(1)用document.getElementById()方法

(2)用parentNode.getElementsByTagName()方法

(3)通过name属性,一般用于表单中

Form对象的属性

Name:表单的名称

Id:对应于id属性

Class:对应于<form>标记的class属性

Action:表单的处理程序,一般是php文件,比如:action=“login.php”

Method:表单的提交方式,取值:GET和POST

Enctype:表单数据的加密类型,取值:application/x-www-form-urlencoded、multipart/form-data

Form对象的事件

onsubmit:当表单提交时(单击提交按钮后,在数据发往处理程序前发生)

onreset:当表单重置时(用的非常少)

form对象的方法

form.submit()

form.reset()

实例:form对象的属性

事件返回值:onsubmit和onclick,它们的返回值,会影响到默认动作的执行。返回true或什么也不返回,默认动作执行;返回false时,则默认动作被阻止。

<script>

//定义函数:在<form>下方插入一个<div>,<div>中显示信息

function init()

{

//取得name=form1的对象

var theForm = document.form1;

theForm.method = "post";  //给method属性赋值

theForm.action = "login.php"; //给 action属性赋值

theForm.onsubmit = checkForm; //将函数地址传递给onsubmit事件

//创建一个<div>的标记

var obj = document.createElement("div");

//构建<div>标记中的内容

var str = "<h4>form对象的相关信息</h4>";

str += "表单的提交方式:"+theForm.method;

str += "<br>表单处理程序:"+theForm.action;

str += "<br>数据的加密方式:"+theForm.enctype;

//将字符串str的内容,写入到div对象中

obj.innerHTML = str;

//将div对象追加到form后面

document.body.appendChild(obj); //将div元素追加到body元素的最后

}

function checkForm()

{

//获取name=form1的对象

var theForm = document.form1;

//条件判断

if(theForm.username.value == "")

{

window.alert("用户名不能为空");

return false;

}else if(theForm.password.value.length == 0)

{

window.alert("密码不能为空");

return false;

}else

{

window.alert("表单验证通过");

return true;

}

}

</script>

</head>

<body onload="init()">

<form name="form1">

用户名:<input type="text" name="username" />

密码:<input type="password" name="password" />

<input type="submit" value="提交表单" />

</form>

 

单行文本框和密码框

<input type=“text”name=“username” />

<input type=“password”name=“password” />

常用的属性

Type:文本框的类型

Name:元素的名称

Value:取得文本框的值

Size:文本框的长度

maxLength:最大字符数

……

常用方法

select():选中文本的方法

focus():获得元素的焦点

blur():让元素失去焦点

常用的事件

onselect:当文本被选中时

onfocus:当获得焦点时,也就是光标定位到文本框中

onblur:当失去焦点时,也就是光标离开文本框时

分页阅读: 1 2 3
欢迎分享本文,转载请保留出处!—重蔚自留地 站长邮箱:951076433@qq.com