百度前端技术学院-task2.18-2.19源码以及个人总结

Posted huansky

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了百度前端技术学院-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;
        }

未来路还很长,继续加油。

以上是关于百度前端技术学院-task2.18-2.19源码以及个人总结的主要内容,如果未能解决你的问题,请参考以下文章

百度前端技术学院task1.9

百度前端技术学院task1.10

百度前端技术学院task1.12

碎碎念百度前端技术学院春季班

(作业)百度前端技术学院 任务八:响应式网格(栅格化)布局

百度前端技术学院task1 总结