本文分享了一年的JS学习经历及进步过程，感谢多位高手的帮助。文章深入探讨了JS闭包等概念，并分享了一些实用的JS代码片段，如DOM元素操作、事件绑定等。
今年纯粹是JS学习年,一年大部分时间都在折腾JS,其它后台技术基本没有大的收获...
在学习JS的过程中得到了很多大哥的帮助,让我从JS菜鸟到现在的水平,对JS闭包的疑惑到现在的了解,对我帮助最大的是ALZ老大,小夜,UCREN开发者[小黄],阿旭,天凡,心跳,小白,中山,老白等等....
关于之前的一系列回帖,竟然被大家集体投成新手帖,看来是我太肤浅了... 以后不再写这种新手贴了,源代码全部删除,留下了一个PDF文档,之前发出的代码全部在里面,后期更新的__init_xu 色色js代码库不再在博客上贴出,请见谅!!!
新上传 __xu_init.all.min.js 最新版本的编译版本,支持MD5加密,提供xu.uid()生成唯一值
eo对象新增empty方法,呵呵,循环删除节点就可以了:
while ( this.ele.firstChild )
this.ele.removeChild( this.ele.firstChild );
/**
* xu.dom.EObject
*/
xu._class.create('xu.dom','EObject',null,{
id: null ,
desc: 'DOM Element Object 封装器' ,
offset: function(){
if (!this.ele) return null ;
var ele = this.ele ;
var t=ele.offsetTop; var l=ele.offsetLeft;
while(ele=ele.offsetParent){
t+=ele.offsetTop+(xu.browser.$IE ?ele.clientTop:0);
l+=ele.offsetLeft+(xu.browser.$IE ?ele.clientLeft:0);
}
return {left:l,top:t};
} ,
attr: function(o){
if(!xu.verify._undef(o) && xu.verify._obj(o) && this.ele.setAttribute){
for(var p in o){
if (xu.verify._str(p)){
try {
this.ele.setAttribute(p,o[p]) ;
}catch(e){
debug_msg(this.ele.nodeName+" "+p+" 只读");
}
}
}
}
return this ;
} ,
getAttr: function(name){
if ( name && this.hasAttr(name))
return this.ele.getAttribute(name);
} ,
hasAttr: function(name){
if ( this.ele && this.ele.hasAttribute)
return this.ele.hasAttribute(name);
} ,
removeAttr: function(name){
if ( this.hasAttr(name)&&this.ele.removeAttribute )
this.ele.removeAttribute(name);
return this ;
} ,
setWidth: function(){} ,
setHeight: function(){} ,
setLeft: function(){} ,
setTop: function(){} ,
setPosition: function(){} ,
show: function(){
return this.css({display: ''});
} ,
hide: function(){
return this.css({display: 'none'});
} ,
/**
* CSS 属性设置,支持{ color: "blue", 'background-color': "red" }
* 依赖core.js
* @param {} o
* @return xu.dom.EObject
*/
css: function(o){
if (!xu.verify._undef(o) && xu.verify._obj(o)){
for(var p in o){
if (xu.verify._str(p)){
this.ele.style[p.getCamelcaseStyle()] = o[p] ;
}
}
}
return this ;
} ,
getCss: function(name){
if (!xu.verify._undef(name) && xu.verify._str(name)){
return this.ele.style[name.getCamelcaseStyle()] ;
}
} ,
hasClass: function(cls_n){
var is = false;
xu.array.each(this.ele.className.split(' '),function(item){
if (item == cls_n) is = true;
});
return is;
} ,
addClass: function(cls_n){
this.ele.removeClass(cls_n);
this.ele.className += ' ' + cls_n;
} ,
toggleClass: function(cls_n){
if (this.hasClass(cls_n))
this.removeClass(cls_n);
else
this.addClass(cls_n);
} ,
removeClass: function(cls_n){
var new_cls_n = '';
xu.array.each(this.ele.className.split(' '),function(item){
if (item != cls_n){
if (i > 0) new_cls_n += ' ';
new_cls_n += item;
}
});
this.ele.className = new_cls_n;
} ,
//
html: function(v){//在browser.ie.js中做了修正
if(v != undefined){
this.empty().ele.innerHTML = v.replace(/<script[^>]*>[\S\s]*?<\/script[^>]*>/ig, "");
}
return xu.dom.html(this.ele) ;
} ,
text: function(v) {
if (v != undefined)
this.empty().append(document.createTextNode(v));
else {
return xu.dom.text(this.ele) ;
}
} ,
//dom 操作
//元素追加到父节点的最后端
appendTo: function(parentNode){
if (parentNode && parentNode.appendChild)
parentNode.appendChild(this.ele);
return this ;
} ,
//将子结点插到最后端
append: function(subNode){
//nodeType == 1 说明为元素节点
if (subNode && this.ele && this.ele.nodeType == 1)
this.ele.appendChild(subNode);
return this ;
} ,
//元素追加到父节点的最前端
prependTo: function(parentNode){
if (parentNode && parentNode.firstChild)
parentNode.insertBefore(this.ele,parentNode.firstChild);
return this ;
} ,
//将子结点追加到最前端
prepend: function(subNode) {
if (subNode && this.ele && this.ele.nodeType == 1 && this.ele.firstChild){
this.ele.insertBefore(subNode,this.ele.firstChild);
}
return this ;
} ,
//在元素前面插入同级节点
insertBefore: function(node){
if (node && this.ele && this.ele.parentNode.insertBefore)
this.ele.parentNode.insertBefore(node,this.ele);
return this ;
} ,
//将元素插入指定节点前面[同级]
insertBeforeTo: function(node){
if (node && this.ele && node.parentNode.insertBefore)
node.parentNode.insertBefore(this.ele,node);
return this ;
} ,
//在元素后面插入同级节点
insertAfter: function(node){
//this.ele.nextSibling //返回节点之后紧跟的同级节点,不存在返回null,表示当前元素是最后节点
if (node && this.ele && this.ele.parentNode.insertBefore){
if (this.ele.nextSibling)
this.ele.parentNode.insertBefore(node,this.ele.nextSibling);
else
this.ele.parentNode.appendChild(node);
}
return this ;
} ,
//将元素插入指定节点后面[同级]
insertAfterTo: function(node){
if (node && this.ele && node.parentNode.insertBefore){
if (node.nextSibling)
node.parentNode.insertBefore(this.ele,node.nextSibling);
else
node.parentNode.appendChild(this.ele);
}
return this ;
} ,
parent: function(){
if (this.ele && this.ele.parentNode)
return this.ele.parentNode ;
return null ;
} ,
//替换元素节点
replace: function(node){
if (node && this.ele && this.ele.parentNode.replaceChild){
this.ele.parentNode.replaceChild(node,this.ele);
this.ele = node ;
}
return this ;
} ,
//替换元素子节点
replaceChild: function(newSubNode,oldSubNode){
if (oldSubNode && newSubNode && this.ele && this.ele.nodeType == 1)
this.ele.replaceChild(newSubNode,oldSubNode);
return this ;
} ,
//移除元素节点
remove: function(){
if (this.ele && this.ele.parentNode.removeChild){
var p_ele = this.ele.parentNode;
p_ele.removeChild(this.ele);this.ele = p_ele ;
}
return this ;
} ,
//移除元素子节点
removeChild: function(subNode){
if (subNode && this.ele && this.ele.nodeType == 1)
this.ele.removeChild(subNode);
return this ;
} ,
//清空所有子节点
empty: function(){
while ( this.ele.firstChild )
this.ele.removeChild( this.ele.firstChild );
return this ;
} ,
//
moveTo: function(l,t){
return this.css({'position': "absolute",left: l + "px",top: t + "px"});
} ,
resizeTo: function(w,h){
return this.css({width: w + "px" ,height: h + "px"});
} ,
//添加拖拉效果
onDrag: function(start,on,end){
debug_msg('依赖 dom.effect.js');
} ,
//event handle
on: function(type,fn){
if (xu.verify._func(fn))
xu.dom.event.add(this.ele,type,fn);
return this ;
} ,
un: function(type,fn){
if (xu.verify._func(fn))
xu.dom.event.remove(this.ele,type,fn);
return this ;
}
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
