JavaScript 总结使用

 

 

JavaScript 总结使用

上个星期，公司分派了任务给我，让我进行html原型开发。由于原型需要一些特效及在ie及firefox两种浏览器兼容运行，所以我在原型开发中所使用的大量javascript需要进行修改，因此我在这过程中掌握了更多javascript的使用方法，并对其进行做了归纳。

总结如下：

1.      offsetLeft 使用

offsetLeft获得的数值是相对于父级元素的左坐标单位，因此，某一控件在几级元素内，使用offsetLeft是无法获取该控件在body所处的位置。因此我们可通过以下方法获得某一控件相对body的offsetLeft.

function GetX(o){

              var nLt=0;

              var offsetParent = o;

              while (offsetParent!=null && offsetParent!=document.body) {

                     nLt+=offsetParent.offsetLeft;                     parseInt(offsetParent.style.borderLeftWidth)>0?nLt+=parseInt(offsetParent.style.borderLeftWidth):"";                

                     offsetParent=offsetParent.offsetParent;

              }

              return nLt;

}

 

2.      创建元素总结

var c=document.createElement("input");

一般元素创建就是这样,然后添加属性,就可以有我们想要的组件

但是有些属性添加上去并不起作用.这样就只有通过javascript去实现

而且方法一定要通过定义其function才起作用,不能当作attribute进行添加.

Eg:

var c=document.createElement("input");

              if (type==""){type="text";}

              if (type!="") c.setAttribute("type",type);

              if (classname!="") c.setAttribute("className",classname);

              if (ro!="") c.readOnly=ro;

              if (id!="") c.setAttribute("id",id);

              if (size!="") c.setAttribute("size",size);        

              if (value!="") c.setAttribute("value",value);

              if (methodName!=""||method!="")

              {

                     if (methodName=="onclick")

                     {

                            c.onclick=function() {

                                   eval(method);

                            }

                     }

                     else if (methodName=="ondblclick")

                     {

                            c.ondblclick=function() {

                                   eval(method);

                            }

                     }

                     else if (methodName=="onblur")

                     {

                            c.onblur=function() {

                                   eval(method);

                            }

                     }

              }

              return c;

 

3.      正则表达式校验

定义正则表达式: var regularExpression =/^/d{1,2}:/d{1,2}$/;

实现匹配对比:if(!regularExpression.test(time))

 

4.      鼠标位置

我们点击鼠标获取的位置是以当前窗口左上角作为0,0 因此该点坐标跟实际的坐标有所偏差,因此必须所获得的鼠标位置再加上document.body.scrollLeft及 document.body.scrollTop

 

5.      事件加载

//事件监听事件(要在bodyLoad事件使用)

       function initEvent(){

              document.onmousedown = judgeShowDiv;

       }