Q1. Achieve two column layout

describe : Realize such a layout , On the left is the navigation bar , On the right is the main area , Navigation bar width fixed to 200px, The width of the main area is not fixed , And between the navigation bar and the main area is 20px The gap between . requirement , Load the main area first when loading .
answer : Ask this question , It reminds me of the Grail layout and the double wing layout , This is a variation , It's just changing three columns into two columns .
Code up :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document
</title> <style type="text/css"> .container { padding-left: 220px; width: 100%;
overflow: hidden; } .main { width: 100%; height: 300px; background-color: #ccc;
float: left; } .nav { width: 200px; height: 300px; background-color: #eee; float
: left; margin-left: -100%; position: relative; left: -220px; } </style> </head>
<body> <div class="container"> <div class="main"></div> <div class="nav"></div>
</div> </body> </html>
note: Because the main area should be loaded first , Because the page load is from top to bottom , So the main area of the div Put it to the front . The above one is a simulation of the double wing configuration .

Q2. Type judgment

* js What are the data types
js What are the data types :null,undefined,boolean,string as well as number.
* How to judge these types
use typeof Judge , Can judge several types ? Five kinds ,undefined,boolean,string,number as well as object.
* How to distinguish null and object as well as array? function decideType(obj) { if(obj === null) {
// by null }else if (Array.isArray(obj)) { // array }else { //object type } }

note: Here and the interviewer also said how to judge the array , That's what I wanted to do with arrays Array.isArray To determine whether it is an array , The interviewer said , You can use the array method to determine , for example push function , I realized it at that time , Oh , Yes , That's OK . The interviewer said ,object You can also use prototypes to add these methods , I .... I'm so young .
Array this can also use the constructor
var arr = [1,2,3]; if (arr.constructor === Array) { alert('array'); } // eject array
var myObject = {}; if (myObject.constructor === Array) { alert('array'); }
// No pop-up array
In fact, constructors can also be modified , Is the question endless ......
var myObject = {}; myObject.constructor = Array; if (myObject.constructor ===
Array) { alert('array'); } // eject array
Q3. by DOM Add event
var EventUtil = { addHandler:function (element,type,handler) { if
(element.addEventListener) { element.addEventListener(type,handler,false); }else
if (element.atachEvent) { element.atachEvent('on'+type,handler); }else {
element['on'+type] = handler; } } }
Q4. Eliminate bubbling
function cancelBubble(ev) { if (ev.stopPropagation) { ev.stopPropagation(); }
else { ev.cancelBubble = true; } }
Q5. about addEventListener The third parameter

When you talk about it, you will think of it DOM Event flow , It consists of three stages : Event capture phase , In the target stage and event bubble stage . The first thing that happens is event capture , Provide opportunities for intercepting incidents . Then there are the events received by the actual target . The last one is the bubble phase , You can respond to events at this stage .

and addEventListener The third parameter is to determine at what stage the event handler is called .
If it is true, Indicates that the event handler is called during the capture phase , If it is false, Indicates that the event handler is called during the bubbling phase .

Q6.currentTarget and target The difference between
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>
<style type="text/css" rel="stylesheet"> #fa{ width: 100%; height: 170px;
padding: 20px 0px; background-color: cadetblue; } #son{ width: 100%; height: 20
px; padding: 30px 0px; background-color: black; color: white; text-align: center
;cursor: pointer; } </style> </head> <body> <div id="fa" onmousedown=
"getEventTrigger(event)"> <p id="son" onmousedown="getEventTrigger(event)"> I'll try
</p> </div> </body> <script type="text/javascript"> var fa =
document.getElementById('fa'); var son = document.getElementById('son');
function getEventTrigger(event) { x=event.currentTarget; y=event.target; alert(
"currentTarget point : " + x.id + ", target point :" + y.id); } </script> </html>
for instance , When clicking on a paragraph p When , Pop it up first
currentTarget point : son, target point :son
In the pop-up :currentTarget point : fa, target point :son

When you click div(fa) When , Pop only :
currentTarget point : fa, target point :fa

thus it can be seen ,current It's the object to be clicked on , and currentTarget Refers to the object that the current event is active during the bubbling phase ( It's usually done target After the incident , Bubble to parent element , Handle events defined by the parent element , namely currentTarget).


There are two values in it :border-box, as well as content-box Two values . Tell me the difference
That's to say CSS Box model of

W3C In the standard , We set it up width It means content Of width, and IE in , We set it up width It means border-left+padding-left+content+padding-right+border-right.

If you set the border-box:border-box; Then set the width It is equivalent to setting border-left+padding-left+content+padding-right+border-right Width of .
If you set the border-box:content-box; Then set the width It's just settings content Width of .

Q8.window.onload and document.ready The difference between

* difference 1: execution time
window.onload You must wait until all elements of the page, including images, are loaded .
(document).ready() Time dom After the structure is drawn, it will be executed , You don't have to wait until the load is complete . Join with window.onload, On the page js An error was reported or no picture resources were found ,
You'll be waiting . If both methods are defined in the page ,(document).ready() than document.onload Early implementation .
difference 2: Two methods repeated execution problem
document.onload It can only be executed once , If more than one of the methods is defined , Then only the last one will be executed .
$(document).ready() You can write more than one , The execution order is executed according to the writing order .

3. difference 3: Simplified writing
window.onload There is no simplification
$(document).ready(function(){}) It can be abbreviated as (function(){});

detailed description :
$(document).ready It's in dom After loading, you can directly dom Operate , For example, a picture only needs
Tag complete , You don't have to wait for the image to load to set the width and height properties or style of the image ;

window.onload It's all over the place document file ( Including loading pictures and other information ) After loading, you can directly dom Operate , For example, the width and height properties or styles of an image can only be set after the icon is loaded .

©2019-2020 Toolsou All rights reserved,
C Review of basic language knowledge Go Language learning notes (GUI programming )Java Misunderstanding —— Method overloading is a manifestation of polymorphism ? How to achieve low cost and high stability for cloud native applications ?elementui Shuttle box el-transfer Display list content text too long C/C++ Memory model Element-Ui assembly Message Message prompt , alert Popup C# Making a simplified version of calculator Python In pycharm editor Interface style modification Tiktok refresh progress bar ( Two little balls turn ), The code is simple