“小白硕勿！今天我們開始學(xué)習(xí)怎么使用jQuery哨毁，jQuery是一個(gè)非常強(qiáng)大的js框架，在做網(wǎng)頁功能的時(shí)候配合jQuery你會(huì)發(fā)現(xiàn)對(duì)網(wǎng)頁上的容器控制變得很簡單源武，這會(huì)讓你一直保持學(xué)習(xí)的動(dòng)力扼褪。所以我準(zhǔn)備讓你先學(xué)習(xí)引入jQuery想幻，然后對(duì)容器進(jìn)行一些基礎(chǔ)操作，再配合js的一些知識(shí)循序漸進(jìn)的進(jìn)行深入學(xué)習(xí)话浇。好了現(xiàn)在打開你的webStorm的mylearn項(xiàng)目吧举畸！”
“mylearn項(xiàng)目？哦凳枝！我想起來了，打開webStorm默認(rèn)顯示的就是我之前創(chuàng)建的mylearn項(xiàng)目０虾恕（小白H5成長之路4中我們說到了創(chuàng)建webStorm的項(xiàng)目）”
“現(xiàn)在我們?cè)谶@里新建一個(gè)文件夾js用來放你的jQuery文件岖瑰！”
“然后去jQuery官網(wǎng)下載最新版的jQuery，下載好以后把jquery-3.2.1.min.js拷貝到剛剛創(chuàng)建的js文件夾中砂代∠靠簦”
小白熟練的通過搜索引擎搜到了jQuery官網(wǎng)幽纷，然后下載了最新版的jQuery，下載好以后，他把jQuery的文件復(fù)制到了js文件夾中盈魁。“朱哥翩迈！搞定了膘流。”
“好的丁屎，現(xiàn)在我們?cè)诰W(wǎng)頁中引入jQuery荠锭，你之前的那個(gè)index頁面還在不？在的話在你之前創(chuàng)建的index.html頁面中引入看看晨川！”
“朱哥证九！js引入也是放到body標(biāo)簽的后面！”
“恩共虑，放到那里吧愧怜！沒問題的！”
“好了妈拌，我引入了拥坛，另外還把頁面做了點(diǎn)小調(diào)整，改了一下title和main里面的內(nèi)容尘分，在引入的jquery下面我還放了一個(gè)script標(biāo)簽渴逻，方便我在那里寫js代碼！”
“干的漂亮音诫！在jQuery里面我們要對(duì)一個(gè)容器進(jìn)行操作惨奕，使用$('選擇器')后會(huì)把找到的容器轉(zhuǎn)換為一個(gè)jquery對(duì)象，成為jquery對(duì)象以后我們就可以使用jquery對(duì)象的方法對(duì)這個(gè)容器進(jìn)行操作了竭钝！比如現(xiàn)在要對(duì)頁面中id為main的div進(jìn)行操作梨撞，我們可以通過$('#main')把id為main的div轉(zhuǎn)換為jquery對(duì)象（注意這里的選擇器跟css選擇器是一樣的雹洗，通過id進(jìn)行選擇就需要在id名前面加上#）。如果你希望改變main里面的html內(nèi)容卧波，可以通過html()方法進(jìn)行設(shè)置时肿，$('#main').html('內(nèi)容變一變哇！')”港粱。
“哇螃成，果然內(nèi)容變了！好神奇安槠骸寸宏！”
“小白，你可以嘗試把script引入jquery和js代碼寫到head里面看看執(zhí)行結(jié)果偿曙！”
小白驚訝的說道：“內(nèi)容沒有發(fā)生改變氮凝，這是為什么呢？”
“這是因?yàn)樵趆ead里面代碼通過選擇器去找id為main的容器的時(shí)候望忆，id為main的容器還沒有放到內(nèi)存中罩阵，所以就找不到了！如果在head里面也想通過選擇器找到這個(gè)容器启摄，你得等到頁面準(zhǔn)備好以后（$(document).ready()）再去找main容器稿壁，因此代碼應(yīng)該改成這樣！”
小白重新改了一下歉备，執(zhí)行以后發(fā)現(xiàn)果然可以更改main里面的html內(nèi)容了常摧。
老朱接著說道：“在頁面中我們可以在三個(gè)位置添加js代碼，一個(gè)是head里面威创，這里的代碼是在頁面加載前執(zhí)行落午；一個(gè)是放到body里面，這樣他就在頁面加載中執(zhí)行肚豺；再一個(gè)是放到body后面溃斋，他就在頁面加載完執(zhí)行！”
“哦吸申！我明白了梗劫！”
“好了，下午我們接著說通過jQuery對(duì)容器的常用操作吧截碴！你先練習(xí)一會(huì)兒”
想學(xué)H5的朋友可以關(guān)注老爐梳侨，您的關(guān)注是我持續(xù)更新《小白H5成長之路》的動(dòng)力！
