标签:
Element.prototype.removeElement = function() { this.parentElement.removeChild(this); } NodeList.prototype.removeElement = HTMLCollection.prototype.removeElement = function() { for(var i = this.length - 1; i >= 0; i--) { if(this[i] && this[i].parentElement) { this[i].parentElement.removeChild(this[i]); } } }
通过原型链添加removeElement函数,使得每一个元素对象通过原型链共同享有一个removeElement的函数,实现删除元素。
解释:HTMLCollection 是一个接口,表示 HTML 元素的集合,它提供了可以遍历列表的方法和属性。
下面的每个项目(以及它们指定的属性)都返回 HTMLCollection:
可以采用数组访问元素的方法(方括号)通过编号或名称索引查找项目,不必调用item()或者namedItem()方法;
删除元素节点的其他方法:
var deleteElement(elementId)=function(){ var element = document.getElementById(elementId); element.outerHTML = ""; delete element; }
function addEvent(element, type, handler) { // 检测handler是否有$$guid属性。如果没有,赋值为addEvent的guid属性,将addEvent的guid属性自增1 // 假设handler没有$$guid属性,addEvent的guid为1,则经此判断, // handler会有一个$$guid属性,且值为1,而addEvent的guid属性值变成2 if (!handler.$$guid) handler.$$guid = addEvent.guid++; // 检测element是否已经绑定过事件,如果没有绑定过, // 则默认设置为一个空对象,用于保存将要绑定的事件 if (!element.events) element.events = {}; // 获取已经绑定过的type类型的事件对象 var handlers = element.events[type]; // 如果还没有type类型的事件被绑定过,则设置该类型的事件为一个空对象,用于保存将要绑定的该类型的事件 if (!handlers) { handlers = element.events[type] = {}; /* if(element["on" + type]){ handlers[0] = element["on" + type]; }*/ } //按照序号存进去 handlers[handler.$$guid] = handler; //赋予一个全局事件处理函数来处理所有工作 element["on" + type] = handleEvent; } // addEvent保存一个序号 addEvent.guid = 1; // 移除事件 function removeEvent(element, type, handler) { // 如果element经过addEvent绑定过事件,并且也有type类型的事件 if (element.events && element.events[type]) { // 删除element的type类型事件的handler处理器 delete element.events[type][handler.$$guid]; } } // 处理事件 function handleEvent(event) { // 默认返回值为true var returnValue = true; // 矫正事件对象event event = event || fixEvent(window.event); // 获取已绑定的type类型的处理器 var handlers = this.events[event.type]; // 遍历执行每一个处理器 for (var i in handlers) { this.$$handleEvent = handlers[i]; // 如果存在返回值为false的处理器,则设置返回值为false if (this.$$handleEvent(event) === false) { returnValue = false; } } // 返回处理结果 return returnValue; }
假设已知:MaxVolume;customer=[];
var addCustomer=function(customer){ if(isVIP(customer.phoneNumber)){ while(isVIP(customerList[customer.order])){ customer.order ++; } customerList.splice(customer.order,0,customer); } else{ customerList.push(customer); } } var getCustomer=function(customer,MaxCnt){ if(customerList.length < MaxCnt){ addCustomer(customer); return customerList.length; } } var current=function(customers){ for(var i=0,len=customers.length;i++){ addCustomer(customers[i]); } }
3.编程实现将中文的“贰仟零伍亿叁佰捌拾万零叁拾”转换为“200503800030”,语言不限。
var transformNumber=function(numberString){ var numberForm={"零":0,"壹":1,"贰":2,"叁":3,"肆":4,"伍":5,"陆":6,"柒":7,"捌":8,"玖":9}; var num={"拾":10,"佰":100,"仟":1000,"万":10000,"亿":100000000}; var res=0,ans=0; var i=0,len=numberString.length; while(i<len){ var temp = 0; if(numberForm.hasOwnProperty(numberString[i])){ temp = numberForm[numberString[i]]; i++; if(num.hasOwnProperty(numberString[i]) && numberString[i]!=="亿" && numberString[i]!=="万"){ temp = temp*num[numberString[i]]; i++; } res+=temp; if(numberString[i]==="亿" || numberString[i]==="万"){ ans+=res*num[numberString[i]]; res=0; i++; } } } return ans+res; };
4.用javascript实现乱序函数randomSort(array)函数,输出排序后的函数。如[1,2,3,4,5],输出[3,2,4,5,1]。要求100次以内不重复。
var randomSort=function(array){ var tempArray=[]; while(array.length){ var random=Math.floor(Math.random()*array.length); tempArray.push(array[random]); array.splice(random,1); } array=tempArray; return array; }
5.画图描述CSS盒模型,用JavaScript实现获取元素宽和位置,注意兼容性。
阮一峰 关于获取窗口、页面元素位置以及宽度:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
关于浏览器模型 兼容性判断:http://www.cnblogs.com/uedt/archive/2010/09/21/1832402.html
当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。
浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。
var getElementWidth=function(element){ if(document.compatMode == "BackCompat"){ return document.body.scrollWidth; }else{ return document.documentElement.scrollWidth; } }
但是,这个函数有一个问题。如果网页内容能够在浏览器窗口中全部显示,不出现滚动条,那么网页的clientWidth和scrollWidth应该相等。但是实际上,不同浏览器有不同的处理,这两个值未必相等。所以,我们需要取它们之中较大的那个值,因此要对getPagearea()函数进行改写。
var getElementWidth=function(element){ if (element.compatMode == "BackCompat"){ return Math.max(document.body.scrollWidth,document.body.clientWidth), } else { return Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth); } }
获取元素位置: 绝对位置:
var getElementPost=function(element){ var post={"postX":element.offsetLeft,"postY":element.offsetTop}; var current=element.offsetParent; while(current!==null){ post.postX+=current.offsetLeft; post.postY+=current.offsetTop; current=current.offsetParent; } return post; }
快速方法:
post.x=this.getBoundingClientRect().left+document.documentElement.scrollLeft; post.y=this.getBoundingClientRect().top+document.documentElement.scrollTop;
相对位置:
post.postX-(document.compatMode === "BackCompat" ? document.body.scrollLeft : document.documentElement.scrollLeft),
post.postY-(document.compatMode === "BackCompat" ? document.body.scrollTop: document.documentElement.scrollTop).
快速方法:
post.x=this.getBoundingClientRect().left;
post.y=this.getBoundingClientRect().top
快速方法兼容性:目前,IE、Firefox 3.0+、Opera 9.5+都支持该方法,而Firefox 2.x、Safari、Chrome、Konqueror不支持。
标签:
原文地址:http://www.cnblogs.com/Decmber/p/5384767.html