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,
1190 Reverses the substring between each pair of parentheses leetcodemysql Joint index details You don't know ——HarmonyOS Create data mysql Library process Character recognition technology of vehicle license plate based on Neural Network A guess number of small games , use JavaScript realization Talking about uni-app Page value transfer problem pytorch of ResNet18( Yes cifar10 The accuracy of data classification is achieved 94%)C++ Method of detecting memory leak One is called “ Asking for the train ” A small village Finally got the train