Front-End Basics Notes

Www.zhangxinxu.com
Www.caniuse.com
1:html: What is displayed.
3:js: Interactive.
4:doctype:document Type document types.
5: Selector:
Tag Selector: 1;
class selector; 10
ID selector: 100 (weight value can be superimposed, but as long as there is an ID selector, the ID selector as the subject);
Group selector:
Descendant selector:>
Inline selector: 1000
Descendant selector:
! Important:
Pseudo class selector:: hover
: The hover selector is used to select the element on which the mouse pointer floats. The hover selector is available for all elements, not just links. But the IE6 only supports a plus hover.
6: Basic type stack memory, reference type put heap memory.
The height width of the 7:w3school standard box model is the height and width of the element.
8: If a parent-child element is assigned an outer margin to the child element, the parent element falls down with the child element
Workaround: Set the Overflow:hidden for the parent element.
9: Two brother elements set Marign-top and Marign-bottom respectively, the distance between the two the largest one.
10:custor:pointer the mouse into a small hand.
11:onselectstart:return false Cancel double click to select.
12.childNodes in Google Browser can obtain both the text node, but also to get to the element node, and IE8 can only get to the element node
Text node: nodetype=3 element node: nodetype=1.
Properties: 2 Comments: 8
Children gets the parent-child generation.
13.this.nextsibling: It's brother Point. This.nextelementsibling: Its next element node.
Find a brother.
function Next (elem) {
do{
elem=elem.nextsibling;
}while (Elem && elem.nodetype==!1)
return elem;
}
14.=: Assign value. = = Determine whether the value is equal to the establishment. = =: congruent, value and type are equal.
Float:left|right; Automatic line folding can be arranged automatically, but clear (here we are accustomed to using Overflow:hidden) to clean the float; Display:inline-block can sometimes replace float to achieve the same effect.

position:absolute|relative; To coordinate with top,left and other positioning;

Position:absolute causes the element to detach from the document stream, the positioned element is equal to not occupy any position in the document, renders at another layer, and can set the Z-index. The PS layer effect is position:absolute.
Where static and relative occupy the document flow space, they are not detached from the document. Absolute and fixed are detached from the document stream and do not occupy the document flow space.

Float also causes the element to detach from the document flow, but also occupies a position in the document or container, squeezing the document flow and other float elements to the left or right, and may result in wrapping. The text wrapping layout of the picture is float.

Display's inline-block is not separated from the document stream, the block element is embedded in the document stream as a large character, similar to the IMG or input default effect
(3) Value =0 means full transparency, value =1 indicates opacity;
Z-index: Change the stacking order that has been positioned. The larger the value, the higher the float. Only positioned elements can be added to the zindex.
17. Positioning: fixed positioning-position:fixed;
Relative: Position relative to the initial position of the element;
Absolute: The nearest ancestor element that has been positioned relatively;
Fixed: relative to browser positioning; positioning relative to browsers such as the small ads on the page and the small ads that don't follow. But IE6 doesn't support it.
IE6 to get the height of the scroll bar
Static: initial position;
The block element has a width of 100% in the case of position (relative/static), but after the Position:absolute is set, the width is changed to auto (which is affected by the width of the parent element).
2 when the element is set to Position:absolute, the browser defaults to auto and the value of auto is the "default location" of the element if the top, bottom, left, and right properties are not set. That is, the offsettop and Offsetleft property values are unchanged before and after the Position:absolute is set.
Special case:
Firefox will directly set top and left to the value of offsettop and offsetleft rather than auto.
IE7 is appended to the end of the parent element.
With the Position:relative/absolute element applied, the margin attribute is still valid, with position:relative as an example. If you set the properties of left, top, bottom, and right, we recommend that you do not set the margin data, because it is difficult to pinpoint the location of elements, minimize the interference factors
Position:absolute ignores the padding of the root element.
Setting the Position property in Ie6/7 causes the Z-index property to fail
The inline element changes the Display,display property from inline to block after applying position:absolute. Therefore, it should be noted that relative does not change the rendering mode of the inline element. And absolute is to change the rendering mode of the elements in the row, if set absolute does not need to explicitly change the element display to block
When Position:absolute/relative is applied, other position elements (that is, static elements) are overwritten, and if you do not want to overwrite other elements, you can set the Z-index to 1.
For a long time, this attribute value has not been widely applied because of compatibility issues (IE6 does not implement this property value). Fixed and absolute have a lot in common:
Changes the rendering mode of the inline element to make the display more block.
Will leave the elements out of the ordinary stream and not occupy space.
The default is to overwrite the element that is not positioned.
The biggest difference between fixed and absolute is that the "root element" of absolute can be set, while fixed its "root element" as a browser window. That is, when you scroll the page, the distance between its elements and the browser window is constant.
18.div2 the Center method relative to the parent Div1
The top value and left value are set to 50%margin-left:-half the width of the margin-top:-.
The lower right is the positive axis;
19.JS Data type:
(1): Basic type: Number,string,boolean,undefined,null
(2): Reference type (object type):
1, built-in objects
2, custom objects
3.DOM objects
Defines an object: Var obj=new object ();
20. Type (typeOf) null:object. Object does not exist when getting the object
Undefined:undefined, defines a value that is not assigned
Console.log (typeof a) or Console.log (typeof (a));
21 Timer timer return number type;
22.setTimeout (it only waits for a while to stop) is very special because settimeout (function (), 0) causes it to jump out of the queue and finally execute
settimeout (function () {
Console.log (1);
},0);
Console.log (2);
Console.log (3);
Output:
2
3
1
for (Var i=1;i<=3;i++) {
settimeout (function () {
Console.log (i);
},0);
}
Output 4
4
4
23. Set the outer margin to the row-level elements can only be set up or down. The inner margin can be set up or down.
24.offset:
1.offsetLeft: The distance from the nearest already positioned ancestor element of the element;
2.offTop: The distance from the nearest already positioned ancestor element of the element;
3.offwidth: The distance from the nearest already positioned ancestor element of the element, including the inner margin of the content border, excluding the outer margin.
4.offheight: The distance from the nearest already positioned ancestor element of the element;
5.offparent: Takes away the nearest ancestor element that the element has been positioned in;
25. Copy an element: example: var newNode = Aimg[0].clonenode ();
Oimgs.appendchild (NewNode);
26. Get the scroll bar height: var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop;
27. When the row-level elements are set inside and outside margins, the outer margin can only be set to the left and right margins, the upper and lower margins cannot be set;
Style.left can only be assigned a value can not be obtained, and there are units, offsetleft can only get, cannot assign value, no units
29. Transparency: (1) opacity:0.8 compatibility issues, IE does not support;
(2) Filter:alpha (opacity=80); These two words have to be written.
(3) Value =0 means full transparency, value =1 indicates opacity;
30.GBK: Chinese characters; gb2312: Simplified Chinese; utf-8: All encoding Sets
31.class properties, regardless of the order of the class name "sale important" or "important sale" matches the element
32.animate function: (Object, property, callback function)
33.innerHTML: Object. InnerHTML takes the HTML content of the object
The base data type exists in the stack where the object is the reference type exists in the heap
34. Formal parameters and arguments: var bb = function () {} bb () This setting parameter must be declared before calling
BB (); Function B () {}; you can do this
Arguments can be obtained by arguments[] when the argument is a few-parameter
When the argument is less parametric and the console outputs, the other is undefined.
35. Only 0, empty string, null,undefined returns False, other returns true
36.E = e | | Window.event, the ability to detect, as long as you encounter e so write, otherwise there will be compatibility problems, but e can be changed to a and so on, just a formal parameter. E refers to event, is an object, IE9 before only know the latter, standard browser awareness and IE9 and later also know E, event will involve a lot of compatibility issues (every test must ask)
37.document.documentelement is to get the value of the browser document.documentElement.clientWidth is to get the height of the browser
38.return false Block default behavior
39.e.clientx is the current position of the mouse to the left of the browser distance, E.clienty is the mouse current to the edge of the browser distance
40. Line-level elements centered, he treated as text, Text-align:center, block-level elements centered, margin:0 auto;
41.script written in the body to ensure that the DOM structure is finished loading, but there is no way to ensure that the resources loaded, And the script written in the head inside the window.onload not only can the DOM structure loaded, but also to ensure that the picture and other resources loaded, but relatively slow, so generally choose the former
42. In the interface output with document.write (), in the console output when the Console.log ();
43.arr.sort () is sorted in dictionary order, and if you want to sort in other order, the sort needs to pass a parameter, which is a function,arr.sort (function (a,b) {return a-b;}) Is ascending, b-a is descending
Most of the stuff in 44.DATE is starting from 0.
The value range of 45.math.random () is [0,1];
String
46.indexOf () determines where the current string first appears, and is often used to see if the string appears, not appearing-1
47.substring A new string that contains a substring of stringobject with all characters from the start to the stop-1, whose length is stop minus start. The substring returned by the substring () method includes the character at the start, but does not include the character at the stop.
var str= "Hello world!"
document.write (str.substring (3,7))

Output: Lo W
If the argument start is equal to the stop, the method returns an empty string (that is, a length of 0). If start is larger than stop, the method swaps the two parameters before extracting the substring. Unlike the slice () and substr () methods, substring () does not accept negative parameters.
The parameter of 48.SUBSTR () specifies the start position and length of the substring
var str= "Hello world!"
document.write (Str.substr (3,7))
Output: Lo worl
49.charAt (index), where index represents a number in a string, that is, the subscript of a character in a string. The subscript for the first character in the string is 0. If the argument index is not between 0 and String.Length, the method returns an empty string. var str= "Hello world!" document.write (Str.charat (1))

Output E
50.split var str= "How are your doing today?"
document.write (Str.split ("", 3))

How,are,you
"|a|b|c". Split ("|")//will return ["", "a", "B", "C"]

51.concat means to connect str1 and str2 two strings, (Str1.concat (STR2))

52.navigator.useragent is used to get information about the browser, which is the specific browser
53.getelementsbyTagname, etc. get is a list of nodes, not arrays, sometimes as an array to use, but can not use some of the array of functions, such as POPs
54. Is not the point who is the event source
To get the event source:
var target = E.target | | Window.event.srcElement;
Event delegate or event agent: The event of the handle element is bound to the parent element
ALi = Oul.children;
Oul.onclick = function (e) {
var target = E.target | | Window.event.srcElement;
Console.log (target.innerhtml);
}
55.a.onclick=function () {}; no compatibility issues, but only bubbling, no capture
A.addeventlistener ("click", Function () {},false); There are catches and bubbles, but they are not compatible ie6,7,8
A.attachevent ("onclick", function () {}), supporting older versions of IE
ODiv1. OnClick =function () {
Alert ("Div1");
}
ODiv1. OnClick =function () {
Alert ("123");
}
Output 123, similar to assignment.

First capture and then bubble

Event bubbling: The third argument is false,
Odiv1.addeventlistener ("click", Function () {alert (1);},false);
Odiv2.addeventlistener ("click", Function () {alert (2);},false);
Output is 2 1

Event capture: The third argument is true,
Odiv1.addeventlistener ("click", Function () {alert (1);},true);
Odiv2.addeventlistener ("click", Function () {alert (2);},true);

Odiv1.addeventlistener ("click", Function () {alert (1);},false);
Odiv2.addeventlistener ("click", Function () {alert (2);},true);
Odiv3.addeventlistener ("click", Function () {alert (3);},false);
Output 2 3 1

Odiv1.addeventlistener ("click", Function () {alert (1);});
Odiv2.addeventlistener ("click", Function () {alert (2);});
Output 1 2, but early IE does not support, Google support

Odiv1.attachevent ("onclick", function () {alert (3);});
Odiv2.attachevent ("onclick", function () {alert (4);});
Output 4, 3 order and Google on the contrary, but Google does not support, but also lost this, into window, only support event bubbling, not support event capture

Standard browser block event bubbling: e.stoppropagation ();
IE Browser blocks event bubbling: e.cancelbubble= "true" (not the Web browser standard browsers)

56. The event exists and the unbound event is present
57. Magnifying Glass:
If you do not add mask:
Osmallbox.onmouseover Mouse first move to picture
Osmallbox.onmouseout, and then generate small pieces, moving from the picture to the small block
Ofloat.onmouseover
Osmallbox.onmouseover and then event bubbling
58.if is the judgment value, and is an interval, and switch can only judge a point, and not only judge the value of the type, which is equal to = =
59.prompt obtained is a string type of
60.parseInt ("a", 16), the second parameter represents the system, the default is 10,tostring (10) inside the parameter is also the system
61. Function call immediately: No functions Name
var a=5;
(function (XX) {
Console.log (XX);
}) (a);
62. How to judge is not an array.
A instanceof Array
Instanceof returns TRUE or FALSE to determine if it is a certain type of
And typeof is returning some kind of data type.
63. String operation, when it is addition, according to the string to operate, when encountered subtraction Division and division, is able to calculate the first operation.
64. Local variables are defined everywhere in a function
Example: var foo = 1;
function aa () {
Console.log (foo);
var foo = 2;
Console.log (foo);
}
AA ();
Output is undefined (here does not output 1, equivalent to the inside also defined Foo is not assigned value, if the following no Var foo=2, then it should be output 1)
2
The box model under the 65.W3C standard refers to the height width of the content.
66 if it is a variable, use the object [] property, if it is a fixed value, with the object. property
67.var a=b=3 equivalent to Var a=3;b=3; If in the function, a is the assignment of the local variable, and for B is the assignment of the global variable.
68. To achieve the layout of the two columns of the page, the left fixed width of 200px, the right according to the screen width adaptive. (Write all of the implementation methods you can think of)
The first type: float
The second type: position

The way to open the weird box model is to remove
Weird box Model: Height width refers to content +border+padding
The box model under the standard of the consortium refers to the content
The two have nothing to do with offsetwidth, Offsetwidth will always take the content +border+padding
eg:width:200px;
padding:10px;
border:10px;
When the output offsetwidth, the strange box model outputs the box model output of the IE6 output 200,chorme output 240,W3C standard 240

Elastic box Model
Parent element: Box,display:box (5 types are required to write)
Child element: Bos-flex, the number of copies of the parent element, to divide the remaining space of the parent element, rather than the entire parent element's space, Flex is an integer greater than 1

Box-align: Position in the vertical direction
Box-pack: Position in the horizontal direction

Find a file at the top level. /, peer file directly to find

There may be space between two pictures, and then float can be eliminated, these pictures appear on the same layer, not necessarily float, it is likely that the parent element is very wide, and then the picture is very narrow, because the IMG is row-level elements, so these pictures will appear in a row

There are a few problems with the outline: (This is a bug, because when a block-level element becomes a row that floats or locates, it destroys the current environment, so it's not within the scope of our current discussion).
1. When the two elements are brothers, if I set the above elements to Margin-bottom and set the margin-top for the following elements, the outer frames of the two are merged and the values are the maximum; when the relationship between them is a parent-child relationship, To set the elements inside the margin-top, the parent elements will go down together, want to eliminate the words, to father add Overflow:hidden

Picture preload: New one img, then onload event first. Then get a src.
ie6,7,8 only the OnLoad event before the SRC operation
As long as there is SRC, you can use the OnLoad event

Document.documentelement Gets the HTML
Document.body gets the body.

When the element is positioned, its width is no longer adaptive, but the content is stretched.

The way that the elements can't be seen
The display:none disappears from the DOM element and does not occupy the position, the binding event is useless
Opacity:0 is the transparency becomes 0, but still occupies the position, the event can also bind
Visibility:hidden occupy position, event is not bound

To be Continued