javascript编程点滴

1.javascript代码中不要嵌入JSP EL表达式和JAVA动态代码。因为这样就无法把javascript代码提到单独的js文件里了。

 

2.让div中的内容居中，注意不是align属性

   <div style="text-align:center;">

 

3.定期自动调用javascript方法

  //每隔3秒调用ajaxReq()方法

  setInterval("ajaxReq()",3000);

4.如何引入js文件和css文件

  //引入prototype库

  <script type="text/javascript" src="prototype.js"></script>

 

  //引入CSS文件

  <link type="text/css" rel="stylesheet" href="index.css"/>

 

5.用prototype库的$("myid")替代document.getElementById("myid")

 

  <script type="text/javascript" src="prototype.js"></script>
  <script type="text/javascript" >

     //var v = document.getElementById("myid").value;

     var v = $("myid").value;

  </script>

 

6.通过javascript提交表单

  document.forms['form1'].submit();

 

7.如何让页面一显示就使指定的textarea获得焦点

  function setfocus(){

      document.getElementById("myta").focus();

  }

  window.onload = setfocus;

 

 

8.通过DOM动态地将一个gif图片插入到一个textarea以后，如何让光标停留在textarea中图片的右侧，而不是左侧

  通常的做法是：先在文本域中插入图片以后，再让焦点停留在文本域中

        var img = document.createElement("img");
        img.src = "1.gif";

        $("mytx").appendChild(img);

        $("mytx").focus();

   这么做会有一个问题，就是如果之前焦点不在mytx文本域中，执行上面的代码以后，光标会落在插入的图片的左侧

 

那么如何让光标永远落在图片的右侧呢？把上面的代码的最后两行调换一下顺序就OK了。

        var img = document.createElement("img");
        img.src = "1.gif";

        $("mytx").focus();

        $("mytx").appendChild(img);

       

9.如何捕获关闭网页以及关闭浏览器的事件

    window.onbeforeunload = signout;

    function signout(){
        if (event.clientY<0){

            alert("closed");

        }

    } 

 

在页面被卸载的之前会触发onbeforeunload事件，比如：

         页面刷新

         表单提交

         窗口关闭

         浏览器关闭

为了只捕获窗口关闭以及浏览器关闭，需要使用event.clientY

     event.clientY表示的是当事件触发的时候鼠标所在的点相对于当前网页左上角的相对坐标。

那么为什么要用event.clientY<0的条件进行判断呢？因为只有鼠标点击在当前网页窗口的上方的某个点上的时候，

event.clientY才为负数，而窗口上方的点只有关闭按钮被点击的时候才会触发onbeforeunload事件。

 

不过，这种方法也不是万能的，某些情况下也会失效，比如：

      当前浏览器中打开着多个tab页窗口，一个tab页对应一个网页，如果直接点击屏幕右上角的关闭整个浏览器的按钮，

此时如果浏览器弹出提示窗口，比如提示是否要关闭所有的tab页，而这个提示窗口一般都在屏幕的中间区域显示，这是

点击确定按钮，浏览器会关闭所有的tab页，进而会触发onbeforeunload事件，但此时获取的event.clientY是个正数，

event.clientY>0。要避免这种情况，只能修改浏览器的设置，让它不弹出提示窗口，直接关闭浏览器。

10.正则表达式的test方法的使用

同一个正则表达式多次调用test方法

var head = /^http/gi;
var tail = /.jpg$/gi;
var isrcs = new Array();
isrcs.push('http://abc.jpg');
isrcs.push('http://xyz.jpg');

 

if(head.test(isrcs[0]) && tail.test(isrcs[0])){
     alert('ok1');
}

 

if(head.test(isrcs[1]) && tail.test(isrcs[1])){
     alert('ok2');
}

 

输出：ok1

 

为什么第二次调用就不好用了呢？原因是正则表达式的lastIndex属性没有重置。

有两种方法可以解决：

 

方法1：重置lastIndex

var head = /^http/gi;
var tail = /.jpg$/gi;
var isrcs = new Array();
isrcs.push('http://abc.jpg');
isrcs.push('http://xyz.jpg');

 

if(head.test(isrcs[0]) && tail.test(isrcs[0])){
     alert('ok1');
}

head.lastIndex = 0;

tail.lastIndex =0; 

if(head.test(isrcs[1]) && tail.test(isrcs[1])){
     alert('ok2');
}

 

输出：

ok1

ok2

 

方法2：去掉参数g

var head = /^http/i;
var tail = /.jpg$/i;
var isrcs = new Array();
isrcs.push('http://abc.jpg');
isrcs.push('http://xyz.jpg');

 

if(head.test(isrcs[0]) && tail.test(isrcs[0])){
     alert('ok1');
}

 

if(head.test(isrcs[1]) && tail.test(isrcs[1])){
     alert('ok2');
}

 

输出：

ok1

ok2