Tab組件

1.如何寫出缺口結(jié)構(gòu)的HTML和CSS代碼狼渊。

捕獲.PNG

其中缺口采用的是覆蓋原理。上面的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ù)值
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末妒穴,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子摊崭,更是在濱河造成了極大的恐慌讼油,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呢簸,死亡現(xiàn)場離奇詭異矮台,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)根时,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進(jìn)店門瘦赫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蛤迎,你說我怎么就攤上這事确虱。” “怎么了替裆?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵蝉娜,是天一觀的道長唱较。 經(jīng)常有香客問我扎唾,道長召川,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任胸遇,我火速辦了婚禮荧呐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘纸镊。我一直安慰自己倍阐,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布逗威。 她就那樣靜靜地躺著峰搪,像睡著了一般。 火紅的嫁衣襯著肌膚如雪凯旭。 梳的紋絲不亂的頭發(fā)上概耻,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天,我揣著相機(jī)與錄音罐呼,去河邊找鬼鞠柄。 笑死,一個胖子當(dāng)著我的面吹牛嫉柴,可吹牛的內(nèi)容都是我干的厌杜。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼计螺,長吁一口氣:“原來是場噩夢啊……” “哼夯尽!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起登馒,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤匙握,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后谊娇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肺孤,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年济欢,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了赠堵。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡法褥,死狀恐怖茫叭,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情半等,我是刑警寧澤揍愁,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布呐萨,位于F島的核電站,受9級特大地震影響莽囤,放射性物質(zhì)發(fā)生泄漏谬擦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一朽缎、第九天 我趴在偏房一處隱蔽的房頂上張望惨远。 院中可真熱鬧,春花似錦话肖、人聲如沸北秽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽贺氓。三九已至,卻和暖如春床蜘,著一層夾襖步出監(jiān)牢的瞬間辙培,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工悄泥, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留虏冻,地道東北人。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓弹囚,卻偏偏與公主長得像厨相,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子鸥鹉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line)蛮穿,也就是一...
    悟名先生閱讀 4,149評論 0 13
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)毁渗,斷路器践磅,智...
    卡卡羅2017閱讀 134,659評論 18 139
  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,128評論 0 21
  • 第四章 美的王國-希臘和希臘化的世界,公元前4世紀(jì)至公元1世紀(jì) 在這一章里灸异,終于遇到了我所謂的西方藝術(shù)啟蒙(大概也...
    shimengsun閱讀 220評論 0 0
  • 作者:物記網(wǎng)友默默 我是一個蜈蚣星人疟暖,每個季度的鞋子二三十雙,細(xì)跟高跟坡跟傻傻分不清楚,鞋柜床下滿滿當(dāng)當(dāng)俐巴; 我是一...
    物記閱讀 479評論 0 1