1.移動端meta常用設(shè)置

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=1">

2.transform:rotate,skew,scale,translate,matrix使用詳解
3.for(var i=0;...;...){}中的i和for本身在同一個作用域
4.inline,inline-block,block的區(qū)別:

inline無寬高無垂直方向的margin
inline-block相當(dāng)于inline钧大，但是有寬和高,相互之間有和字體大小有關(guān)的空隙(即父元素font-size:0可以去空隙)
block寬度默認100%,即使設(shè)置了寬度，默認也是占一行的空間

5.水平居中

1.text-align:center(inline,inline-block)
2.margin:auto 0(block,inline-block)
3.margin-left:50%(left:50%);-webkit-transform:translate(-50%,0)
4.flex

6.垂直居中

1.文字line-height設(shè)置為父元素height;
2.父div(display:table),子div(display:table-cell;vertical-align:middle);
3.或者同上(top:50%;-webkit-transform:translate(0,-50%))

6.5［水平垂直居中］
display:flex;
align-items:center;
justify-content:center;

7.獲取當(dāng)前日期

var myDate=new Date();
myDate.getFullYear()+"-"+(parseInt(myDate.getMonth())+1)+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()
+":"+myDate.getSeconds();//getMonth()是0-11

8.ajax執(zhí)行完成的前后順序和代碼順序不是必然關(guān)系罩旋，除非一個方法寫在另外一個方法的success中
9.移動端touchmove的觸發(fā)要設(shè)置event.preventDefault();
10.字符間距：

letter-spacing:..中文間距字符
word-spacing:..英文間距字符

11.iphone手機上數(shù)字可能默認是超鏈接啊央，若想不是超鏈接可設(shè)置

<meta name="format-detection" content="telephone=no"/>

12.position

position:static; /*默認值，忽略top,bottom,left,right,z-index*/
position:absolute; /*相對于static以外的第一個父元素進行定位*/
position:fixed;/*Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. */
position:relative;

13.元素的垂直方向的外邊距存在合并的情況涨醋，具體見http://www.softwhy.com/forum.php?mod=viewthread&tid=4592,即相鄰的兩個或多個外邊距在垂直方向合并成一個外邊距瓜饥，水平不存在。

外邊距條件:
-相鄰的外邊距沒有非空元素浴骂，padding和border和clear分隔
-對象都處在文檔流中乓土，即非浮動和pisition不為fixed和absolute的元素

14.頁面滾動到元素位置

$('html, body').animate({scrollTop: $('#contact').offset().top -100 }, 'slow');

15.ajax和jsonp

ajax和jsonp本質(zhì)上是不同的東西，ajax的核心是通過XmlHttpRequest獲取非本頁內(nèi)容溯警，而jsonp的核心則是動態(tài)添加<script>標簽來調(diào)用服務(wù)器提供的js腳本趣苏。ajax和jsonp的區(qū)別不在于是否跨域，ajax通過代理服務(wù)器一樣可以跨域梯轻，jsonp本身不排斥同域的數(shù)據(jù)的獲取食磕。jsonp不是ajax的一個特例，只是被jquery封裝在ajax中喳挑。

16.按鈕設(shè)置ajax調(diào)用的時候彬伦，防止用戶多次點擊，可以點擊失效伊诵，complete后恢復(fù)单绑。
17.if中的條件==即可滿足，而switch(param){case param1:...;break;}需要param===param1
18.function聲明時的參數(shù)和執(zhí)行時傳入的參數(shù)可以數(shù)量不一致曹宴，參數(shù)的調(diào)用可以用arguments.
19.this

Inside a function, the value of this depends on how the function is called.
not in strict mode : window/global
strict mode : undefined //in strict mode, if this was not defined by the execution context, it remains undefined.
但是在 arrow functions 中
An arrow function does not create its own this context, so this has its original meaning from the enclosing context. Thus, the following code works as expected:

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

另外 obj.prototype屬性中的this搂橙，不管屬性是函數(shù)還是什么，還是obj是函數(shù)還是什么笛坦，這里的this指的是obj

20.Object.prototype:

All objects in JavaScript are descended from Object; all objects inherit methods and properties from Object.prototype, although they may be overridden

new Boolean(false) returns an object which is not null. Non-null objects are always truthy.Incidentally, calling the Boolean function as a function—without the new—actually does return a primitive

new Boolean(false)//true
Boolean(false)//false

22.手動釋放變量 變量＝null;

-webkit-touch-callout:none;                /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust:none;             /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent tap highlight color / shadow */
-webkit-user-select:none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

24.closure/閉包

閉包的關(guān)鍵在于閉包可以保存其執(zhí)行環(huán)境

<div id="c1" style="width:400px;height:400px;background-color:red;">

</div>
<div id="c2" style="width:400px;height:400px;background-color:green;">

</div>
<div id="c3" style="width:400px;height:400px;background-color:yellow;">

</div>
<div id="c0" style="width:400px;height:400px;background-color:black;">

</div>

for(var s=0;s<4;s++){
  (function(n){
    document.getElementById('c'+n).onclick=function(){
    alert(n);
    }
  })(s)
}//點擊div,alert響應(yīng)的數(shù)字

var Counter=(function(){
  var privateCounter=0;
  function changeBy(val){
    privateCounter+=val;
  }
  return {
    increment:function(){
      changeBy(1);
    },
    decrement:function(){
      changeBy(-1);
    },
    value:function(){
      return privateCounter;
    }
  }
})();
Counter.increment();
Counter.value();//1
Counter.increment();
Counter.value();//2
Counter.decrement();
Counter.value();//1

3

//計數(shù)器優(yōu)化版
var makeCounter=function(){
  var privateCounter=0;
  function changeBy(val){
    privateCounter+=val;  
  }
  return {
    increment:function(){
      changeBy(1);
    },
    decrement:function(){
      changeBy(-1);
    },
    value:function(){
      return privateCounter;
    }
  }
};
var Counter1=makeCounter();
var Counter2=makeCounter();
Counter1.increment();
Counter1.increment();
Counter1.value();//2
Counter2.increment();
Counter2.increment();
Counter2.decrement();
Counter2.value();//1

4

function showHelp(help){
  document.getElementById("help").innerHTML=help;
}
function setupHelp(){
  var helpText=[
    {'id':'email','help':'Your e-mail address'},
    {'id':'name','help':'Your full name'},
    {'id':'age','help':'Your age must be over 16'}
  ];
  for(var i=0;i<helpText.length;i++){
    var item=helpText[i];
    document.getElementById(item.id).onfocus=function(){
      showHelp(item.help);
    }
  }
}
setupHelp();//每一個focus都是Your age must be over 16份氧，循環(huán)創(chuàng)建的三個匿名函數(shù)共享同一個執(zhí)行環(huán)境

5

//上一個例子更正
function showHelp(help){
  document.getElementById("help").innerHTML=help;
}
function makeHelpCallback(help){
  return function(){
    showHelp(help);
  }
}
function setupHelp(){
  var helpText=[
    {'id':'email','help':'Your e-mail address'},
    {'id':'name','help':'Your full name'},
    {'id':'age','help':'Your age must be over 16'}
  ];
  for(var i=0;i<helpText.length;i++){
    var item=helpText[i];
    document.getElementById(item.id).onfocus=makeHelpCallback(item.help);
  }
}
setupHelp();

25.變量范圍/ the scope of variables

closure

var a = 1;
var six = (function() {
  var a = 6;
  return function() {
    // JavaScript "closure" means I have access to 'a' in here,
    // because it is defined in the function in which I was defined.
    alert(a);
  };
})();
six();//6

Object properties

var a = 1;
function five() {
  this.a = 5;
}
alert(new five().a)//5

Prototype-based scope resolution

var a = 1;

function seven() {
  this.a = 7;
}

// [object].prototype.property loses to
// [object].property in the lookup chain. For example...

// Won't get reached, because 'a' is set in the constructor above.
seven.prototype.a = -1;

// Will get reached, even though 'b' is NOT set in the constructor.
seven.prototype.b = 8;
new seven().a;//7
new seven().b;//8

Global+Local

var x = 5;
(function () {
    console.log(x);
    var x = 10;
    console.log(x); 
})();
//This will print out undefined and 10 rather than 5 and 10 since JavaScript always moves variable declarations 
//(not initializations) to the top of the scope, making the code equivalent to:
var x = 5;
(function () {
    var x;
    console.log(x);
    x = 10;
    console.log(x); 
})();

26.在iPhone中使用video標簽時唯袄，網(wǎng)頁中打開視頻會自動全屏，可以試著在vedio中設(shè)置webkit-playsinline="true"
27.call/apply

While the syntax of this function is almost identical to that of apply(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

A different this object can be assigned when calling an existing function. this refers to the current object, the calling object. With call, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

function greet(){
  var reply= [this.person, 'Is An Awesome', this.role].join(' ');
  console.log(reply);
}
var i = {
  person: 'Douglas Crockford', role: 'Javascript Developer'
};
greet.call(i); // Douglas Crockford Is An Awesome Javascript Developer

/* min/max number in an array */
var numbers = [5, 6, 2, 3, 7];

/* using Math.min/Math.max apply */
var max = Math.max.apply(null, numbers); /* This about equal to Math.max(numbers[0], ...) or Math.max(5, 6, ..) */
var min = Math.min.apply(null, numbers);

/* vs. simple loop based algorithm */
max = -Infinity, min = +Infinity;

for (var i = 0; i < numbers.length; i++) {
  if (numbers[i] > max)
    max = numbers[i];
  if (numbers[i] < min) 
    min = numbers[i];
}

28.Jquery的each方法中return相當(dāng)于continue蜗帜，return false 相當(dāng)于break即跳出循環(huán)
29.對象屬性的引用中恋拷，如果屬性名詞是以數(shù)字開頭，或者屬性名是保留字的厅缺，用點號引用是非法的蔬顾，只能用中括號(例如Array)

renderer.3d.setTexture(model, 'character.png');     // a syntax error
renderer['3d'].setTexture(model, 'character.png');  // works properly
//在Array中 arr['2']和arr[2]是相等的，因為在javascript引擎中會強制把arr[2]中的2轉(zhuǎn)換為'2'

30.Array

javascript associative arrays considered harmful

var associative_array = new Array();
associative_array["one"] = "Lorem";
associative_array["two"] = "Ipsum";
associative_array["three"] = "dolor";
for (i in associative_array) { alert(i) };// "one""two""three"
//Array.length does not count them as items , associative_array.length=0

一元正號運算符（unary plus operator）位于其操作數(shù)前面湘捎，計算其操作數(shù)的數(shù)值诀豁，如果操作數(shù)不是一個數(shù)值，會嘗試將其轉(zhuǎn)換成一個數(shù)值窥妇。

var a="5";
alert(typeof(a));//string
alert(typeof(+a));//number

32.簡潔代碼的寫法

1.a&&a.stopPropagation&&a.stopPropagation()
2.var ss=a||{};
3.random_num=Math.random()>0.5?-1:1;

33.new

When the code new Foo(...) is executed,the following things happen:
1.A new object is created,inheriting from Foo.prototype.
2.The constructor function Foo is called with the specified arguments and "this" is bound to the newly create object. "new Foo" is equivalent to new Foo(),i.e. if no argument list is specified,Foo is called without arguments.
3.The object returned by the constructor function becomes the result of the whole new expression.if the constructor function doesn't explicitly return an object, the object created in step 1 is used instead.(Normally constructors don't return a value,but they can choose to do so if they want to override the normal object creation process)

34.alert()

message is an optional string of text you want to display in the alert dialog, or, alternatively, an object that is converted into a string and displayed.alert()隱式調(diào)用toString();

var add=function(a){
  var obj={};
  var val=a;
  obj.add=function(b){
    val+=b;
    return obj.add;
  }
  obj.add.toString=function(){
    return val; 
  }    
  return obj.add;
}
var f=add(1)(2)(3)(4); //程序運行是從左向右
alert(f);//10 

35.Cookie

An HTTP cookie (also called web cookie, Internet cookie, browser cookie or simply cookie), is a small piece of data sent from a website and stored in the user's web browser while the user is browsing. Every time the user loads the website, the browser sends the cookie back to the server to notify the user's previous activity.[1] Cookies were designed to be a reliable mechanism for websites to remember stateful information (such as items added in the shopping cart in an online store) or to record the user's browsing activity (including clicking particular buttons, logging in, or recording which pages were visited in the past). Cookies can also store passwords and form content a user has previously entered, such as a credit card number or an address.

36.Navigator

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.
A Navigator object can be retrieved using the read-only Window.navigator property.

37.true&false

如果邏輯對象無初始值或者其值為 0舷胜、-0、null活翩、""烹骨、false、undefined 或者 NaN材泄，那么對象的值為 false沮焕。否則，其值為 true（即使當(dāng)自變量為字符串 "false" 時）,可通過 var bool_str=new Boolean(str);來檢測bool值,注意空對象{}也是true拉宗，此時可以用 obj.toString().trim()來判定是true or false;

38.margin-top&margin-bottom

margin-top或margin-bottom設(shè)置百分比峦树，實際長度是百分比乘以父級元素的寬度
1.The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.
2.它們的設(shè)置可能會影響.parent().siblings().children()的元素的位置，此時應(yīng)設(shè)置 parent()的overflow:hidden

39.清除浮動

父元素:after{clear:both;content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;
height:0;}

display : block 是不可少的

39.對于多行分類信息旦事，信息不固定可能換行的情況魁巩，此時可以直接用line-height把高度撐開，或者文字上下padding

3.png

修改iPhone中的默認樣式：-webkit-appearance:none;

41.TouchEvent

應(yīng)用實例

42.event

The Event interface represents any event of the DOM. It contains common properties and methods to any event.
A lot of other interfaces implement the Event interface, either directly or by implementing another interface which does so:TouchEvent...

43.load&DOMContentLoaded

The load event is fired when a resource and its dependent resources have finished loading.load is used for window.onload or $( window ).load(function() { ... })
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.DOMContentLoaded is equal to Jquery:$(function(){}) or $(document).ready();

44.!important 強制覆蓋其他css樣式
45.background-position&background-origin

background-origin:The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property
background-position:The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

window.addEventListener('deviceorientation',function(){},false);//function中的事件會一直觸發(fā)

47.table

{*常用設(shè)置*}
table{border-left:1px solid $666;border-bottom:border-left:1px solid $666;}
td{border-right:1px solid $666;border-top:border-left:1px solid $666;}
<table border="0" cellspacing="0" cellpadding="0">
...
</table>

post 不限大小 安全
get 參數(shù)體現(xiàn)在url中姐浮，長度受url長度限制谷遂，不安全

48.compare time---Date

 var startdate=Date.parse(new Date(arrayStr[0].replace(/\-/g,'/')));
 var comm_endtime=Date.parse(new Date(arrayStr[1].replace(/\-/g,'/')));
//1990-5-31 is invalid in iphone
//Date.now() Returns the numeric value corresponding to the current time - the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC.
//Date.parse() Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC.
//or new Date().getTime();
//new Date("1997/1/1 11:11:11").getTime();new Date()可以把字符串轉(zhuǎn)換成日期格式

49.iphone中 通過$(document).on('click','selector',function(){...})點擊無效的問題
參考https://www.zfanw.com/blog/ios-safari-click-not-working.html,
經(jīng)多次實驗后有多種方式可修復(fù)
－－－1.js方式

1.$(selector).on('click',function(){});
2.$(selector).click(function(){...});
3.或者方法寫入標簽中
4.或者標簽中另外添加 onclick="javascript:void(0)"

－－－2.css方式--推薦

cursor:pointer

50.css的height,width變化是自帶動畫效果的線性變化
51.點擊執(zhí)行click事件的時候，會執(zhí)行touchstart 和 touchend单料，但是不會執(zhí)行touchmove，所以對于右滑出現(xiàn)刪除按鈕点楼，點擊修改的功能扫尖，如下

1232.jpg

code：

.info_select{-webkit-transform: translate(-70px,0);-webkit-transition:all 0.3s linear;}

var test_start=false,test_move=false;
var _this="";
var end_x=0,start_x=0;
$(document).on('touchstart','.info',function(e){
    start_x=e.originalEvent.targetTouches[0].pageX;
    _this=$(this);
    test=true;//確定是否是可移動區(qū)域滑動
});
$(document).on('touchmove',function(e){
    if(!test){
    return;
    }
    e.preventDefault();//安卓這條必須加上，iPhone非必需
    end_x=e.originalEvent.targetTouches[0].pageX;
    test_move=true;//驗證是否是點擊事件
});
$(document).on('touchend',function(e){
    if(!test){
    return;
    }
    if(!test_move){
    return;
    }
    if(end_x-start_x<=-100){                      

        _this.addClass('info_select').parent().siblings().children('.info').removeClass('info_select');
    }
    test=false;
    test_move=false;
});

52.安卓機：

window.location.href=window.location.href;
//或者
window.location.reload();
//無效掠廓，應(yīng)該是緩存的問題 换怖，此時可以通過加后綴解決
window.location.href=window.location.href+Math.random();

53.body 即使 設(shè)置 height:100px;overflow:hidden 頁面上的內(nèi)容也會顯示
此時 可以把頁面內(nèi)容放在相通設(shè)置的div中即可達到想要的效果

/*可以直接繪制出距上下左右都是8px的element*/
position: absolute;
top: 8px;
left: 8px;
bottom: 8px;
right: 8px;

If your iframe is in the same domain as your parent page you can access the elements using document.frames collection.
If your iframe is not in the same domain the browser should prevent such access for security reasons.

--1.iframe內(nèi)部獲取iframe外部的元素

window.parent.document.getElementById('target'); 
window.parent.$(elementid).attr(attributeName);

--2.iframe外部獲取iframe內(nèi)部的元素

$("#myiframe").contents().find("#myContent");
window.frames['myIFrame'].document.getElementById('myIFrameElemId')

56.函數(shù)中聲明的變量 無論在哪聲明或者賦值，javascript引擎總會把聲明提升到函數(shù)頂部蟀瞧。

var regular_joe='regular_joe is assigned';
(function prison(regular_joe){
  var regular_joe; 
    alert(regular_joe);
})('the regular_joe argument');
//alert 'the regular_joe argument'
//因為regular_joe先在頂部聲明 沉颂，再由參數(shù)賦值

57.css 獲取排序的元素

input:nth-child(0){}/*獲取第一個input元素*/
input:last-child{}/*獲取最后一個元素*/

58.假設(shè)opacity設(shè)置的是一個動畫条摸，在這個動畫完成之后才回進行該元素的后續(xù)的css樣式生效

1.css:＋，This is referred to as an adjacent selector or next-sibling selector. It will select only the specified element that immediately follows the former specified element.

.payInput[type="radio"]:checked + .payName{
  background:url(../image/radioButton_select.gif) 20px center no-repeat;
}
.payName{
  background:url(../image/radioButton.gif) 20px center no-repeat;
}

2.The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

60.圓－border-radius:50%;

61.css 開啟設(shè)備硬件加速

.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
}

/* In Chrome and Safari we might see a flickering effect when using CSS transforms or animations. */
/*  The following declarations can be used to fix the issue: */
.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

  /* Another method that seems to work well in WebKit-powered desktop and mobile browsers is translate3d */
.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

62.ps切圖:文字取色 取最深色;字體的高度大致為font-size;第一行的底部 到第二行的底部 為line-height
63.touchmove中不是任何時候都要加上 'e.preventDefault()'铸屉，例如左右滑動顯示隱藏刪除按鈕钉蒲，但是上下需要滑動顯示更多信息。
64.單邊陰影效果：

/*通過邊緣設(shè)置漸變元素的方式設(shè)置單邊陰影,例如 單邊下陰影*/
:after{
  content: ' ';
  background: -webkit-linear-gradient(bottom, #EEE, #ddd);
  position: absolute;  /*父元素設(shè)置 position:relative*/
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  -webkit-transform: translate(0,100%);
}

64.一般動態(tài)更改 'title'使用的方式是

document.title = "123";

但是此種修改方式在微信瀏覽器中不起作用彻坛，解決方式是 每次更改title的時候新增一個隱藏的iframe

changeTitle = function (_title){
    var $body = $('body');
    document.title = _title;
    // hack在微信等webview中無法修改document.title的情況
    var $iframe = $('<iframe src="image/clock.png" width="0" height="0"></iframe>');
    $iframe.on('load',function() {
      setTimeout(function() {
         $iframe.off('load').remove();
      }, 0);
    }).appendTo($body);
}

65.元素的創(chuàng)立和需要過渡的動畫的結(jié)果同時設(shè)置時顷啼，transition不會生效，直接到達最終結(jié)果昌屉。此時需要

tmp5aebb28b.png

即把初始階段和最終階段分割成兩部分钙蒙。

66.css3 transform設(shè)置后對相關(guān)元素的影響

應(yīng)用了transform后，會使當(dāng)前元素變成了設(shè)置了position:absolute的效果间驮。

67.Access the css “:after” selector with jQuery

tmp4daeb2eb.png

68.table-cell

69.一個元素同時設(shè)置background-image和background-color躬厌，這兩個屬性要寫在一起模狭。

background:url(../image/spa-homepage-notice_bg.png) no-repeat #ffecd6;

70.同一個元素設(shè)置前后兩個相同屬性剪芥，需要后一個覆蓋前一個的話复哆，前后的格式需要相同绘梦。

.a .b .c{background-color:red}
.a .b .d{background-color:blue}

71.What does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?

Edge mode tells Internet Explorer to display content in the highest mode available.If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9. Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed.

If you are using the X-UA-Compatible META tag you want to place it as close to the top of the page's HEAD as possible.

IE8 或以后的版本才有效

72.自執(zhí)行函數(shù)和閉包 保證了各個模塊之間的隔離以及各個模塊的使用方式(公開API)的使用昌阿。

73.javascript 中 唯一能定義變量作用域的就是函數(shù)刷钢。可以在函數(shù)中聲明全局變量荆针，只要省略var即可玖媚。在函數(shù)的頂部聲明變量可以使變量的作用域清晰涡贱。當(dāng)變量被聲明時辰狡，聲明會被提升到它所在函數(shù)的頂部，并被賦予undefined值坐求。在定義函數(shù)的時候變量的作用域鏈已經(jīng)固定了须妻。
在運行時，javascript會檢索作用域?qū)蛹墎斫馕鲎兞棵毫臁Ｋ鼜漠?dāng)前作用域開始荒吏，然后按它的查找方式回到頂級的作用域，即(window)或者global(node.js)對象师逸，它使用找到的第一次匹配并停止查找司倚。
74.一些小tips
i.form 表單的提交和重置

<button type="submit">提交</button>
<button type="reset">重置</button>

ii.列表
ul li;ol li;dl dt dd
iii.

<a href="mailto:*****@163.com">聯(lián)系我們</a>
<a href="tel:18888888888">18888888888</a>

iiii.語義化標簽使用

Pasted Graphic.png

iiiii.當(dāng)鼠標在a元素hover時，a的title屬性會出現(xiàn)篓像。

75.函數(shù)聲明和函數(shù)表達式不一致的地方是函數(shù)聲明在調(diào)用前后都不影響使用动知，但是函數(shù)表達式的定義要在調(diào)用前。

abc();//正常
eee();//報錯
function abc(){
    //code
}
var eee = function (){
  //code
}

76.當(dāng)使用scale變大一個元素员辩，其父元素充當(dāng)容器元素并且設(shè)置overflow:scroll后盒粮，scroll to the top 和 left 沒有用，結(jié)果使得元素展示不完全奠滑，此時只要設(shè)置

document.getElementById(container_id).style.transformOrigin = '0 0';

[相關(guān)問題](Using CSS transform scale() to zoom into an element without cropping, maintaining scrolling)
77.在window.onload的情況下才能用js或者jq獲取未知圖片的寬高(被圖片元素撐高的容器元素也是)
78 . 文字底部對齊

display:table-cell; 
vertical-align:bottom;

79.局部變量的使用問題

function a(b){
  var b = b;
  alert(b);
}//這種寫法沒問題

b=1 //或者var b=1
function (){
  var b = b;
  alert(b);
}//報錯 b undefined  丹皱，因為此處var b的時候把外面的b覆蓋了

79.循環(huán)對象中的自有屬性 鍵值對

for (var key in p) { if (p.hasOwnProperty(key)) { console.log(key + " -> " + p[key]); }}

80.offsetX,pageX,clientX,screenX的區(qū)別
pageX and pageY:
Relative to the top left of the fully rendered content area in the browser.
screenX and screenY:
Relative to the top left of the physical screen/monito
clientX and clientY:
Relative to the upper left edge of the content area (the viewport) of the browser window.
offsetX and offsetY：
are relative to the parent container

ps: In jquery,don't confuse this with .offset() and .position(), in which .offset() is relative to the document and .position() is relative to the parent container

80.父元素設(shè)置好了左右padding，此時想要達到父元素的快遞宋税，可以設(shè)置左右margin為負值摊崭。

margin-left:-10px;
margin-right:-10px;

但此時要注意 ，div p等不用設(shè)置寬度即可生效杰赛，但針對a元素需要設(shè)置寬度時呢簸，寬度要設(shè)置成父元素的寬度

81.What are the differences between JSON and JavaScript object?

json的key必須是雙引號

81.設(shè)定一個p元素為其中字體的高度時

font-size:24px;
height:24px;
/*或者改行文字為單行時*/
font-size:24px;
line-height:24px;  /*因為此時line-height把高度撐高*/

因為

The font-size property specifies the size, or height, of the font.
The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: inline-block. This property is most often used to set the leading for lines of text.

WechatIMG67.jpeg