“小白！今天我們開始學(xué)習(xí)怎么使用jQuery，jQuery是一個(gè)非常強(qiáng)大的js框架，在做網(wǎng)頁功能的時(shí)候配合jQuery你會(huì)發(fā)現(xiàn)對網(wǎng)頁上的容器控制變得很簡單，這會(huì)讓你一直保持學(xué)習(xí)的動(dòng)力。所以我準(zhǔn)備讓你先學(xué)習(xí)引入jQuery，然后對容器進(jìn)行一些基礎(chǔ)操作，再配合js的一些知識循序漸進(jìn)的進(jìn)行深入學(xué)習(xí)。好了現(xiàn)在打開你的webStorm的mylearn項(xiàng)目吧！”

“mylearn項(xiàng)目？哦！我想起來了，打開webStorm默認(rèn)顯示的就是我之前創(chuàng)建的mylearn項(xiàng)目?。ㄐ“譎5成長之路4中我們說到了創(chuàng)建webStorm的項(xiàng)目）”

“現(xiàn)在我們在這里新建一個(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)在我們在網(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里面我們要對一個(gè)容器進(jìn)行操作，使用$('選擇器')后會(huì)把找到的容器轉(zhuǎn)換為一個(gè)jquery對象，成為jquery對象以后我們就可以使用jquery對象的方法對這個(gè)容器進(jìn)行操作了！比如現(xiàn)在要對頁面中id為main的div進(jìn)行操作，我們可以通過$('#main')把id為main的div轉(zhuǎn)換為jquery對象（注意這里的選擇器跟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對容器的常用操作吧！你先練習(xí)一會(huì)兒”

想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白H5成長之路》的動(dòng)力！