冷知識

position 的默認(rèn)屬性值 static ,繼承 no

query中不能成功對動態(tài)渲染的dom綁定時(shí)間的 bind

關(guān)閉所有動畫(所有效果會立即執(zhí)行完畢)
在配置比較低的電腦上使用jQuery
jQuery.fs.off = true;

動畫相關(guān)
hide 隱藏
$("id").hide("fast");

show:顯示元素
$("id").show(3000);
也可以設(shè)置關(guān)于速度的關(guān)鍵字(字符字)
fast:快速
normal:正常
slow:慢速
$("div").show("slow");

也可以自定義關(guān)于速度的關(guān)鍵字
jQuery.fx.speeds.lsx = 1000;
$("id").show("lsx");

也可以有第二個參數(shù),
第二個參數(shù)是動畫運(yùn)行結(jié)束后的回調(diào)函數(shù)
$("id").show("lsx",function(){
alert('動畫執(zhí)行完畢')
})

toggle:切換顯示或隱藏 1.12之后 不建議使用
$(".div").toggle(100);

fadeIn:顯示(效果是漸變)
$("div").fadeIn(1500);

fadeOut:隱藏(效果是漸變)
$("div").fadeOut(1500);

fadeToggle:切換隱藏和顯示(效果是漸變)
$("div").fadeToggle(5000);

slideUp:隱藏(效果是從下到上隱藏)
$("div").slideUp(1000);

slideDown:顯示(效果是從上到下顯示)
$("div").slideDown(1000);

slideToggle:切換顯示(效果是拉鏈效果)
$("div").slideToggle(1000);

animate()三個參數(shù)
參數(shù)1:設(shè)置CSS屬性(部分屬性,和運(yùn)動相關(guān)屬性)
參數(shù)2:設(shè)置動畫時(shí)長
參數(shù)3:動畫執(zhí)行完畢后的回調(diào)函數(shù)

$("div").animate({
left:"+=200px",
opacity:0.3
},2000,function(){
alert("動畫執(zhí)行完畢");
})

stop:停止當(dāng)前元素所運(yùn)行的動畫
$("div").stop();

finish:停止當(dāng)前元素所運(yùn)行的動畫
(但是會立即完成CSS設(shè)置的樣式)

$("div").finish();

delay:延遲執(zhí)行,可以接受一個參數(shù),
延遲多少毫秒后執(zhí)行
$("div").fadeOut(1000).delay(2000).slideDown(1000);

==========

面試題

//================================
js基本數(shù)據(jù)類型 5+1種
字符串 數(shù)字 布爾 Null Undefined + 對象

typeof typeof() 返回?cái)?shù)據(jù)類型(小寫),這里的括號可有可無
注意:返回 的數(shù)據(jù)類型只有 六種
字符串 數(shù)字 布爾 對象 function Undefined 沒有數(shù)組,增加了function,
null的 類型 返回 object

//================================
var a=b=c=d=5; // a b c d 都是5
--
假如 再寫一個 d=9
則只修改了 d的值, abc還是5

//===============================

var a=b=c=d=[1,2,3,4,5];
console.log("a="+a+"b="+b+"c="+c+"d="+d);//abcd值都是數(shù)組[1,2,3,4,5]
d[5]=9;
console.log("a="+a+"b="+b+"c="+c+"d="+d);//123459
//每個元素增加了元素,中間元素為空
//d[5]=9 所有變量增加一個元素9
//若 d[n] 小于 當(dāng)前的長度 ,則是更改
//d[3]=9 更改所有元素 的第3個元素
--
var a=b=c=d=[1,2,3,4,5];
d=[9,9];
console.log("a="+a+"b="+b+"c="+c+"d="+d);//更改 d 的值

//===============================
var n = (1,2,3,4,5); //n=5

//=================================

console.log("==========");
var str = true+11+null+9+undefined+' zhufengpeixun' + false + null + 9 +[];
console.log(str);
console.log(str.length);//27
console.log(true+11);//12
console.log(true+null);//1
console.log(false+1);//1
console.log(11+null);//11
console.log(true+11+null+9);//21
//測試 undefined
console.log(1+undefined);//NaN
console.log(true+undefined);//NaN
console.log(null+undefined);//NaN
//測試 string 類型
console.log("aa"+undefined);//aaundefined
console.log(undefined + "bb");//undefinedbb

/*
注意:
1.任何類型 和 string 類型計(jì)算 都是拼接

    2.任何 非number 和 number 計(jì)算 都 是 NaN (true false  除外)
        true 1  false 0
    2.任何類型 和 undefined 計(jì)算結(jié)果都是 NaN(Not a Number)

*/

//====================================

正常的 for循環(huán) 刪除 子元素 會造成 數(shù)組 塌陷
<ul id="ull">
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
<li>nodeList</li>
</ul>
/*
//方法 一 在循環(huán)內(nèi) 讓 i-- 永遠(yuǎn) 刪除 第一個元素
for(var i =0;i<eles.length;i++){

        eles.item(i).parentNode.removeChild(eles.item(i));
        //永遠(yuǎn)  刪除 的是 0 元素
        i--;
        console.log(eles.length);
    }
    console.log(eles.length);

/
/
//方法二 倒著來
for(var i = eles.length-1;i>=0;i--){
console.log(i);
eles.item(i).parentNode.removeChild(eles.item(i));
}
*/

//================================
//2016.7.1 night
function fn(){
alert("我是全局變量");
}
function fn2(){//定義一個fn2方法
alert(fn);
fn = 3;
return;
function fn(){
alert("我是定義在fn2方法里邊的");
}
}
/*
//調(diào)用 fn2() 函數(shù)的時(shí)候,先對內(nèi)部的var(只聲明,不賦值 可被function 覆蓋)聲明; function初始化(聲明 并 賦值),
注意:預(yù)解釋 不受 return 干擾
/
fn2();
/
結(jié)果:
function fn(){
alert("我是定義在fn2方法里邊的");
}
*/
//=================================

var name = "china";
var age = 5000;
(function(chinaName ,chinaAge) {
    var name = "珠峰培訓(xùn)";
    var age = 4;
    alert(chinaName + "有" + chinaAge +"歷史" + name + "有" + age + "年");
})(name,age);
//china有5000歷史珠峰培訓(xùn)有4年

//=============================

function a(x){ return x*2;}
var a;
alert(a);
//這里  function a(x) 先被初始化(聲明+賦值),雖然后面再次var a,但是 未 賦值,所以是不覆蓋
//function a(x)的,所以結(jié)果是打印 function(a)
//function a(x) {return x*2;}

// =================

var obj = {
    "name" :"AA",
    "age" :19,
    "sayHello":function(){
        console.log("大家好,我是" + this.name);
    }
}

obj.sayHello();//大家好,我是AA
//假如 對象 有這個屬性  則修改,沒有人話  添加
obj.sex = "男";
console.log("sex:" + obj.sex);//sex:男

//================================
//按鈕
//這樣 寫的話 每次 點(diǎn)擊都會打印 button4
function btnFn(){
for(var i = 1 ;i<4;i++){
var tempBtn = document.getElementById("button" + i);
tempBtn.addEventListener("click",function(){
alert("button" + i);
},false);
//同上
// tempBtn.onclick = function(){
// alert("button" + i);
// }
}
}
btnFn();//調(diào)用 函數(shù),i 不符合 for 條件 ,i =4,打印 button 4

//立即 執(zhí)行
//無參
(function(){ alert("aaaa");})();
//帶參
(function(num){ alert(num)})(44);
//示指定 參數(shù)
(function(){alert(arguments[0]);})(555);

================================
var pattern = /(.)\\s(.)/;
var str = 'google baidu';
var result = str.replace(pattern, '$2 $1'); //將兩個分組的值替換輸出
document.write(result);//baidu google

注意:這里 每個 括號 () 就是一個 $,所以 有 $2 $1

//================================

獲取 ? 后面的 參數(shù) ?=123
var url = localtion.search;
url.substr(1) //=123

==================
思路:
加載頁面 首頁

要實(shí)現(xiàn)效果:  加載頁消失,首頁 顯示

    直接在 加載頁 最后 script 設(shè)置 定時(shí)器
    
    setTimeout(function(){
        //設(shè)置 樣式
        loading.style.display = "none";
        //更改 地址
        location.href = "#/home";
    },2000);

=============

TagName 返回值為大寫
eg:
var test = document.querySelector(".test");
//tagName 的返回值 都是大寫
console.log(test.tagName);//DIV

typeof 返回值為小寫
eg:
console.log(typeof "aa");//string
console.log(typeof 123); //number

==========
獲取元素時(shí)注意
我們知道反斜杠是用來轉(zhuǎn)義的,比如在字符串里,我們想表示空字符就使用"\\b",換行"\\n".同樣, 在提供給querySelectoy點(diǎn)非常重要.
假如是如下
<div class = "foo:bar"></div>

===================
當(dāng)script中 有各種 獲取元素方法的時(shí)候,jquery在 js后面輸出,因?yàn)?jquery是外部鏈接

======================
js是單線程的 js就是一個傻子,做著當(dāng)前 的這件事情,沒有完成之前 ,絕對不會做下一件事情
同步->上一件事情沒有完成,繼續(xù)處理上一伯事情,只有上一件事情完成了才會做下一件事情(js)中大部分都是同步編程的.

異步編程:
規(guī)劃要做一件事情,但是不是當(dāng)前立馬去執(zhí)行這件事情,需要等一定的時(shí)間,這樣的話,我們不會等著它執(zhí)行,而是繼續(xù)自執(zhí)行下面的操作,只有當(dāng)下面的事情都處理完成了才會返回頭處理之前的事情;如果下面的事情并沒有處理完成,不管之前的事情有沒有到時(shí)間,都踏踏實(shí)實(shí)的給我等 著

在JS中異步編程只有四種情況:定時(shí)器都 是異步編程 的,所有的事件綁定都是異步編程的,Ajax讀取數(shù)據(jù)的時(shí)候,我們一般都設(shè)置為異步編程,回調(diào)函數(shù)也是異步編程 的.

每一個瀏覽器對于定時(shí)器的等待時(shí)間有一個最小的值,chrome 5-6ms IE:10-13ms 如果設(shè)置 的等待時(shí)間小于這個值,不起作用,還是需要等到最小時(shí)間才執(zhí)行的;尤其是寫0的時(shí)候

我們定時(shí)器設(shè)置 的等待時(shí)間 不一定就是最后執(zhí)行的時(shí)間,如果定時(shí)器之后還有其他的事情正在處理中,不管定時(shí)器的時(shí)間有沒有到,都是不會執(zhí)行定時(shí)器

=============

圖片的 懶加載 (延時(shí)加載)

保證頁面打開的速度(3s之內(nèi)如果首頁打不開就已經(jīng)算是死亡頁面了)
原理:
1)對于首屏內(nèi)容的圖片:首先給對應(yīng) 的區(qū)域一張默認(rèn)的圖片占位(默認(rèn)圖需要非常小,一般可以維持在5kb以內(nèi)),當(dāng)首屏內(nèi)容都加載完成后(或者也可以給一個延遲的時(shí)間),我們再開始加載真實(shí)的圖片

2)對于其它的屏中的圖片:也是給一張默認(rèn)的圖片占位,當(dāng)滾動條滾動到對應(yīng)區(qū)域的時(shí)候,我們再開始加載真實(shí)的圖片
擴(kuò)展:數(shù)據(jù)的異步加載,開始只把前兩屏的數(shù)據(jù)加載綁定出來,后面的數(shù)據(jù)不進(jìn)行處理,當(dāng)頁面滾動到對應(yīng)區(qū)域的時(shí)候再從新請求數(shù)據(jù)然后綁定渲染數(shù)據(jù)

=============
代碼從上到下執(zhí)行
link->外鏈?zhǔn)紺SS
script

網(wǎng)站性能優(yōu)化
->盡量較少向服務(wù)器的次數(shù)"減少HTTP請求"
css/js文件 進(jìn)行合并 ICON 圖片也進(jìn)行合并->雪碧圖/css sprite

在移動端

=========
元素 居中問題
1.在已知要居中元素寬度的情況下
給要居中元素絕對定位,left和top都設(shè)為50%,通過 margin-top和margin-left的負(fù)值設(shè)置
eg:
body,html{height:100%;}
div {height:100%; position:relative;}
p{width:100px; height:100px; position:absolute;top:50%;left:50%;margin-left:-50px;margin-top:-50px;}

2.在未知要居中元素寬度的情況下
1)要居中元素絕對定位,把其left,top,bottom,right均設(shè)置數(shù)值將其寬度撐開
div( height:100%;position:relative;}

p{position:absolute; top:200px; bottom:200px; left:50px; right:50px;}

2)給其父級元素加display:box屬性實(shí)現(xiàn)

div{heigth:100%; display:box box-pack:center; box-align:center;

===============
<a href = "javascript:;"></a> 不跳轉(zhuǎn)頁面

字體無法縮小問題
頁面有最小字體,如chorome 最小12px,以下就無法縮小了
解決思路,先放大再縮小,這樣就可以無限縮小了
font-size:40px;
transform:scale(0.5);
============

調(diào)用 方法的時(shí)候 加括號 和 不加括號 的區(qū)別
function fun(){ return 5 ; }
var a = fun; //a是fun函數(shù)
var b = fun(); //b是5

JS中我們把以上代碼的方法名,函數(shù)是一種叫做function引用類型的實(shí)例,因此函數(shù)是一個對象.對象是保存在內(nèi)存中,函數(shù)名則是指向這個對象的指針

var a = fun 表示把函數(shù)名fun這個指針拷貝一份給變量a,但是這不是指函數(shù)本身被復(fù)制了一份

如果函數(shù)名后面加上圓括號就表示立即調(diào)用(執(zhí)行)這個函數(shù)里面的代碼(花括號部分的代碼)

==========================

正常情況下,應(yīng)該設(shè)置 margin-top 不生效時(shí),設(shè)置 paading-top 試試

//下面的 操作 對象為 要設(shè)置 元素 排列方式的父元素
//設(shè)置為彈性盒子
display:flex;
//設(shè)置對齊方式為 兩端 對方
justify-content:space-around;

=======================
小米 登錄

設(shè)置 content before after 的時(shí)候 無法 設(shè)置 圖片大小,這時(shí) 換成 background-image 就可以設(shè)置 background-size 大小了

當(dāng)設(shè)置 一個 button 背景的 字體 無法 控制大小 的時(shí)候,改成 直接 寫文字

=============

~ CSS3同級兄弟元素

--
label 為行間 塊級 元素,要設(shè)置 背景要 改成block

input 設(shè)置 id
<input id = "id1"/>
label 要實(shí)現(xiàn) 和 input 關(guān)聯(lián)
<label for = "id1"></label>

--
display 隱藏不占位

visiblity 隱藏 不可操作

opacity 隱藏占位

=========================================

====================
js
btn.innerHTML = "播放"

innerHTML 可以顯示 標(biāo)簽
innerText 只顯示 字

============
JS 無法獲取到 偽類 標(biāo)簽,但是可以獲取到樣式(IE678除外)

獲取偽類:before
var boxp = document.getElemntById("boxp");
window.getComputedStyle("boxp","before").content);
================

ul li input[type = 'checkbox']:checked+label+.options
這個樣式 只操作最后的.options
=================

• 當(dāng)前元素的下一個兄弟元素
  ~ 當(dāng)前元素后面的所有兄弟元素

eg: ul li input[type = 'checkbox']:checked+label+.options{}
這里的操作對象 是 li下 input類型為 checkbox 的下一個兄弟元素為label,label的下一個兄弟元素為 類名為.options 的元素

假如 checkbox 下一個兄弟元素不是label
或者 label 下一個兄弟元素不是 類名為options的元素,則 丟失

========================================

$代表 當(dāng)前 元素

var pattern = /(.)\\s(.)/;
var str = 'google baidu';
var result = str.replace(pattern, '$2 $1');
//將兩個分組的值替換輸出
document.write(result);//baidu google

注意:這里 每個 括號 () 就是一個 $,所以 有 $2 $1

=============================================
jquery checkbox反選

jquery 讀取div中的內(nèi)容

var $body = $("body");
//jquery 添加一個div 到body 樣式
var $mapDiv = $("<div id=container class = mapDiv>afdf</div>").appendTo($body);
$(".mapDiv").css({
"width":"200px",
"height":"200px",
"background":"green",
"position":"absolute",
"top":$h/2+"px",
"left":$w/2-100+"px"
});

===========================

    /*
        以上那種寫法 不好,以后寫 插件  要采用以下方法
        $  window  document 是分別 傳進(jìn)來
         的jQuery對象    window對象   document對象
         這樣寫的好處: 可以加快 代碼的執(zhí)行速度

        分號;  是防止 將來  代碼壓縮  或者  和防止  插件 沒有正確 結(jié)尾導(dǎo)致的一些問題

    */
    ;(function($ , window , document ){
        //開始  寫插件
        $.fn.print = function(message){

            //this 就是當(dāng)前對象,也就是所選元素,因?yàn)槲覀儠ㄟ^ 選擇器獲取 相應(yīng) 的元素后(jQuery對象) , 在調(diào)用 擴(kuò)展 的print方法.原理和構(gòu)造函數(shù) 添加 原型方法 一模一樣.
            console.log($(this).html()+"---"+message);
            console.log("開始,寫插件!!1");


            //如果  想要支持 鏈?zhǔn)?語法 的話,那么得返回 當(dāng)前 對象,也就是當(dāng)前 所選的元素.
            return this;
        }

    })(jQuery , window , document );


    //使用
    $("p").print("參數(shù)");
    $("p").print("參數(shù)").html();

===========
git使用

命令行常用命令：
mkdir test(文件夾名字)：創(chuàng)建一個新的文件夾
ls 查看目錄
cd test :進(jìn)入這個文件夾
pwd ： 查看路徑

一、git 工作流程
1.git工作流總結(jié)
1.創(chuàng)建一個空目錄 mkdir
2.進(jìn)入目錄： cd 目錄名
3.git init 初始化倉庫
4.新建文件到工作區(qū)
5.git add 添加到暫存區(qū)
6.git commit -m"注釋" 添加到歷史區(qū)
2.本地倉庫和遠(yuǎn)程倉庫關(guān)聯(lián)起來
git remote add origin 遠(yuǎn)程倉庫的地址
git remote add origin https://github.com/zhufengpeixun/JavaScript201606.git
查看遠(yuǎn)程倉庫地址：
git remote -v
解除關(guān)聯(lián)
git remote rm origin
3.遠(yuǎn)程倉庫內(nèi)容更新到本地倉庫
git pull origin master
4.把本地內(nèi)容提交到遠(yuǎn)程倉庫
git push origin master
二、常用git命令總結(jié)
1.git pull origin master (這個一般是多人開發(fā))
2.給本地倉庫添加新內(nèi)容
3.git add 要添加的文件名
4.git commit -m"新文件注釋"
5.git push origin master
三、git作業(yè)流程
1.fork 講師倉庫的地址https://github.com/zhufengpeixun/JavaScript201606
2.克隆你自己的項(xiàng)目地址 git clone 倉庫地址
https://github.com/你的github用戶名/JavaScript201606.git
3.修改工作區(qū)的本地代碼，添加你的練習(xí)
4.git add .或者 -A 提交到暫存區(qū)
5.git commit -m"提交練習(xí)" 提交到歷史區(qū)
6.git push origin master 推送到本人的github上
7.發(fā)一個pull request
8.由講師來合并代碼
四、學(xué)員更新老師講義
1.fork珠峰培訓(xùn)講師的倉庫：
1）登錄自己的github
2）把講師倉庫地址復(fù)制到地址欄
3）fork
2.把自己的倉庫下載到本地
1）git clone 自己的地址
2）git remote -v 查看當(dāng)前本地都和哪些遠(yuǎn)程倉庫保持了鏈接 (刪除本地與遠(yuǎn)程倉庫的通道：git remote rm origin名字)
3.在本地增加和講師倉庫鏈接
1）git remote add zhufeng(名字) 講師的倉庫地址
2）git remote -v 查看當(dāng)前本地都和哪些遠(yuǎn)程倉庫保持了鏈接 (刪除本地與講師倉庫的通道：git remote rm zhufeng )
4.拉取老師的最新講義信息
1）git remote update zhufeng (把本地和珠峰培訓(xùn)的鏈接通道進(jìn)行更新)
2）git pull zhufeng master(把最新的講義代碼拉取到本地)
5.把本地拉取的最新講義更新到自己的倉庫中
1)git add ./-A
2)git commit -m”注釋”
建議：git pull origin master(每次推送之前，先進(jìn)行拉?。环乐箓}庫中最新的本地沒有，適用于多人開發(fā))
3)git push origin master 把本地代碼推送到自己的遠(yuǎn)程倉庫中
注意：前3步第一次操作完成，以后都不需要再操作，以后操作直接從第四步開始；

===============

html常見的兼容性問題

1.png24位的圖片在IE6瀏覽器不出現(xiàn)背景
解決方案:做成png8 , 也可以引用一段腳本處理

2.瀏覽器默認(rèn)的margin和 padding不同
解決方案:加一個全局的*{margin:0; padding:0;}

3.IE6雙邊距bug: 在IE6下, 如果對元素設(shè)置 了浮動,同時(shí)又設(shè)置了margin-left或margin-right, margin會加倍
#box{float:left; width:10px; margin:0 0 0 10px}
這種情況之下IE會產(chǎn)生20px的距離
解決方案:在float的標(biāo)簽樣式控制中加入display:inline 將其轉(zhuǎn)化為行內(nèi)屬性(這個符號只有Ie6會識別)

4.漸進(jìn)識別的方式,從總體中逐漸排除局部
首先,巧妙的使用'\\9'這一標(biāo)記, 將IE瀏覽器從所有情況中分離出來
接著,再次使用'+'將IE8和IE7 IE6分離開來,這樣IE8已經(jīng)獨(dú)立識別.
.bb{
background-color:#f1ee18;/所有識別/
.background-color:#00deff\\9;/IE6 7 8 識別/
+background-color:#a200ff;/IE6 7 識別/
_background-color:#1e0bd1;/IE6識別/
}

5.IE下 , event 對象 有x,y屬性, 但是 沒有 pageX,pageY屬性; FireFox 下 ,event 對象有pageX,pageY屬性, 解決辦法:(添加注釋)缺點(diǎn) 是在IE瀏覽器下 可能會增加額外的HTTP請求

6.Chorme 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px顯示,可通過 CSS 屬性 -webkit-text-size-adjust:none ; 解決,如果這一屬性 也不成,使用 transform:scale 來實(shí)施.

7.超鏈接訪問過后 hover 樣式就不出現(xiàn)了,被點(diǎn)擊訪問過的超鏈接不再具有 hover和 active樣式了
解決辦法:是改變CSS屬性的排列順序: LoVe-HAte (愛恨原則)
a:link{} a:visited{} a:hover{} a:active{}