One project summary, content setting page

1. If you want to add, delete, query, and modify the front-end page, use MVC.

The basic idea of MVC is that when the model layer changes, the view layer is notified; when the view layer changes, the model layer is notified; the control layer is the entry to set the change.

Model processing. view processing must be isolated.

Use JS objects to classify variables and functions.

 

2. html encoding occurs when the background data is placed in the front-end HTML page.

To decode. If jquery is used, $ ("<DIV/>" ).html (json_string). Text () is available ()

 

3. Simplest asynchronous Image Upload

Construct a hidden IFRAME and a hidden HTML element of input type = "file", and point the Image Upload form to it.

The IFRAME load event is used to listen to the information returned by image uploads.

Determine whether the data is successfully uploaded based on the information returned by the background.

 

4. Exit the page to determine whether the content has been modified

Window. onbeforeunload = function (event ){
If (condition ){
Event. returnvalue = "the content has been modified. Are you sure you want to leave the page without saving it? ";
Return "the content has been modified. Are you sure you want to leave the page without saving it? ";
}
}

 

5. pop-up window creation

A translucent black background with a Z-index greater than a translucent black background.

 

6. Bind the click event of an element with jquery, and bind other events to the click event of an element.

Question: Click several times, and then click other events bound to the event to execute several times.

Solution: Use jquery's unbind method.

 

7. JSON comparison

The JSON string is different from the two.

 

8. js object Replication

$. Extend (true, {}, Copied object); // use the jquery Library

 

9. Use jquery settings to get the textarea Value

Use $ (textarea ID). Val ()

 

10. When layout a page, make a brain chart to determine which elements exist. Write all static elements.

 

11. When writing page interactions, make a brain chart first.

 

12. IE6 compatibility

IE6 really doesn't want to talk about her. Kill.

1. inline-block compatibility

* ZOOM: 1;
* Display: inline;
Display: inline-block;

2. Mask Layer compatibility

Overflow: hidden;
Width: 100%;
Height: 100%;
Border: 0px;
Padding: 0px;
Margin: 0px;
Top: 0px;
Left: 0px;
Display: none;
Visibility: visible;
Background-color: #000;
Opacity: 0.7;
-Moz-opacity: 0.7;
Filter: alpha (opacity = 70 );
Position: absolute;
Z-index: 100;

Floating on the Mask Layer

Top: 20%;
Left: 33%;
Display: none;
Visibility: visible;
Position: absolute;
Z-index: 1000;
Width: 480px;
Background: # ffffff;
Border: 5px solid # CCC;
Line-Height: 20px;
Margin: 0;

Under the same parent element.

3. In some events in JS, IE6 is irrelevant in the window variable, so you need to judge.

 

13. Vertical center of multi-line text

Place multiple lines of text in a block and set consistent padding-top and padding-bottom. Put it in the inline-block, the line-height is the same as the height, and the line-height inheritance is canceled.