百度前端技术学院-task2.18-2.19源码以及个人总结
源码:http://yun.baidu.com/share/link?shareid=2310452098&uk=1997604551
1、感觉在写js的时候,最好先理清思路,先干什么,在干什么,不要想到哪里写到哪里;
2、一定要学会调试js,不然你哗哗写了好多,结果一运行,却不知问题出到哪里,那就是浪费时间;
3、正则表达式的写法,以及如何运用,有两种方式,分别采用test()和match();
var pattern=/^[+,-]?\d+$/; iptValue=ipt.value.trim(); if(!pattern.test(iptValue)){ alert("请确认输入的是数字?"); return; }
if(!city.match(/^[A-Za-z\u4E00-\u9FA5]+$/)){ alert("城市名必须为中英文字符!") return; }
4、事件的绑定,IE和其他浏览器的区别,这段代码可以保存起来,用到的概率很大
//绑定事件函数 function on(element,eventName,listener){ if (element.addEventListener){ element.addEventListener(eventName,listener,false); } else if (element.attachEvent){ element.attachEvent('on'+eventName,listener); } else element['on'+eventName]=listener; }
on(mybt,'click',addBtnHandle);
5、就是如何获取事件对象和目标
//获取事件对象和事件的目标 var EventUtil={ getEvent:function(event){ return event ? event:window.event; }, getTarget:function(event){ return event.target||event.srcElement; } }
6、事件委托实现。将事件绑定在多个兄弟元素的父元素上,再通过target.id来确定是那个元素是目标id了;部分代码摘入如下。
event=EventUtil.getEvent(event); var target=EventUtil.getTarget(event); var tt; switch(target.id){// case "l-input": if (validate()){ t.unshift(ipt.value); } break; case "r-input": if (validate()){ t.push(ipt.value); } break;
7、下面两段涉及到很多知识,包括removeChild, target.tagName.toLowerCase(), target.dataset.num,(e.g. data-num="2"); parseInt;parentNode等等。
event=EventUtil.getEvent(event); var target=EventUtil.getTarget(event); if (target.tagName.toLowerCase() === 'span') {//记得要转化为小写; numUl.removeChild(target); var tt=target.dataset.num;//如何获取自定义元素的值; removeData(tt); alert("移除"+target.innerHTML);//innerHTML也可以用来读; } //第二段代码 event=EventUtil.getEvent(event); var target=EventUtil.getTarget(event); var tt=target.parentNode.dataset.num;//父节点的获取 tt=parseInt(tt); if (target.parentNode.tagName.toLowerCase() === 'span') { numUl.removeChild(target.parentNode); alert("移除"+removeData(tt)); }
8、排序,冒泡排序也不会写了....我就是个坑。
每次比较相邻的两个数,一次循坏结束,最后一个就是最大或者最小的,因此,第二次循坏比较的时候,要减少一次比较的次数,这样一直比较下去。
for(var i=0;i<length-1;i++){ for(var j=0;j<length-i-1;j++){ if (t[j]>t[j+1]){ tem=t[j]; t[j]=t[j+1]; t[j+1]=tem; } } }
9、在你用js将text输入到htmL的时候,可以添加class,自定义属性,id等等,这样就可以在设置css的时候,或者js中派上用场。
10、如何创建一个元素,并向其中加入子元素和内容等。还有为其设置style属性。
var newSpan = document.createElement('span'); var newSpanText = document.createElement('div'); newSpan.style.position = 'relative'; newSpanText.innerHTML = numbers[i]; newSpanText.style.position = 'absolute'; newSpanText.style.bottom = '-1.5em'; newSpan.style.width = '20px'; newSpan.style.height = numbers[i] + 'px'; newSpan.appendChild(newSpanText); switch (method) { case 'leftIn': result.insertBefore(newSpan, spans[0]); break; case 'rightIn': result.appendChild(newSpan); break; }
未来路还很长,继续加油。
树林美丽、幽暗而深邃,但我有诺言尚待实现,还要奔行百里方可沉睡。 -- 罗伯特·弗罗斯特