Answers to front-end development questions ~

1. You are familiar with the block elements and understand the box model.
◎ Address-address

◎ Blockquote-block reference

◎ Center-align Blocks

◎ Dir-directory list

◎ Div-common block levels are easy, and it is also the main tag of css layout

◎ Dl-definition list

◎ Fieldset
-Form Control Group

◎ Form-interactive form

◎ H1-title

◎ H2-subtitle

◎ H3-Level 3 title

◎ H4-4 level title

◎ H5-Level 5 Title

◎ H6-
Level 6 Title

◎ Hr-horizontal Separator

◎ Isindex-input prompt

◎ Menu-menu list

◎ Optional content of noframes-frames (content in this block is displayed in browsers that do not support frame

◎ Noscript-optional script content (this content is displayed in browsers that do not support scripts)

◎ Ol-sorting form

◎ P-paragraph

◎ Pre-format text

◎ Table-table

◎ Ul-non-sorted list

2. Main JS Data Types
The main types include number, string, object, and Boolean. The other two types are null and undefined.

3. List common compatibility problems and solutions

1. document. form. itemProblem
Problem:
The Code contains statements such as document. formName. item ("itemName") and cannot be run in FF.
Solution:
Use document. formName. elements ["elementName"]

2.Collection Object Problems
Question:
Many collection class objects in the Code are used (), which is acceptable to IE and cannot be used by FF.
Solution:
Use [] as the subscript, for example:
Document. getElementsByName ("inputName") (1) changed to document. getElementsByName ("inputName") [1]

3. window. event
Problem:
Windows. event cannot be run on FF.
Solution:
FF event can only be used in the event. This problem cannot be solved. You can transfer the event to the function to solve the problem:
OnMouseMove = "functionName (event )"
Function functionName (e ){
E = e | window. event;
......
}

4. HTMLObjectIdQuestion about Object Name
Question:
In IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document, but cannot be used in FF.
Solution:
Standard getElementById ("idName") is used when object variables are used ")

5.UseIdNameString object acquisition
Question:
In IE, eval ("idName") can be used to obtain the HTML object with id as idName. In FF
Solution:
Use getElementById ("idName") to replace eval ("idName ")

6.Variable name andHTMLObjectIdSame problem
Problem:
In FF, because the Object id is not the name of the HTML object, you can use the same variable name as the HTML Object id.
Solution:
When declaring variables, add var to avoid ambiguity, so that it can run normally in IE.
It is best not to use the same variable name as the HTML Object id to reduce errors.

7. event. xAndEvent. yProblem
Problem:
In IE, the event object has the x, y attributes, and FF does not exist.
Solution:
In FF, event. x is equivalent to event. pageX, but event. pageX IE does not
Therefore, event. clientX is used to replace event. x. This variable is also available in IE.
The subtle difference between event. clientX and event. pageX is the scroll bar.
To be exactly the same, you can do this:
MX = event. x? Event. x: event. pageX;
Then, use mX instead of event. x.

8.AboutFrame
Problem:
In IE, the frame can be obtained using window. testFrame, but not in FF.
Solution:
Registry.top.doc ument. getElementById ("testFrame"). src = 'xx.htm'
Window. top. frameName. location = 'xx.htm'

9.Get element attributes
In FF, the defined attributes must be obtained by getAttribute ().

10.InFFNot inParentElement,Parement. childrenUseParentNode,ParentNode. childNodes
Problem:
The subtopics of childNodes are different in IE and FF. blank text nodes are inserted in childNodes of FF.
Solution:
You can use node. getElementsByTagName () to avoid this problem.
Problem:
When a node in html is missing, IE and FF have different interpretations of parentNode, for example:
<Form>
<Table>
<Input/>
</Table>
</Form>
In FF, the value of input. parentNode is form, while that of input. parentNode in IE is empty.
Problem:
The node in FF does not have the removeNode method.
Solution:
You must use the following method: node. parentNode. removeChild (node)

11. constProblem
Problem:
You cannot use the const keyword in IE.
Solution:
Replace with var

12. bodyObject
FF's body exists before the body tag is fully read by the browser, While IE exists only after the body is fully read.
This will occur in IE. when the document is not loaded, the appendChild on the body will have a blank page.
Solution:
Insert a node to the body after onload.

13. url encoding
Question:
Generally, FF cannot identify &
Solution:
Write the url directly in js. Do not write it &

14. nodeNameAndTagNameProblem
Problem:
In FF, all nodes have a nodeName value, but textNode does not have a tagName value. In IE, nodeName usage is incorrect.
Solution:
Use tagName, but check whether it is empty

15.Element attributes
The input. type attribute in IE is read-only, but can be modified in FF.

16. document. getElementsByName ()AndDocument. all [name]Problems
Problem:
In IE, neither getElementsByName () nor document. all [name] can be used to obtain the div element.
Whether there are other undesirable elements is unknown (this issue is still controversial and is still under study)

17.Questions about calling sub-frameworks or elements in other frameworks
In IE, you can use the following method to obtain values in sub-elements:
Document. getElementById ("frameName"). (document.) elementName
Window. frames ["frameName"]. elementName
In FF, it needs to be executed in the following format, which is compatible with IE:
Window. frames ["frameName" 2.16.content?#doc ument. elementName
Window. frames ["frameName" 2.16.doc ument. elementName

18.Assignment of object width and height
Problem:
The statement similar to obj. style. height = imgObj. height in FireFox is invalid.
Solution:
Use obj. style. height = imgObj. height + "px ";

19. innerTextProblems
Problem:
InnerText works normally in IE, but innerText does not work in FireFox
Solution:
Use textContent instead of innerText in non-ie browsers

20. event. srcElementAndEvent. toElementProblem
Problem:
In IE, the even object has the srcElement attribute, but does not have the target attribute. In Firefox, the even object has the target attribute, but does not have the srcElement attribute.
Solution:
Var source = e.tar get | e. srcElement;
Var target = e. relatedTarget | e. toElement;

21.Disable webpage Content Selection
Question:
FF is forbidden by CSS, whereas IE is forbidden by JS.
Solution:
IE: obj. onselectstart = function () {return false ;}
FF:-moz-user-select: none;

22.Capture events
Question:
FF has no setCapture () or releaseCapture () Methods
Solution:
IE:
Obj. setCapture ();
Obj. releaseCapture ();
FF:
Window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP );
Window. releaseEvents (Event. MOUSEMOVE | Event. MOUSEUP );
If (! Window. captureEvents ){
O. setCapture ();
} Else {
Window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}
If (! Window. captureEvents ){
O. releaseCapture ();
} Else {
Window. releaseEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}

CSSPart

DivClass

1.Center problem
Content in div, IE is centered by default, and FF is left aligned by default
You can try to add the code margin: auto

2.High Problem
The above div sets the height. If the actual content in the div is greater than the height, the two div overlaps in FF; however, in IE, the following div automatically gives space to the above div
Therefore, to avoid overlapping layers, you must properly control the height, or simply do not write the height so that it can be automatically adjusted. The better way is to set the height to 100%;
However, when the first-level elements in the div are float, you need to add an empty div at the end of the div block to close and front. The corresponding CSS is:
. Float_bottom {clear: both; height: 0px; font-size: 0px; padding: 0; margin: 0; border: 0; line-height: 0px; overflow: hidden ;}

3. clear: both;
If you do not want to be float, Write clear: both in the div;

4. IEFloatingMarginDouble distance
# Box {
Float: left;
Width: 100px;
Margin: 0 0 0 100px; // in this case, IE will generate a PX distance.
Display: inline; // ignore floating
}

5. paddingProblem
After FF sets padding, div will increase the height and width, but IE will not (* The standard XHTML1.0 definition dtd seems to be consistent)
Proper height control, or try to use height: 100%;
Use padding to reduce the width
However, based on actual experience, the padding of FF and IE is not much different. The actual width of div is = width + padding, so div writes both width and padding, width is defined by subtracting the actual width from the padding.

6. divNestingYAxisPaddingAndMarignProblems
In FF, the distance between the child div and the parent div on the y axis is parent padding + child marign.
In IE, the distance between the child div and the parent div on the y axis is a big one in the parent padding and the Child marign.
When the parent padding is 0 on the y axis of FF and the border is 0, the distance between the child div and the parent div is 0, and the Child marign acts outside the parent div.

7. padding,Marign,Height,WidthSilly Solutions
Note that it is a skill, not a method:
Write the Standard Header
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
Use padding as much as possible, use margin with caution, and add 100% for height as much as possible. The parent-level height has a fixed value. The child-level height does not need 100%. When the child-level is full, fill in an empty clear: both div at the bottom.
Use margin as much as possible for width, use padding with caution, and calculate the actual width minus the padding.

List class

1. ulTag inFFBy defaultPaddingInIEOnlyMarginValue
First define ul {margin: 0; padding: 0 ;}

2. ulAndOlList indent
When the indentation of ul and ol lists is eliminated, the style should be written as: {list-style: none; margin: 0px; padding: 0px ;}

DisplayDisplay class

1. display: block, inlineTwo elements
Display: block; // you can simulate embedded elements as block elements.
Display: inline; // implement the same row Arrangement
Display: table; // for FF, simulating the table Effect
Display: block element, which has the following features:
Always starts on a new line;
Height, row height, and top and bottom margins can be controlled;
The default width is 100% of its container, unless a width is set.
<Div>, <p>, Display: inline is to display the element as a row element. The element features:
And other elements are on the same line;
High, the Row Height and top and bottom margins cannot be changed;
The width of a text or image cannot be changed.
<Span>, <a>, <label>, <input>, , <strong>, and <em> are examples of inline elements.

2.Mouse-finger display
Cursor: pointer;

Background and Image

1. backgroundShow Problems
Complete the width and height attributes.

2.Background transparency
IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 );
IE: filter: alpha (opacity = 10 );
FF: ops: 0.6;
FF:-moz-opacity: 0.10;
It is best to write both of them and put the opacity attribute below

4. How does ajax cross-origin?

1. If you want to achieve data interaction, you must develop www.aa.com and book.aa.com. You can use iframe to add book.aa.com to a page at www.aa.com and add document. domain = "aa.com" to both www.aa.com and iframe to unify the domain and implement cross-origin access. Just like the built-in iframe in the same domain, you can directly call the JS in it. (I did not try this method, but it is theoretically feasible)

2. When the two domains are different and you want to call each other, you also need to develop the two domains. Iframe can be used to call data. The solution is to use the hash attribute of the window. location object. The hash attribute is # dshakjdhsjka in http: // domian/web/a.htm # dshakjdhsjka. Using JS to change the hash value does not refresh the web page. In this way, you can use JS to access the hash value for communication. However, most browsers except IE only need to change the hash to record the history, and you need to handle it before and after it is very troublesome. But it can still be used for simple processing. I will download the specific code below. The general process is that page a and page B are in different domains, B is added to a through iframe, and a modifies the hash value of iframe through JS, B makes a listener (because JS can only modify the hash, and whether the data is changed can only be determined by B). It is detected that the hash value of B is modified and the modified value is obtained, after processing, return the value required by a, and then modify the hash value of a (Note that if a is the query page, such as http: // domian/web/. aspx? Id = 3, directly parent in B. window. location cannot obtain data, and an error with no permissions is reported. a needs to upload the data, which is also troublesome.) Similarly, a also needs to listen, if the hash changes, the returned data is obtained and processed accordingly.

3. This situation is the most common and most commonly used. You can modify only one of www.aa.com and www.bb.com, that is, the other is others'. People tell you what the connection parameter looks like if you want to obtain data, the format of the returned data. What you need to do is to create a webpage in your domain so that the server can obtain data from another website and then return it to you. A Under domain1 is directed to GetData in the same domain. aspx request data, GetData. aspx to ResponseData under domain2. aspx sends the request, ResponseData. aspx returns data to GetData. aspx, GetData. aspx is returned to a to complete a data request. GetData. aspx acts as a proxy. For more information, see my code.

4. the difference between this and the previous one is that the request uses the <script> tag for the request. This requirement is also required by you to develop both domains. The principle is JS file injection. a JS tag is generated within a in the domain. Its SRC points to a page B in another domain of the request and B returns data, you can directly return the JS Code. Because the src attribute of the script can be cross-origin. The Code is also relatively simple.

Code: http://www.live-share.com/files/300697/Cross_The_Site_Test_code.rar.html (csdn can not paste attachments ?)

Conclusion: The first case is that the interaction between the domain and the subdomain can be completely solved. Case 2: Cross-origin is difficult to implement and requires control from both domain developers. It is suitable for simple interaction. Case 3: Cross-origin: developers only need to control one domain. It is a common method to add a proxy to obtain data. Case 4: Cross-origin, both domain developers need to control and return a piece of js Code.

5. How to improve webpage Running Performance
I. compressing style images
Ii. Start gzip Compression
3. Reduce Unnecessary page elements

6. Commonly used linux Commands include

Neither will I...

7. Bind events in JS

1. Bind traditional generation elements directly

Ii. attachEvent Functions

Var attachEvent = function (el, Event, fn ){

El = el | window;

If (el. addEventListener ){

El. addEventListener (Event, fn, false );

} Else if (el. attachEvent ){

El. attachEvent ('on' + Event, fn );

}

}

8. Remove the blank spaces at the src header and tail.

Function trim (jia ){
Return jia. replace (/(^ \ s *) | (\ s * $)/g ,"");
}
9. An uncertain number in a column is divided into three equal parts, so that the sum of each part is equal and your solution ideas are written.

Thinking ..

10. jiugongge Layout

This should be worth mentioning ~

11. Classes in JS, inheritance, and interpretation of variant Variables

First, class:

What is a class. Class is the description of our real world. It is not as good as "person". This is a class. Okay, let's stop talking about it. Let's say it's serious.

To a simple class:

Function People (){

This. name = "SCSI ";

This. age = "every year is 18 years old ";

This. showAge = function (){

Alert (this. name );

}

}

Next, you know new. In fact, this is a constructor.

Var xxx = new People ();

Xxx. showAge ();

Then let's talk about inheritance. The above said, "people", what are the points of "people"? "men", "women" (not a human demon ..), In fact, "men" and "women" are also two categories.

In fact, both men and women inherit from their parent class "people". For example, Boys and Girls inherit from men and women. Reference the class written above to illustrate inheritance.

Assume that both Zhang San and Li Si are men .. We use prototype to let the two of them inherit this class.

Function People (name ){

This. name = "SCSI ";

This. age = "every year is 18 years old ";

This. showAge = function (){

Alert (this. name );

}

This. showName = function (){

Alert (this. name );

}

 

}

People. Prototype = {"species": "People "}

Var t1 = new People ('zhang san ');

T1.showName ();

Alert (t1. species );

Var t2 = new People ('Li si ');

T2.showName ();

Alert (t2. species );

In addition, if the Prototype object is modified, the two instance objects declared above will be affected.

Okay, well, the inheritance is complete.

What are mutations?

I am also confused ~

12. Closure and scope

The difficulty is that I am not very familiar with the closure. Let's take a look.

Let's talk about the features of closures:

A. nested Functions

B. External functions can ask internal variables.

C. The variables in the function are always in memory.

Function c (){

This. say = "hello"

Return function (){

Alert (this. say );

}

}

This is a closure.

In fact, the issue of scope can be better explained together with the closure, because to understand the closure, we must understand the special variables of js.

Variables are classified into global variables and local variables:

A. All variables defined in the outermost layer (defined in A non-function body) have A global scope.

B. All variables directly assigned values at the end are automatically declared as variables with a global scope.

C. Attributes of all window objects have a global scope

13. Compile a js function toRGB to convert the commonly used color encoding in CSS.

Function toRGB (s ){

Var reg =/^ # ([0-9a-fA-f] {3} | [0-9a-fA-f] {6}) $ /;

Var sColor = s. toLowerCase ();

If (sColor & reg. test (sColor )){

If (sColor. length = 4 ){

Var sColorNew = "#";

For (var I = 1; I <4; I + = 1 ){

SColorNew + = sColor. slice (I, I + 1). concat (sColor. slice (I, I + 1 ));

}

SColor = sColorNew;

}

// Process the six-digit color value

Var sColorChange = [];

For (var I = 1; I <7; I + = 2 ){

SColorChange. push (parseInt ("0x" + sColor. slice (I, I + 2 )));

}

Return "RGB (" + sColorChange. join (",") + ")";

} Else {

Return sColor;

}

}

14. array deduplication

Function delArrayRepeat (oldArray ){

Var newArray = [];

Var pObj = {};

For (var I = 0, items; (items = oldArray [I])! = Null; I ++ ){

If (! PObj [items]) {

NewArray. push (items );

PObj [items] = true;

}

}

Return newArray;

}

15. Calculate the maximum number of characters and the number of occurrences of a string.

Var str = "adadfdfseffserfefsefseeffffftsdg ";

Var arr = str. split ("");

Var obj = {};

Var objArr = [];

For (var I = 0, j; j = arr [I]; I ++ ){

If (! Obj [j]) {obj [j] = 0 ;}

ObjArr [++ obj [j] = j;

}

Alert (objArr [objArr. length-1] + "=" + (objArr. length-1 ));
16. More efficient modification of js Code connecting strings

Var newArray = [];

For (var I = 0; I <xx. length; I ++ ){

NewArray [I] = str;

}

Xx. innerHTML = newArray. join ("");