JavaStript

0x01:常用的事件句柄

onblur()      事件会在对象失去焦点时发生。
onfocus()    元素获得焦点。
onload()      页面完成加载。
onsubmit()   确认按钮被点击。
onclick()    当用户点击某个对象时调用的事件句柄。
onchange()用户改变某个域的内容
onmouseout()  鼠标从某元素移开
onmouseover()  鼠标移到某元素之上

事件句柄

0x02: Document 对象方法

Document 对象方法

0x03：Attribute 对象

Attribute 对象

下面是几个具体的常见案例

getElementById()方法

<form action="#" method="get" name="regForm" onsubmit="return checkForm()"> //checkForm()为新定义的函数
<input type="text" name="user" size="34px" id="user"/>

下面是用js来检测上面表单的数据：

<script>
            function checkForm(){
                //1.获取用户输入的数据
                var uValue = document.getElementById("user").value; //获取上面表单的值
                //alert(uValue); //可以用alter来测试是否弹出正确的数据。
                if(uValue==""){
                    //2.给出错误提示信息
                    alert("用户名不能为空!");
                    return false;
                }
</script>

---

正则表达式.test()方法

                var eValue = document.getElementById("eamil").value;
                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    alert("邮箱格式不正确!");
                    return false;
                }

---

实现图片轮播效果

        <script>
            var i=1;
            function changeImg(){
                i++;
                document.getElementById("img1").src="../../img/"+i+".jpg";
                if(i==3){   //到达第三张图就让I=0  然后执行I++ 使i=1
                    i=0;
                }
            }
        </script>
//下面是图片安置
        <div>
            <input type="button" value="下一张" onclick="changeImg()"/>
            <img src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
        </div>

setInterval() 方法

        <script>
            function init(){
                //书写轮图片显示的定时操作
                windows.setInterval("changeImg()",3000);   //前面的windows可以省略。
            }
            
            //书写函数
            var i=0
            function changeImg(){
                i++;
                //获取图片位置并设置src属性值
                document.getElementById("img1").src="../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
        </script>

在指定位置弹出指定的图片

1在指定的位置隐藏这个广告（display的none属性）
2确定onload事件为其绑定一个函数
3设置一个显示图片的定时操作
4获取广告图片的位置并且设置属性styled的display的值block
5清除显示图片的定时操作
6书写隐藏图片的定时操作
7书写定时器中的函数
8清除隐藏图片的定时操作

onblur 事件

http://www.w3school.com.cn/tiy/t.asp?f=html5_ev_onblur

onfocus事件

http://www.w3school.com.cn/jsref/event_onfocus.asp

cellpadding 属性

单元边界与单元内容之间的间距

利用tbody thead 进行隔行换色

window.onload = function(){
                var tb = document.getElementById("tb_1");  //获取table的ID
                var len = tb.tBodies[0].rows.length;   //获取第一个tbody的行数
                for(var i = 0;i<len;i++){                       //进行遍历
                    if(i%2==0){
                        tb.tBodies[0].rows[i].style.backgroundColor="pink";  //设置第一个tbody第i行的背景颜色
                    }
                    else{
                        tb.tBodies[0].rows[i].style.backgroundColor="red";
                    }
                }
            }