2016/12/10 Front End Learning notes CSS End +js Start.

18 Browser Compatibility issues: IE6 does not support boxes less than 12px, compatible with: height:4px; _font-size:1px;

IE6 does not support the Overflow:hidden method to clear the float, so, need to use: overflow:hidden; Compatible with _zoom:1; two code

The CSS property preceded by an underscore is a proprietary property of IE6 such as: _background-color:red;

Collapse of margin: margin in the vertical direction of the standard document flow will have a large margin-quasi collapse Phenomenon. But there is no collapse after the Float.

20 Box Center: margin:0 auto; 1 must box has a definite width

2 can not be off the mark (floating, absolute positioning, relative positioning is not possible)

The use of margin, margin is generally used between brothers, when used between father and son, if fathers did not border father will follow his son Along. So father and son generally use padding.

IE6 compatibility problem: when a continuous floating element is present, the margin of the first team is doubled in IE6.

workaround: 1 Let the floating reverse be opposite to the margin direction, for example: float:left; margin-right:40px;

2 Set the margin of the first element of the team separately, setting it to half the other margin.

23 first line indent two spaces code: text-indent:2em;

24 Pseudo-class: a pseudo-class:link (not clicked), visited (has been visited), hover (mouse hover), active (click on the style when not let go); (interview was asked, said only to think of a hover) (like LV package haha)

Background property: where background-poition: move the amount to the right, move Down. (it can also be represented by right Bottom)

The positioning has three kinds of absolute (off-label), relative (not off the mark can be fine-tuning their position relative to their original position), fixed (off-label); (interview has been asked)

27 Move position, Top,left positive value is down to the right, respectively. Other than this memory.

28 reference point: The top reference point is for the upper-left corner of the total Page. Bottom is for visual pages.

29 Locate the reference point, to listen to the nearest position (relative, absolute (generally do not use this, are absolutely all off the label page is not Stable) can be the Elders. The child who decides to be positioned ignores his father's padding.

30 positioning and centering: after absolutely positioning, has been off the mark, can not use margin:0 Auto This method to center

The center method is changed to:width:600px;position:absolute;left:50%; margin-left: -300px;

fixed positioning off-label (IE6 Incompatible)

JS Start

1 First item (too excited I'm going to say this first,what's the difference between DOM and bom: (it means that the brain is a monk, and I don't know anything about it.) I also said I don't know. So it's normal to die on one side. data: the BOM is the browser object model, the DOM is the document object model, the former is the browser itself to operate, and the latter is the browser (can be seen as a container) content within the Operation. http://blog.csdn.net/bing_javascript/article/details/52618695)

2 Pop-up alert console output: console.log () console.warn () console.error () print document.write ())

3 variable naming rules:

The 4 variable scope is divided into local variables and global variables (note: if the function body does not have var added.) such as function () {a=b=2;} Then treat it as a global variable)

5 Common events: Onclick: mouse click

Ondblclick: Mouse Double-click

Onkeyup: when you press and release a key on the keyboard

Onchange: the options in the text content or Drop-down menu change

Onfocus: Gets the focus, indicates the text box, etc. get the mouse Cursor.

Onblur: loses focus, indicates that the text box loses the mouse Cursor.

Onmouseover: Mouse Hover

Onmouseout: Mouse Move out

Onmouseenter: Mouse Hover

Onmouseleave: Mouse out (keep up with the two differences please Baidu Haha)

Onload: Web Document Load Event

Onunload: Close Web page

Onsubmit: Form Submission Event

Onreset: Resetting the form

Onresize: window or frame is resized

6 Simple Carousel Diagram: Click the small span below to change the src of the Image. SRC does not belong to the style so do not pic.style.src. Use PIC.SRC directly.

7 when changing the background image: document.body.syle.backgroundimage= "url (image/1.png)";(pay attention to the hump naming METHOD)

8 js writing method: inline, inline, outside the chain (to be added)

9 Basic Data type: numeric character Fubur null undefined

10 Conversion of Data types: 1 numeric to Character: + "", String (num);

2 Other data types go to bool:!! Num Boolean ()

All numbers are true, 0 is false

All characters are true "" is false

False undefined null 0 "" is False

True 1 "somestring" [Object] is True

1+true 2 (boolean to Numeric)

0+false 0 (boolean to Numeric)

3 numeric: console.log (0xb) 16 ext. 10 binary

Console.log (020) 8 ext. 10 binary

X-1 x*1 (character to Value)

Number () (character to Value)

4 parseint ("10.1px") return 10 (note Rounding)

"px10" NaN

"10px10" 10

5 parsefloat ("10.0") Returns 10 Select input the first digit decimal number is a 0-back integer non-0 rebate fractional non-digit NaN

Each function related knowledge point 1 function fn () {} call, fn () position arbitrarily 2 var fun=function () {} Fun (); must be placed after function declaration

2 when declaring a function, the parameter is a formal parameter, which is called when the argument is an argument (the number of parameters is greater than the actual argument, and the first few are less than the arguments of the times)

The length of the arguments generated internally by the 3 function declaration refers to the number of actual arguments. Not the number of formal parameters

4 variable elevation explains the reason for the left: variables in the function scope override the upper scope Variable. But: only the promotion variable declaration does not raise the Assignment. This means: the following var a= "3" will overwrite var a = 2; But only var A is placed at the top of the function, while A= "3" is still at the Bottom. So return to undefined; By the way, return a function can have only one return, while terminating the function Operation.

12 Arithmetic operators: var a = 10,b=20, c=30; a++;++a; e=++a+ (++b) + (c + +) +a++; Console.log (e); Return: 77

The Var txt=$ ("input"). value; or the values of a form. It is usually after the focus to judge,

So the trigger when the cursor is obtained is: txt.onfocus=function () {if (txt.value== "" {})} only the form has value values div span not so with innerHTML

The trigger to get input is: txt.oninput=funciotn () {if (txt.value== "})}; (IE678 not supported)

Add: Txt.focus (); indicates that the form gets the cursor automatically.

Txt.select (); Automatically select form inner text

Change the class name (result.classname= "re") to an element

IsNaN (4) false IsNaN ("4") false is not a time when true is not a number false

15 attention to the dual-cycle structure of exclusive thought

tab bar Toggle Case Note double Exclusive after

This.classname= "re1"; Lis[this.index].classname= "show";

17

182 ways to declare arrays: var arr=[]; var arr= new Array ();

Console.log (arr.pop ()). Returns the deleted value Shif

Console.log (arr.push (9)) returns the array length. Unshift

Two other empathy

A.concat (b); Connect two arrays together to form a third array

Arr.join ("-"); Convert an array to a string;

var txt= "wo men"; Console.log (txt.split ("")); string conversions to arrays

20 Key JS Composition: 1 ECMAScript describes the syntax and basic object of Js. such as variable size, etc.

2 Document Object Model (DOM) methods and interfaces for handling Web page content such as how to get the value of a form, how to close div

3 Browser Object model (BOM) methods and interfaces for interacting with browsers go back to the pop-up window to jump to the Page.
Dom Tree

22 get the class name compatibility notation:

　　　Document.getelementbyclassname ("one") IE678 not Supported.

Write compatibility notation Below.

23 Access to the node . 1 parentnode;

2 nextSibling previoussibling firstchild lastchild (IE678 support)

　　　　　　　　　3 nextelementsibling previouselementsibling firstelementchild lastelementchild firefox Google and other compatibility issues can be used | | Use

4childnodes in IE9 may be a newline or a space. Workaround

1 method of Judging NodeType (nodetype==1 element Node) (nodetype==2 attribute node)(nodetype==3 text node )

var nodes=childnodes; then Judge Nodes[i].nodetype.

2 with children, this obtains all the internal nodes, but in the ie678 contains the comment node, so there must be no comment.

The DOM node operation 1 creates the node var test = Document.createelement ("div");

2 Add node Demo.appendchild (demo1);

Insert Newspan Demo.insertbefore (newspan,newdiv) if newdiv==null before newdiv inside the demo. default plug in Back

　　　　　　　　　3 The correlation setting of the Demo.getattribute ("id"); get the demo ID

Demo.setattribute ("class", "class1"); set a class class name Class1 for the demo;

Demo.removeattribute ("class"), Delete the class attribute of the demo

but!!! The above method ie67 not Supported. therefore, the compatibility of the wording is demo.classname= "one";

　　　　　　　　4 changing multiple properties div.style.csstext= "width:100px; height:10px ";

5 Delete node A.removechild (b) Remove the b node inside a;

6 Clone node Domo.parentNode.appendChild (demo.clonenode (true)); True indicates the replication node and child Nodes. False copies only itself, not the child Nodes.

25th-year Object. var aa=new date (), built-in time

var aa1=new date ("2014/3/03 13:34:00") and custom Time.

Aa.gettime () refers to the number of milliseconds starting from 1970 to the present

26 Add the string conversion method num.tostring () Here. But A.tostring (2) is converted to 2 binary

27 returning characters based on position

28 Detecting String Lengths:

29 returns the character Position.

30 intercepting a string

-var a=23.3334212;

Console.log (a.tofixed (2));

var a1=a;

Console.log (a1.touppercase ()); Corresponds to toLowerCase (). Uppercase and lowercase conversions.

Math.max (1, 2, red); Returns NaN;

Revise BOM statement review. window.location.href= "www.baidu.com";

End today, Next update the offset family.

　　

2016/12/10 Front End Learning notes CSS End +js Start.