Javascript, Css ,DHTML的一些技巧和参考(1)

 

Javascript, Css ,DHTML的一些技巧和参考(1)

因为最近一直在做Ajax的开发。而因为浏览器支持的方法不一.所以资料也非常的难找.所以想把一些小技巧做一个整理发布上来.
(注意:一下方法仅仅经过IE浏览器的测试)

1.关于IE的Dom对象的参考手册.
在编写javascript程序的时候.最感到头疼的是手头上没有一个Reference.因为浏览器的换代很快.而且品种繁多.所以相关的书籍也很少能够全面.下面是一个msdn的关于DHTML开发的reference.应该IE全部支持.
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/dhtml_node_entry.asp

2.如何预先载入图片.
要预先载入图片可以嵌入以下javascript代码

< SCRIPT LANGUAGE = " JavaScript " >
<!--  
Image1 =   new  Image( 100 , 50 )  // size is nothing
Image1.src  =   " picture url "   //  
Image2  =   new  Image( 100 , 50 )
Image2.src  =   " picture url "
Image3  =   new  Image( 100 , 50 )
Image3.src  =   " pirctur url "
//  -->
</ SCRIPT >

这样图片可以直接被下载到本地cache里面.也就能及时地显示出来.其中new Image(width,height)中的大小可以是任意的.

3.颜色渐变
使用的是css中的filter来实现这一个功能.下面是连接
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/gradient.asp

4.Alpha效果(半透明效果)
也是使用css中的filter实现.reference如下
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alpha.asp

5.在IE中使用png文件.
IE对png文件的Alpha通道支持很是不好.这一点在IE 7.0的prerelease版本中还是没有改观.我们可以使用以下方法来显示png图像
首先我们用到的工具是Css Filter中的AlphaImageLoader。手册如下
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp
我们的想法是遍历全部的Image节点找到后缀为.png的图像tag,建立一个有filter为AlphaImageLoader的span取代他(span和div不同点见6)。代码如下

function  correctPNG() 
... {
for(var i=0; i<document.images.length; i++)
...{
 var img = document.images[i]
 var imgName = img.src.toUpperCase()
 if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
 ...{
  var imgID = (img.id) ? "id='" + img.id + "' " : ""
  var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  var imgStyle = "display:inline-block;" + img.style.cssText 
  if (img.align == "left") imgStyle = "float:left;" + imgStyle
  if (img.align == "right") imgStyle = "float:right;" + imgStyle
  if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle  
  var strNewHTML = "<span " + imgID + imgClass + imgTitle
  + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  + "(src='" + img.src + "', sizingMethod='scale');"></span>" 
  img.outerHTML = strNewHTML
  i = i-1
 }
}
}
window.attachEvent( " onload " , correctPNG);

注意span的style.display必须要设置成为inline-block才能够正确显示

6.div和span的不同点
SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。
见：http://www.9ba.cn/post/243.html

7.让单元格中的文字不会自动折行
把表格的nowrap设为true可以让单元格中的文字变长时,单元格自动撑宽.而不会折行

8.如何获得某元素的实际大小和位置
当元素的position为abosolute的时候可以使用left和top来标记但是如果元素position是relative的时候位置是由浏览器安排的。并且元素的实际的width和height可能因为里面的内容而被改变。我们可以获得实际的大小如下

function  GetAbsoluteLocationEx(element) 
... { 
    if ( arguments.length != 1 || element == null ) 
    ...{ 
        return null; 
    } 
    var elmt = element; 
    var offsetTop = elmt.offsetTop; 
    var offsetLeft = elmt.offsetLeft; 
    var offsetWidth = elmt.offsetWidth; 
    var offsetHeight = elmt.offsetHeight; 
    while( elmt = elmt.offsetParent ) 
    ...{ 
          // add this judge 
        if ( elmt.style.position == 'absolute' || elmt.style.position == 'relative'  
            || ( elmt.style.overflow != 'visible' && elmt.style.overflow != '' ) ) 
        ...{ 
            break; 
        }  
        offsetTop += elmt.offsetTop; 
        offsetLeft += elmt.offsetLeft; 
    } 
    return ...{ absoluteTop: offsetTop, absoluteLeft: offsetLeft, 
        offsetWidth: offsetWidth, offsetHeight: offsetHeight }; 
}  

 

注：offsetLeft,offsetTop为距离父元素的右上角的距离offsetwidth,offsetheight为实际高度
offsetParent和parentNode可能并不是同一个。
还有最简单的一个就是用getBoundingClientRect方法
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/getboundingclientrect.asp

9.尽量使用attachevent
tag.eventname = functionname的方法有一点不好，就是当事件触发时．最多只能有一个函数响应．就是最后被赋值的函数．而attachevent则建立一个栈．全部attach的函数依次压入栈.依次响应
如
code1:

window.onload  =   function () ... {alert('first function fire');} ;
window.onload  =   function () ... {alert('second function fire');} ;

code 2

window.attachEvent( " onload " , function () ... {alert('first function fire');} );
window.attachEvent( " onload " , function () ... {alert('Second function fire');} );

在1中只有第二个函数出发了，而在两个函数按照2,1的次序都被触发了

10 复制节点
使用CloneNode可以复制节点．reference如下
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/clonenode.asp

11.setCapture和releaseCapture
当处理drag等效果的时候．常常会因为鼠标移出后无法相应到mousedown事件．可以使用setCapture的方法让鼠标的全部事件都由某tag响应．记得最后要调用releaseCapture释放Capture
Reference:
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/setcapture.asp
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/releasecapture.asp

12.一些vml的入门资料
在做ajax时候可能大量用到vml.可以做出美观的界面。而且vml得到了广泛浏览器的支持
官方文档
http://msdn.microsoft.com/workshop/author/vml/shape/introduction.asp?frame=true
教程1
http://www.itlearner.com/code/vml/index.html
教程2
http://www.8esky.com/vml/
TO BE CONTINUE...