昨日回顾HTML DOM 获取一个HTML对象的方法: 第一种:通过标签的ID值来获取HTML对象 document.getElementById(“id值”) //返回的是一个对象 第二种:通过标签名来获取一组对象 父对象.getElementsByTagName(“标签名”); //返回的是一组标签(集合,可使用类似操作数组方法对对象进行遍历操作) 第三种:通过form表单元素的name值进行获取 document.getElementsByName(“表单元素的name值”); IE只能获取具有name值的表单元素 FireFox可以获取任意元素 HTML对象常用的属性 width: obj.width=”200” heigth: obj.height=”300” style: obj.style.background=”red”; obj.style=”background:red”; value: 获取或设置具有value属性的标签对象的值 innerHTML: 用于获取或设置双边标签的内容 obj.innerHTML=”内容” scrollWidth: 获取对象内容的宽度 scrollHeight: 获取对象内容的高度 scrollTop: 垂直滚动条的高度 scrollLeft: 水平滚动条的长度 offsetLeft: 获取对象边框与父元素左边的距离 返回值不具有px offsetTop: 获取对象边框与父元素上边的距离 返回值不具有px 将一个对象的offsetLeft(offsetTop)赋值给对象的style.left(style.top) 事件: 一类:需要用户参与 通用事件 onblur: 当文本框失去焦点时触发 onfocus: 当文本框获取焦点时触发 onchange: 当内容改变时触发(select input type=”file”) onsubmit: 当form表单被提交时触发 onreset: 当form表单被重置时触发 onresize: 当HTML元素大小被改变时触发 onselect: 当内容被选中触发 阻止默认行为: <form onsubmit=”return value()”> 为了在客户端完成对数据验证 <a href=http://www./index?id=10&act=delonclic=”return confirm()”></a> 鼠标事件 onclick onmouseover onmouseout onmousemove ondbclick 键盘事件 onkeydown onkeypress onkeyup event对象: 记录了事件发时时与鼠标和键盘相关的一些信息 oEvent.clientX 记录鼠标与浏览器窗口左边距离 oEvent.clientY 记录鼠标与浏览器窗口上边距离 oEvent.keycode 记录了被按下的键的unicode编码 objDiv.onclick=function(){ event.clientX; } objDiv.onclick=function(e){ e.clientX; } 兼容性代码 objDiv.onclick=function(){ var oEvent=e||event; oEvent.clientY; oEvent.keycode; } 二类:不需用户参与 onload:在页面加载完毕后自动触发。 window.onload=init; function init(){ //初始化代码 } window.onload=function(){ //初始化代码 } <body onload=”init()”></body> window.onload=function(){ init(); } 事件绑定: 静态绑定: 在HTML标签内容使用事件属性进行绑定 如:<div onclick=”func1()”></div> 动态绑定: 1、 首先获取到此对象 var objDiv=document.getElementById(“div1”); 2、为对象绑定事件处理程序 objDiv.onclick=function(){ //your code } var objLis=document.getElementsByTagName(“li”); for(var i=0;i<objLis.length;i++){ //为对象自定一个属性 objLis.tag=i+1; objLis[i].onclick=function(){ //this代表触发当前onclick事件的对象 alert(this.tag); } } 课堂案例: table隔行变色.html 动态删除.html 排序.html tab 二级联动 <select> <option></option> <option></option> <option></option> </select> select对象的常用属性: length: 设置或获取select对象下的子对象(option)的个数 value: 返回被选中的列表项的value值 selectedIndex: 返回被选中的列表项的序号(从0开始) name: options: option列表组成的一个数组 option对象的常用属性: text: 设置option对象的显示信息 value: 设置option对象的value值 selected: 设置默认显示的列表项 图片无缝滚动 |
|
来自: 知识书馆 > 《JavaScript》