永利酒店赌场自己写的兼容ie和ff的在线文本编辑器类似ewebeditor_其他特效_脚本之家

1。善用DocumentFragment 之前有个打飞机的游戏。我是用如下方法添加子弹
复制代码 代码如下: for{ var bullet = new
Bullet(); document.body.appendChild; }
问题就来了,我的目的是希望同时能出现5颗子弹,所以我循环将5个子弹对象添加到body,这样会导致一个结果:浏览器reflow了5次。
但其实可以找一个载体,来先把这5个子弹类装起来,然后,再一次性添加到body中,这样就只会出现一次flow。节省不少开销。
复制代码 代码如下: var df =
document.createDocumentFragment(); for{ var bullet = new Bullet();
df.appendChild; } document.body.appendChild;
DocumentFragment:文档碎片,它不会产生任何标签,只是一个载体。
2。对引用值置空,Dom自定义的引用值也置空。
发觉自己写的代码,很多引用类型的值,都没有在变量结束的时候置空。 例如:
复制代码 代码如下: var Bullet =
function(){ 2 this.dom = null; 3 this.init(); 4 } 5 Bullet.prototype = {
6 this.init : function(){ 7 this.dom = document.createElement; 8
document.body.appendChild; 9 } this.end : function(){
document.body.removeChild; } }
在结束的时候单纯只是将dom对象移除,其实还需要将this.dom.innerHTML =
”以及this.dom = null。
只是针对IE系列,因为removeChild方法只是将dom元素从dom链中断开,没有释放对象。
3。使用getBoundingClientRect方法获取dom的left,top,width,height等参数。
当需要获取left,top,width,height等参数中两个或以上的时候,改用
getBoundingClientRect方法,可以一次性获取以上四个参数的一个对象,减少对
dom元素的属性访问。 复制代码 代码如下:
var rect = document.getElementById.getBoundingClientRect();
//rect.width,rect.left,rect.top,rect.height
4。使用cloneNode方式克隆dom元素。
对于要需要经常性使用doucment.createElement方法来新建的dom元素,可以先将一个dom元素用cloneNode方法克隆保存起来,
下次需要再次使用的时候,可以直接用克隆的dom元素克隆一份出来,用cloneNode方法比用createElement方法速度要快。例子:
复制代码 代码如下: var temp; for{ var dom
= temp?temp.cloneNode():document.createElementtemp = dom.cloneNode();
//do something } 5。循环判断中加标识,减少Dom属性判断。
根据游戏的逻辑,例如是男人就下一百层。
当小人站立在一个方块上面,这个时候,其它的方块,可以不需要再判断小人是否会掉落到自己的方块上,只需要往上升就行了。这样,一秒可以减少好几百次
对dom元素的属性访问,减少开销。当小人离开方块的时候,判断再次生效。合理利用。
附上自己写的:是男人就下100层传送门>>
暂时就发现那么多,以后发现更多的话,再写吧。。。 作者: cnblogs Floyd

怎么说呢,刚包完夜吧,应该很累了,但现在仍有力气敲打着这些字符,看来我还没有到此为止啊。
废话少说,最近写了个在线的编辑器,类似ewebeditor那样的,当然没有人家那么强大,但是基本功能都有,而且还是兼容ie和ff的,为此我也花了不少功夫,还是赶紧把代码祭出来吧
demo.html: 复制代码 代码如下:

原生js操作dom的方法

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考。

 

1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点.

 

 
document.body指向的是<body>元素;document.documentElement则指向<html>元素

 

    //创建节点

    var createNode = document.createElement(“div”);

    var createTextNode = document.createTextNode(“hello world”);

    createNode.appendChild(createTextNode);

    document.body.appendChild(createNode);

    document.documentElement.appendChild(createNode);

2)插入节点:可以使用appendChild,insertBefore,insertBefore接收两个参数,第一个是插入的节点,第二个是参照节点,如insertBefore(a,b),则a会插入在b的前面

 

 

 

//插入节点

     var createNode = document.createElement(“div”);

    var createTextNode = document.createTextNode(“hello world”);

    createNode.appendChild(createTextNode);

    var div1 = document.getElementById(“div1”);

    document.body.insertBefore(createNode,div1);

 

 

3)替换和删除元素,从replaceChild和removeChild的字面意思看,就是删除子节点,因此调用者,需要包含子节点div1,不然调用会报错。返回的节点是替换的或删除的元素,被替换/删除的元素仍然存在,但document中已经没有他们的位置了。

 

 

 

//替换元素

   var replaceChild = document.body.replaceChild(createNode,div1);

 

 

//删除元素

    var removeChild = document.body.removeChild(div1);

4)节点的属性:

 

firstChild:第一个子节点

 

lastChild:最后一个子节点

 

childNodes:子节点集合,获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)

 

nextSibling:下一个兄弟节点

 

永利酒店赌场,previousSibling:上一个兄弟节点

 

parentNode:父节点

 

<ul
id=”ul”><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul>

 

 

复制代码

    //节点属性

    var ul = document.getElementById(“ul”);

    var firstChild = ul.firstChild;

    console.log(firstChild.innerHTML);

    var lastChild = ul.lastChild;

    console.log(lastChild.innerHTML);

    var length = ul.childNodes.length;

    console.log(length);

 

    var secondChild = ul.childNodes.item(1);

    console.log(secondChild.innerHTML);

 

    var forthChild = ul.childNodes.item(2).nextSibling;

    console.log(forthChild.innerHTML);

 

    var thridChild = forthChild.previousSibling;

    console.log(thridChild.innerHTML);

 

    var parentNode = forthChild.parentNode;

    console.log(parentNode.innerHTML);

复制代码

 

 

5) 文档片段,好处在于减少dom的渲染次数,可以优化性能。

 

复制代码

//文本片段

    var fragment = document.createDocumentFragment();

    var ul = document.getElementById(“ul”);

    var li = null;

    for (var i = 4; i >= 0; i–) {

        li = document.createElement(“li”);

        li.appendChild(document.createTextNode(“item “+i));

        fragment.appendChild(li);

    }

    ul.appendChild(fragment);

复制代码

 

 

6)克隆元素

 

someNode.cloneNode(true):深度克隆,会复制节点及整个子节点

 

someNode.cloneNode(false):浅克隆,会复制节点,但不复制子节点 

 

//克隆

    var clone = ul.cloneNode(true);

    document.body.appendChild(clone);

 

 

 

 

注意:

 

1、childNodes.length存在跨浏览器的问题 

 

可以看到有关列表的html片段没有用 

 

 

 

<ul id=”ul”>

<li>sdsssssss</li>

<li>qqqq</li>

<li>wwww</li>

<li>eeee</li>

</ul>

 这种书写格式而是使用没有换行的格式书写,是因为在不同的浏览器中,获取ul.childNodes.length的结果有差异:

 

在ie中,ul.childNodes.length不会计算li之间的换行空格,从而得到数值为4

 

在ff、chrome,safari中,会有包含li之间的空白符的5个文本节点,因此ul.childNodes.length为9

 

若要解决跨浏览器问题,可以将li之间的换行去掉,改成一行书写格式。 

 

 

 

2、cloneNode存在跨浏览器的问题

 

在IE中,通过cloneNode方法复制的元素,会复制事件处理程序,比如,var b =
a.cloneNode(true).若a存在click,mouseover等事件监听,则b也会拥有这些事件监听。

 

在ff,chrome,safari中,通过cloneNode方法复制的元素,只会复制特性,其他一切都不会复制

 

因此,若要解决跨浏览器问题,在复制前,最好先移除事件处理程序。 

 

 

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考。
1)创建节点:除了可以使用createElement创建元素,…

字体: 宋体 黑体 楷体 仿宋 隶书 幼圆 新宋体 细明体 Arial Arial Black Arial Narrow Bradley Hand ITC Brush Script MT Century Gothic Comic Sans MS Courier Courier New MS Sans Serif Script System Times New Roman Viner Hand ITC Verdana Wide Latin Wingdings 字号: 1 2 3 4 5 6 7
颜色
加粗
倾斜
居左
居中
居右
插入影视和图片
上传文件
插入表格
插入水平线
插入超链接

core.js: 复制代码 代码如下: sx={};
sx.comm={}; sx.comm.string=function(){ if(!String.prototype.left){
String.prototype.left=function{ return this.substr; } }
if(!String.prototype.right){ String.prototype.right=function{ return
this.substr; } } if(!String.prototype.trim){
String.prototype.trim=function(){ return this.replace; } } }();
sx.comm.array=function(){ if(!Array.prototype.indexOf){
Array.prototype.indexOf=function{ for(var i=0;i=0;i–){ if{ break; } }
return i; } } if(!Array.prototype.clone){
Array.prototype.clone=function(){ var temp=[]; for(var i=0;i”; return
str+”>”+this.innerHTML+””+this.tagName.toLowerCase;
HTMLElement.prototype.__defineGetter__(“canHaveChildren”,function(){
switch(this.tagName.toLowerCase{ case “area”: case “base”: case
“basefont”: case “col”: case “frame”: case “hr”: case “img”: case “br”:
case “input”: case “isindex”: case “link”: case “meta”: case “param”:
return false; } return true; }); XMLDocument.prototype.selectNodes =
Element.prototype.selectNodes = function (){ //alert; var oNSResolver =
this.createNSResolver var aItems =
this.evaluate(arguments[0].toLowerCase(), this, oNSResolver,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null) var aResult = [];
for( var i = 0; i < aItems.snapshotLength; i++) { aResult[i] =
aItems.snapshotItem; } //alert(aItems.snapshotLength); return aResult; }
} }(); sx.event={}; sx.event.target=function{ return
window.event.srcElement; }else{ var f=arguments.callee.caller; while{
if(f.arguments[0] instanceof Event){ return f.arguments[0].target; }
f=f.caller; } } } sx.event.event=function { return window.event; }else{
var f=arguments.callee.caller; while { if (f.arguments[0] instanceof
Event) { return f.arguments[0]; } f = f.caller; } } }
sx.event.relatedtarget=function{ if(window.event.type==”mouseover”){
return window.event.fromElement; }else
if(window.event.type==”mouseout”){ return window.event.toElement; }
}else{ var f=arguments.callee.caller; while { if (f.arguments[0]
instanceof Event) { return f.arguments[0].relatedTarget; } f =
f.caller; } } } sx.event.stopevent=function {
window.event.returnValue=false; window.event.cancelBubble=true; }else{
var f=arguments.callee.caller; while{ if(f.arguments[0] instanceof
Event){ break; } f=f.caller; } f.arguments[0].preventDefault();
f.arguments[0].stopPropagation(); } } sx.event.addevent=function{
if(!arguments.callee.event){ arguments.callee.event=[]; } if{
e.attachEvent; }else{ e.addEventListener; } arguments.callee.event.push;
return arguments.callee.event.length-1; } sx.event.removeevent=function{
if{ e.detachEvent(“on”+t,sx.event.addevent.event[i]); }else{
e.removeEventListener(t,sx.event.addevent.event[i],false); }
sx.event.addevent.event[i]=null; } sx.event.parseevent=function{ if {
e.fireEvent; }else{ var evt = document.createEvent; evt.initEvent;
e.dispatchEvent; } } sx.dom={}; sx.dom.text=function{ return
this.e.innerText?this.e.innerText:this.e.innerHTML.replace; }
sx.dom.elementnodes=function{ var temp=[]; var a=e.childNodes; for(var
i=0;i”+html); }else{ var oParser = new DOMParser; var x =
oParser.parseFromString; //alert(x.documentElement.tagName); } var
div=x.selectNodes; //alert; var temp=[]; var
a1=x.selectNodes(e.tagName.toUpperCase; //alert; var
all=e.getElementsByTagName; //alert; var i1=0; for{ //alert; if{
temp.push; i1++; } } x=null; return temp; } sx.dom.left=function{
if(document.getBoundingClientRect){ return
e.getBoundingClientRect().left; }else{ var a=e; var left=0; while{
left+=a.offsetLeft; a=a.offsetParent; } return left; } } sx.dom.top =
function{ if(document.getBoundingClientRect){ return
e.getBoundingClientRect().top; }else{ var a=e; var top=0; while{
top+=a.offsetTop; a=a.offsetParent; } return top; } }
sx.dom.getstyle=function{ if{ return e.currentStyle[prop]; }else{
return document.defaultView.getComputedStyle.getPropertyValue; } }
sx.dom.setstyle=function{ for{ e.style[i]=data[i]; } } advance.js:
var $=function{ return document.getElementById; } edit.js: 复制代码 代码如下: var w=$.contentWindow;
w.document.designMode=”on”; w.document.open(); w.document.write(“”)
w.document.close(); if{ //w.document.body.style.lineHeight=”10px”; }
w.document.onkeydown=function(){ if{ if{ var
s=w.document.selection.createRange(); s.pasteHTML; return false; } } }
function wnd(){ var main=document.createElement; sx.dom.setstyle(main,{
position:”absolute”, width:”100%”, height:”100%”,
backgroundColor:”lightblue”, filter:”alpha”, opacity:0.5 }); var
body=document.createElement; sx.dom.setstyle(body,{ position:”absolute”,
width:”200px”, height:”250px”, backgroundColor:”green”, zIndex:1000 });
var title=document.createElement; sx.dom.setstyle(title,{ width:”200px”,
height:”20px”, backgroundColor:”blue”, }); var
close=document.createElement; sx.dom.setstyle(close,{
marginLeft:”180px”, display:”block”, width:”20px”, height:”20px”,
textAlign:”center”, cursor:”pointer” }); close.innerHTML=”X”;
close.onclick=function(){ main.parentNode.removeChild;
body.parentNode.removeChild; } title.appendChild; body.appendChild; var
content=document.createElement; sx.dom.setstyle(content,{ width:”200px”,
height:”230px” }); body.appendChild; this.show=function{
document.body.appendChild; sx.dom.setstyle(main,{ top:”0px”, left:”0px”
}); document.body.appendChild; sx.dom.setstyle(body,{
top:sx.dom.top+e.clientHeight+”px”, left:sx.dom.left+e.clientWidth+”px”,
}); } this.close=close; this.main=main; this.body=body;
this.title=title; this.content=content; } function bold(){
w.document.execCommand; } function italic(){ w.document.execCommand; }
function left(){ w.document.execCommand(“JustifyLeft”,null,null); }
function center(){ w.document.execCommand(“Justifycenter”,null,null); }
function right(){ w.document.execCommand(“Justifyright”,null,null); }
function FontName{ w.document.execCommand(“FontName”, false, value); }
function FontSize{ w.document.execCommand(“FontSize”, false, value); }
function inserthr(){ if{ w.focus(); var
s=w.document.selection.createRange(); s.pasteHTML; }else{ w.focus(); var
s=w.getSelection; s.insertNode(w.document.createElement; } } function
insertlink(){ if { w.focus(); var s = w.document.selection.createRange;
var s = w.getSelection; } var e=sx.event.target;
ww.content.appendChild(document.createTextNode; var
link=document.createElement; link.type=”text”; link.size=20;
ww.content.appendChild; var b=document.createElement;
b.innerHTML=”确定”; ww.content.appendChild; b.onclick=function(){ if{
s.pasteHTML(“”+s.htmlText+””);
} else{ var a=w.document.createElement; a.href=link.value;
s.surroundContents; } sx.event.parseevent; } ww.show; } function
inserttable(){ if { w.focus(); var s = w.document.selection.createRange;
var s = w.getSelection; } var e=sx.event.target;
ww.content.appendChild(document.createTextNode; var
tr=document.createElement; tr.type=”text”; tr.size=20;
ww.content.appendChild; ww.content.appendChild(document.createElement;
ww.content.appendChild(document.createTextNode; var
td=document.createElement; td.type=”text”; td.size=20;
ww.content.appendChild; ww.content.appendChild(document.createElement;
ww.content.appendChild(document.createTextNode; var
height=document.createElement; height.type=”text”; height.size=20;
ww.content.appendChild; ww.content.appendChild(document.createElement;
ww.content.appendChild(document.createTextNode; var
width=document.createElement; width.type=”text”; width.size=20;
ww.content.appendChild; ww.content.appendChild(document.createElement;
var b=document.createElement; b.innerHTML=”确定”;
ww.content.appendChild; b.onclick=function(){ var l1=Number; var
l2=Number; var h1=Number; var w1=Number;
ww.content.appendChild(document.createTextNode; var
t=document.createElement; t.border=”1″; var tb=document.createElement;
t.appendChild; for{ var tr1=document.createElement; for{ var
td1=document.createElement; td1.innerHTML=””; sx.dom.setstyle(td1,{
width:w1+”px”, height:h1+”px” }); tr1.appendChild; } tb.appendChild; }
if{ s.pasteHTML; } else{ s.insertNode;
s.insertNode(document.createElement; } sx.event.parseevent; } ww.show; }
function color(){ var e=sx.event.target(); if { w.focus(); var s =
w.document.selection.createRange; var s = w.getSelection; } var ww=new
wnd(); var colors = [“00″,”33″,”66″,”99″,”CC”,”FF”]; var
cp=document.createElement; sx.dom.setstyle(cp,{ display:”inline-block”,
width:”10px”, height:”10px”, margin:”2px” }); for{ for{ for{ var
cp1=cp.cloneNode; cp1.style.backgroundColor=”#” + colors[i1] +
colors[i2] + colors[i3]; cp1.title=”#” + colors[i1] +
colors[i2] + colors[i3]; cp1.onclick=function(){ if{ w.focus();
s.pasteHTML(“”+s.htmlText+””); } else{ var a=w.document.createElement;
a.color=this.title; s.surroundContents; } sx.event.parseevent; }
ww.content.appendChild; } } } ww.show; }
关键是demo.html和edit.js里的代码,core.js和advance.js里的代码是我为兼容浏览器写的,本想把它扩展成一个完善的框架的,因为时间有限,就没写下去了。本编辑器还没有实现图片和文件的上传,因为需要服务器技术,所以我就没写了,可以交给读者慢慢研究。
我打算先将web放放了,开始专心于vc++的探究上,尽量能写出一个像样的程序出来,以后如果有时间我也会继续完善这个编辑器以及javascript兼容的框架。
恩,好好加油吧。

网站地图xml地图