Baidu Front-end Technical college-task2.18-2.19 Source and personal summary

Source: http://yun.baidu.com/share/link?shareid=2310452098&uk=1997604551

1, feel in writing JS, it is best to clear the idea first, what to do, what to do, do not think where to write where;

2, must learn to debug JS, or you write a lot, the result of a run, but do not know where the problem, it is a waste of time;

3, the expression of regular expressions, and how to use, there are two ways, respectively, using Test () and match ();

var pattern=/^[+,-]?\d+$/;    Iptvalue=Ipt.value.trim ();     if (! pattern.test (Iptvalue)) {        alert ("Please confirm that the number is entered?"} ");         return ;    }

if (!city.match (/^[a-za-z\u4e00-\u9fa5]+$/)) {        alert ("The city name must be a Chinese-English character!) ")        return;    

4, the event of the binding, IE and other browser differences, this code can be saved up, the probability of using a lot

// Binding Event Functions 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, is how to get the event object and target

// Gets the event object and the destination of the event var eventutil={    getEvent:function(event) {        return event? event: window.event;    },    gettarget:function(event) {        return event.target| | event.srcelement;}    }

6, the event is entrusted to implement. Bind the event to the parent element of multiple sibling elements, and then use Target.id to determine if the element is the target ID; Part of the code is included below.

Event=eventutil.getevent (event); vartarget=Eventutil.gettarget (event); vartt; Switch(target.id) {//         Case"L-input":            if(Validate ()) {t.unshift (ipt.value); }         Break;  Case"R-input":            if(Validate ()) {T.push (ipt.value); }        Break;

7, the following two paragraphs involve a lot of knowledge, including RemoveChild, Target.tagName.toLowerCase (), target.dataset.num, (e.g. data-num= "2"); Parseint;parentnode and so on.

Event=eventutil.getevent (event); vartarget=Eventutil.gettarget (event); if(target.tagName.toLowerCase () = = = ' span ') {//remember to convert to lowercase;Numul.removechild (target); varTt=target.dataset.num;//How to get the value of a custom element;removedata (TT); Alert ("Remove" +target.innerhtml);//innerHTML can also be used to read;    }//The second piece of codeEvent=eventutil.getevent (event); vartarget=Eventutil.gettarget (event); varTt=target.parentnode.dataset.num;//getting the parent nodett=parseint (TT); if(target.parentNode.tagName.toLowerCase () = = = ' span ') {numul.removechild (Target.parentnode); Alert ("Remove" +Removedata (TT)); }

8, sort, bubble sort will not write .... I'm just a pit.

Each time the next two numbers are compared, the last one is the biggest or the smallest, so the second time of comparison is reduced by the number of comparisons, so the comparison continues.

 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, when you use JS to input text into the HTML, you can add class, custom attributes, ID and so on, so you can set the CSS, or JS in handy.

10, how to create an element, and add child elements and content, and so on. There is also a style property set for it.

varNewspan = document.createelement (' span '); varNewspantext = 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; }

The road ahead is still long, continue to refuel.

Baidu Front-end Technical college-task2.18-2.19 Source and personal summary