昨天介绍了js常见语法,对字符串和数组的操作。今天介绍一下js里面表单操作,如点击事件,鼠标移上去和移开事件,页面加载事件,提交的时候,改变的时候等等都是在项目中经常使用的。
select对象
options集合(select对象里的所有的option组成的集合).
select对象
1.1length:option的长度
格式:sel.options.length
引用option
select对象.options[下标] 或 select对象.options.item[下标]
selectedIndex属性
1.2selectedIndex属性
作用:设置/获取默认元素的索引值。
格式:select对象名称.selectedIndex。
2.常用事件:
onsubmit 当提交的时候
onchange 当改变的时候
body
onload 当页面加载的时候
鼠标:
onmouseover 当鼠标移动上去的时候
onmouseout当鼠标移出的时候
onclick当单击的时候
3.document
3.1 opener属性
3.2 getElementsByName
3.3 getElementsByTagName
3.4 getELementById
document用法
3.1.1opener属性
如果a.html 打开b.html a就是b的window.opener.
3.2.1getElementsByName:通过元素的name属性来获取元素,获取到一个集合。
3.2.2getElementsByTagName:通过标记名称获得元素,获得一个集合
3.2.3getELementById:通过id获得元素,获得元素对象
4.表格对象。
4.1 table对象:
js代码,效果如下
rows集合
js操作文本
4.2insertRow方法:
功能:追加一行,切返回行对象。
格式:object.insertRow(新行的索引值)
注意:object--》tbodyObject、tableObject
4.3》deleteRow方法
功能:删除指定的行
格式:object.deleteRow(行的索引);
4.4rowIndex
功能:获取行对象的索引
格式:rowObject.rowIndex;
4.5 row对象内容
4.5.1 cells集合(列集合)
4.5.2 insertCell方法
功能:在行内插入一列,且返回列对象
格式:rowObject.insertCell(列的索引);
接下来我们介绍ajax我们先看看ajax效果
ajax
这个怎么实现呢
php代码
然后看看js代码
js代码
在看操作数据库代码
ajaxGet
这里就出现了2种情况,在获取成功和获取数据失败的情况。用的原生的JavaScript的xmlhttp语法,后期会介绍用jquery进行代码简化,因为这个表数据集不存在就获取失败了,下面创建这个表我们在看看有是什么情况发生。
这个就是通过ajax获取的数据库数据
感兴趣的朋友快去试试吧,有不懂的欢迎留言讨论。
领取专属 10元无门槛券
私享最新 技术干货