1.如何寫出缺口結(jié)構(gòu)的HTML和CSS代碼狼渊。
其中缺口采用的是覆蓋原理。上面的Second的元素蓋住下面元素邊框察署。使用
margin : npx;
實(shí)現(xiàn)
2.使用js觸發(fā)事件
1.當(dāng)上面的First等進(jìn)行點(diǎn)擊時(shí)葵擎,添加類,進(jìn)行樣式改變幕庐。循環(huán)添加事件監(jiān)聽并且點(diǎn)擊時(shí)添加類熔吗,如上章節(jié)相同姆钉。
2.下面的second顯示使用隱藏別的元素吆倦,只顯示一個框听诸。
3.但是我們初始化的時(shí)候樣式與預(yù)期不同。于是我們采用開始時(shí)就系統(tǒng)默認(rèn)點(diǎn)擊了一個元素
var event = new Event('click');//事件
元素.dispatchEvent(event);
4.格式化代碼蚕泽。
使用函數(shù)封裝組件晌梨,使代碼復(fù)用
1.選擇多個元素
document.querySelectorAll('.類名');
2.函數(shù)調(diào)用。
由于我們的類名可能不同须妻。因此我們要使用傳參的方式仔蝌。
function 函數(shù)名(參數(shù)1,參數(shù)2···){
//代碼
}
3.由于我們很多參數(shù)都可能相同,只有少部分進(jìn)行改變璧南。因此我們可以采用默認(rèn)參數(shù)的方式掌逛。
1>我們未傳參
if(a==undefined){
//當(dāng)我們未傳參時(shí)a為什么
}
a=×××;
簡化上述代碼
if(!a){
//如果a是undefined/Null/0/NaN/''的時(shí)候執(zhí)行的代碼
}
如果有時(shí)a不可以為空格或者0.我們又如何簡化
我們要檢測內(nèi)容是否為空
' ' != '';
我們?nèi)绾稳サ羲锌兆址?br>
a.trim();
我們?nèi)绾闻袛噍斎氲氖欠駷閿?shù)字
var num = parseInt(value,10);//因?yàn)樽址荒苻D(zhuǎn)換為數(shù)字司倚,只能為NaN豆混;
if(!num){
//當(dāng)num為NaN/0執(zhí)行代碼
}
但是當(dāng)我們輸入0時(shí)依舊會執(zhí)行當(dāng)num為NaN執(zhí)行的代碼
if(isNaN(num)){
//當(dāng)num為NaN執(zhí)行代碼
}
3邏輯或的慣用法
條件1 || 條件2:短路技術(shù)
即當(dāng)條件1為真不會判斷條件2
使用方法:通常在默認(rèn)值時(shí)使用
var a
= ((options.menuSelector) || '.menu')
第二個為默認(rèn)值。當(dāng)?shù)谝粋€為空時(shí)动知,我們的a就會為默認(rèn)值
4初識對象(Object)
1.我們?nèi)绾谓鉀Q函數(shù)的參數(shù)傳入過多的問題皿伺?
函數(shù)參數(shù)<=4;
當(dāng)數(shù)據(jù)太多進(jìn)行打包盒粮。將可選參數(shù)進(jìn)行封裝成為對象鸵鸥;
var options = {
參數(shù)1名字:數(shù)值,
參數(shù)2名字:數(shù)值,
···
};
function(必選參數(shù),options){
options.參數(shù)1名字;//就取到參數(shù)1的數(shù)值
}
//當(dāng)函數(shù)中未傳入并且不需要傳入時(shí)我們需要默認(rèn)值丹皱;將options等于空
function(必選參數(shù),options){
options=options||{};
options.參數(shù)1名字;//就取到參數(shù)1的數(shù)值
}
//我們的參數(shù)只需要一處使用因此不需要命名
function(必選參數(shù),{參數(shù)1名字:數(shù)值,參數(shù)2名字:數(shù)值···}){
options=options||{};
options.參數(shù)1名字;//就取到參數(shù)1的數(shù)值
}