“小白，上午我們學(xué)會引入了jQuery，然后用jQuery改變了一個div的html內(nèi)容，現(xiàn)在我們說一下jQuery常用的選擇器，如果你用好jQuery選擇器，你會發(fā)現(xiàn)改變一個或一組容器的html內(nèi)容是如此的簡單?！?/p>

“在jQuery里面最常用到的是id選擇器，今天上午我們剛用過那個方法，$('#main')就是找到id為main的容器并將它轉(zhuǎn)換為jquery對象，id選擇器需要在id名前面加上#。之前我們也說過這里的選擇器跟css選擇器很像，所以我們還可以通過別的方式進行選擇。比如有這樣一個html頁面”

“我現(xiàn)在希望讓所有class為redline的內(nèi)容變?yōu)椋何业膬?nèi)容改變了。可以這樣來寫$('.redline').html('我的內(nèi)容改變了')，可以看到這里通過類名進行選擇的時候會在類名前面加個點，這跟我們寫css代碼的時候類的寫法是一樣的?！?/p>

“如果我們希望所有的p標(biāo)簽的內(nèi)容變成：‘我是p標(biāo)簽’，可以這樣來寫$('p').html('我是p標(biāo)簽')，怎么樣跟css中對p標(biāo)簽設(shè)定樣式的時候也是一樣的吧！”

“頁面中id為main的div容器中包含了四個子div容器和一個p容器，假如我希望讓main中的所有div內(nèi)容發(fā)生改變可以通過$('#main div').html('我是main里面的div哦！')進行選擇更改。注意在#main和div中間會有一個空格，空格就代表了父子關(guān)系?！?/p>

“還有一種情況，那就是所有class為redline的div容器內(nèi)容發(fā)生改變！這跟剛才的父子關(guān)系又不一樣，我們可以通過$('div.redline').html('我是div，而且我的class名字是redline哦！')，這里的div和.redline中間沒有空格?！?/p>

“怎么樣jquery選擇器很神奇吧！除了我剛說的那幾個選擇的方式，jquery還有一種屬性選擇器，比如我們要找href屬性值為#好的元素，可以這樣來寫：$("[href='#']") 。屬性選擇器你有時間自己做點練習(xí)，我就不多說了！”

“最后給你說一點，我們通過選擇器選擇到的對象很多情況下是一個數(shù)組，如果你不懂什么是數(shù)組可以去自學(xué)一下js的數(shù)組類型，比如$('.redline')就包含了三個容器?！?/p>

“在jQuery里面獲取某個容器的html內(nèi)容，跟修改html內(nèi)容用的是同一個方法，只不過不用傳參數(shù)。比如我們要獲取main的html內(nèi)容，可以用下面的代碼實現(xiàn)：”

“如果獲取類名為redline的html內(nèi)容怎么拿呢？”

小白激動的答道：“$('.redline').html()唄！”

老朱說：“小白你把代碼寫到頁面里面試試，看看控制臺輸出！”

小白失望的說：“怎么只輸出了第一行？”

“小白，我剛跟你說了，如果同時選擇的是多個容器，他們就是一個對象數(shù)組，你剛輸出的只是第一個容器的html內(nèi)容。你再想想辦法！”

“朱哥，我覺得通過選擇器獲取到的那個對象數(shù)組后面通過索引就可以取到，這樣就可以了吧！”

小白輸出以后發(fā)現(xiàn)居然報錯了！

“小白，你的$('.redline')是jquery對象可以使用html方法，但是$('.redline')[0]不是，你需要再次使用$傳入$('.redline')[0]才能轉(zhuǎn)換成jquery對象。你試試看”

“成功了！輸出第二個和第三個類名為redline的html內(nèi)容我也知道怎么寫了！”

“小白，假如你不知道總共有多少個id為redline的容器，怎么辦？既然$('.redline')是一個數(shù)組，我們是不是可以通過length拿到數(shù)組的長度？那通過for循環(huán)是不是可以進行輸出？”

“我試著改一改”

“好了，成功了！感覺今天很有心得啊！for循環(huán)我只是之前看js基礎(chǔ)知識的時候了解了一下，我再鞏固鞏固！”

“好的，明天見！”