手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

测试insertAdjacentHTML

Submitted by gouki on 2011, August 24, 12:03 AM

无它，纯学习的代码，看效果用的。纠结啊，原来好多JS中的方法都没有用过。亏我以前还想转前端：

insertAdjacentText方法，在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法：在指定的地方插入html标签语句

原型：insertAdajcentHTML(swhere,stext)
参数：
swhere: 指定插入html标签语句的地方，有四种值可用：
1.     beforeBegin: 插入到标签开始前
2.     afterBegin:插入到标签开始标记之后
3.     beforeEnd:插入到标签结束标记前
4.     afterEnd:插入到标签结束标记后
stext：要插入的内容

参考：http://blog.csdn.net/helanye/article/details/4496061
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title>测试insertAdjacentHTML</title>  
  6.     <script language="javascript"><!--  
  7.     function addsome() {  
  8.         document.getElementById('test').insertAdjacentHTML("afterBegin", "<h1>在文本前容器内插入内容afterBegin</h1>");  
  9.         document.getElementById('test').insertAdjacentHTML("beforeEnd", "<h2>在文本后容器内插入内容beforeEnd</h2>");  
  10.         document.getElementById('test').insertAdjacentHTML("beforeBegin", "<h4>beforeBegin在文本前容器外插入内容</h1>");  
  11.         document.getElementById('test').insertAdjacentHTML("afterEnd", "<h5>afterEnd在文本后容器外插入内容</h2>");  
  12.     }// --></script>  
  13. </head>  
  14. <body onload="addsome()">  
  15. <div id="test">原始内容</div>  
  16. </body>  
  17. </html>  

效果：

FF下无效，IE下有效。webkit下有效。
Over

Javascript | 评论:0 | 阅读:15559

CSS border-top-width 属性

Submitted by gouki on 2011, August 23, 1:26 PM

看到这个CSS属性的时候，我真的纠结了半天，border-top-width，看这个词组的含义，我还以为是边框顶部的宽度，最初我以为是边框边的宽度，但看了手册后，才发现原来是BODER的高度，粗细之类的。

后来看到了这里的介绍：http://school.mzoe.com/css/pr_border-top_width.html，才小小的了解了一点：

定义

border-top-width 属性设置元素的上边框的宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

注释：请始终把 border-style 属性声明到 border-width 属性之前。元素只有在获得边框之后，才能改变其边框的宽度。

-------

同时也介绍了说这个值是可以通过JS来改变的。反正不管怎么样，我已经明白了

Javascript | 评论:0 | 阅读:14019

参考：getBoundingClientRect方法

Submitted by gouki on 2011, August 23, 11:13 AM

看到getBoundingClientRect方法，是用phpstorm进行跳转的，跳转到原始文件中，居然提示我是@browser IE，@return TextRange
一下子就闷了，还好有google，找到了一篇 文章（不好意思，不是专业做前端的，对于这些函数所以都不太了解，也没有去看什么 w3cschool之类的教程）
找到了这篇 文章才知道：

http://younglab.blog.51cto.com/416652/386540
  1. /** 
  2.  * 这原本是IE中获取页面中某个元素位置的方法 ，【相对于浏览器左上角】 
  3.  * FF在3.0中也提供这个方法，在3.5还能获取元素高度和宽度属性 
  4.  * IE中会比其他浏览器多出2个像素 
  5.  * return{left,top,right,bottom,width,height} 
  6.  */  

OK，我也不多介绍了，看一下原文中对于这一点是怎么解释的：

XML/HTML代码
  1. 页面左上角由一个元素，紧贴浏览器的左边和上边，在除IE外的浏览器，包括基于IE内核的搜狗浏览器（360垃圾浏览器及TT浏览器未测试）都能正确的获取到各个属性的值，而在IE中，每个值都会比正常值多出两个像素，例如，正常的left值为0，在IE中为2；  
  2.   
  3. 这是因为IE中document.documentElement.clientTop并不为0（尽管已设置html、body的margin和padding为0），所以在IE中获得的值要减去document.documentElement.clientTop的值。  

更多的资料还是去看原文吧：http://younglab.blog.51cto.com/416652/386540

Javascript | 评论:0 | 阅读:15833

JavaScript类型总览(图) --来自周爱民的博客

Submitted by gouki on 2011, August 16, 3:34 PM

一张图，来自周爱民的博客。
原文地址是：http://blog.csdn.net/aimingoo/article/details/6676530
用周爱民的话来说，这张图是：来自于《JavaScript语言精髓与编程实践》第三章P184页。
第二版说是会改，那么，在没改之前可以参考一下：
大小: 98.67 K 尺寸: 500 x 375 浏览: 1426 次 点击打开新窗口浏览全图
文末还提到了一些补充一下图中用到的概念：

XML/HTML代码
  1. 1、内置（Build-in）对象与原生（Naitve）对象的区别在于：前者总是在引擎初始化阶段就被创建好的对象，是后者的一个子集；而后者包括了一些在运行过程中动态创建的对象。  
  2.   
  3. 2、引擎扩展对象是一个并不太大的集合，一般来说比较确定，它们也属于引擎的原生对象（但不属于ECMA规范的原生对象）。  
  4.   
  5. 3、宿主对象不是引擎的原生对象，而是由宿主框架通过某种机制注册到JavaScript引擎中的对象。  
  6.   
  7. 4、一些宿主会把自己提供的对象／构造器也称为“原生对象”，例如Internet Explorer 7就把它提供的XMLHttpRequest()称为原生的——与此相对的是在它的更早先版本中通过“new ActiveXObject('Microsoft.XMLHTTP')”这样的方法创建的对象。这种情况下，读者应注意到“宿主的原生对象”与“引擎的原生对象”之间的差异。  

 

Javascript | 评论:0 | 阅读:16643

HTML5拖放上传

Submitted by gouki on 2011, August 16, 3:30 PM

html5中有一个特性就是以前一直常说的拖放上传，其实这个功能要实现的话真的不太难，但我对于DOM的操作并不是特别了解，因此我找了一些资料做备份
1、xheditor中的代码
2、html5的一些教程

xheditor中的代码很少，只有区区几行：

JavaScript代码[jBody是基中的一个元素对象，类似于$('#xxxdiv')]
  1. jBody.bind('dragenter dragover',function(ev){var types;if((types=ev.originalEvent.dataTransfer.types)&&$.inArray('Files', types)!==-1)return false;}).bind('drop',function(ev){  
  2.     var dataTransfer=ev.originalEvent.dataTransfer,fileList;  
  3.     if(dataTransfer&&(fileList=dataTransfer.files)&&fileList.length>0){  
  4.         var i,cmd,arrCmd=['Link','Img','Flash','Media'],arrExt=[],strExt;  
  5.         for(i in arrCmd){  
  6.             cmd=arrCmd[i];  
  7.             if(settings['up'+cmd+'Url']&&settings['up'+cmd+'Url'].match(/^[^!].*/i))arrExt.push(cmd+':,'+settings['up'+cmd+'Ext']);//允许上传  
  8.         }  
  9.         if(arrExt.length===0)return false;//禁止上传  
  10.         else strExt=arrExt.join(',');  
  11.         function getCmd(fileList){  
  12.             var match,fileExt,cmd;  
  13.             for(i=0;i<fileList.length;i++){  
  14.                 fileExt=fileList[i].fileName.replace(/.+\./,'');  
  15.                 if(match=strExt.match(new RegExp('(\\w+):[^:]*,'+fileExt+'(?:,|$)','i'))){  
  16.                     if(!cmd)cmd=match[1];  
  17.                     else if(cmd!==match[1])return 2;  
  18.                 }  
  19.                 else return 1;  
  20.             }  
  21.             return cmd;                   
  22.         }  
  23.         cmd=getCmd(fileList);  
  24.         if(cmd===1)alert('上传文件的扩展名必需为：'+strExt.replace(/\w+:,/g,''));  
  25.         else if(cmd===2)alert('每次只能拖放上传同一类型文件');  
  26.         else if(cmd){  
  27.             _this.startUpload(fileList,settings['up'+cmd+'Url'],'*',function(arrMsg){  
  28.                 var arrUrl=[],msg,onUpload=settings.onUpload;  
  29.                 if(onUpload)onUpload(arrMsg);//用户上传回调  
  30.                 for(i in arrMsg){  
  31.                     msg=arrMsg[i];  
  32.                     url=is(msg,'string')?msg:msg.url;  
  33.                     if(url.substr(0,1)==='!')url=url.substr(1);  
  34.                     arrUrl.push(url);  
  35.                 }  
  36.                 _this.exec(cmd);  
  37.                 $('#xhe'+cmd+'Url').val(arrUrl.join(' '));  
  38.                 $('#xheSave').click();  
  39.             });  
  40.         }  
  41.         return false;  
  42.     }  
  43. });  

也有这样的：HTML5拖放(Drag&Drop)API详细介绍和示例，当然这里我就不多贴代码了。不过文中最后一段是告诉我们有哪些事件可以用：

可以使用的新事件一共有这些：

dragstart
A drag has been initiated, with the dragged element as the event target.
drag
The mouse has moved, with the dragged element as the event target.
dragenter
The dragged element has been moved into a drop listener, with the drop listener element as the event target.
dragover
The dragged element has been moved over a drop listener, with the drop listener element as the event target. Since the default behavior is to cancel drops, returning false or calling preventDefault() in the event handler indicates that a drop is allowed here.
dragleave
The dragged element has been moved out of a drop listener, with the drop listener element as the event target.
drop
The dragged element has been successfully dropped on a drop listener, with the drop listener element as the event target.
dragend
A drag has been ended, successfully or not, with the dragged element as the event target.

并且注意能够被拖拽的元素一定要有这个属性：draggable=”true”

在web上面拖放一直以来都是个难题(strange beast)，但是至少现在我们有一堆丰富的API了…. 所以也许这个方式会开始大行其道呢？

 

Tags: xheditor

Javascript | 评论:0 | 阅读:17774

Records:305«‹15161718192021222324›»