js语法学习

来源：互联网发布：蓝宇原型知乎编辑：程序博客网时间：2024/06/17 17:11

081217返回历史页面

1.typeof

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>typeof测试</title>
    <script type="text/javascript">
        function t(o){
            alert(typeof(o));
        }
    </script>
</head>
<body>
    <input type="button" value="测试typeof" onclick='t("hello");' />
    <div>
    把onclick设置为如下内容：<br />
    onclick='var a;t(a);'则返回undefine<br />
    onclick='t("hello");'则返回string<br />
    onclick='t(true);'则返回boolean<br />
    onclick='t(123);'则返回number
    </div>
</body>
</html>

2.注册删除事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>注册删除事件</title>
    <script type="text/javascript">
        /************添加事件函数***************
        参数一：输入标签id，不用双引号。
        参数二：事件名称，比如"click"，不是"onclick"。
        参数三：响应事件的函数，直接写函数名。
        注意，每执行一次，就添加一个事件监听，如果添加了两次，则执行两次。
        */
        function addEvent(obj,type,fn){
            if(obj.addEventListener) obj.addEventListener(type,fn,false);
            else if(obj.attachEvent){
                obj["e"+type+fn]=fn;//没看明白。
                obj[type+fn]=function(){obj["e"+type+fn](window.event);}
                obj.attachEvent("on"+type,obj[type+fn]);
            }
        }
        //同上，删除事件响应函数。
        function removeEvent(obj,type,fn){
            if(obj.removeEventListener) obj.removeEventListener(type,fn,false);
            else if(obj.detachEvent){
                obj.detachEvent("on"+type,obj[type+fn]);
                obj[type+fn]=null;
                obj["e"+type+fn]=null;
            }
        } 
        //响应事件函数
        function ff(){
            alert('hello');
            removeEvent(i1,"click",ff);
        }
    </script>
</head>
<body>
<input id="i1" type="text" />
<input type="button" value="添加事件" onclick='addEvent(i1,"click",ff);' />
</body>
</html>

猴子的方法：

function ae(o,e,f){if(!e){f=o;o=window;e="load"}try{o.attachEvent("on"+e,f)}catch(s){o.addEventListener(e,f,false)}}

用法同上，再研究。

3.取得鼠标位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>显示鼠标位置</title>
    <script type="text/javascript">
    //取得坐标函数原型，注意参数必须是event
    function show_coords(event)
      {
          x=event.clientX
          y=event.clientY
          alert("X coords: " + x + ", Y coords: " + y)
      }
    //用来返回坐标的函数，猴子自创。
    function fe(e){ee=e||event;return{x:e.clientX,y:e.clientY}}   
    //取得坐标的方法。   
    function f(){
        var b = fe(event);
        alert(b.x+"||"+b.y);
    }
</script>
</head>
<!--<body onmousedown="show_coords(event)">-->
<body>
<div>hello</div>
<input type="button" value="坐标" onclick='f();' />
</body>
</html>

4.eval

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>执行运算</title>
    <script type="text/javascript">
        function json(s){try{return eval("("+s+")")}catch(e){return null}}
        function f(s){
            alert(json(s));
        }
    </script>
</head>
<body>
<input type="button" value="运算" onclick='f("2+5");' />
</body>
</html>

5.调试用函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>调试用的函数，将键值对，换行输出</title>
    <script type="text/javascript">
        //接受键值对，然后换行输出。
        function debug(o){
            a=[];
            for(k in o)
            a.push(k+":"+o[k]);
            alert(a.join("/n"))
        }
        //返回键值对类型
        function fo(o){l=o.offsetLeft;t=o.offsetTop;w=o.offsetWidth;h=o.offsetHeight;while(oo=o.offsetParent){l+=o.offsetLeft;t+=o.offsetTop}return {x:l,y:t,w:w,h:h}}
        function f(o){
            debug(fo(o));
        }  
    </script>
</head>
<body>
<div onclick='f(this);'>hello</div>
</body>
</html>