方的風(fēng)太大，吹得窗戶咚咚作響，小白自從上午用了jQuery事件后，一直沉浸在鼠標(biāo)控制容器內(nèi)容的練習(xí)里面，周圍無論多大的噪音也干擾不了他。中午太陽很好，低頭族們又來到小白旁邊向陽的窗口扎堆曬太陽。其中一人無意間看到了小白真正擺弄的頁面，感到很好奇，說道：“哇！小白，這是你做的么？”

小白得意的說道：“必須的！”

“小白你真了不起，幾天不見居然都會高科技了！”，“哇！小白，真佩服你，你居然會寫程序！”。。。。。。

正當(dāng)小白沉浸在贊美聲中無法自拔的時候，小白的身旁響起了老朱的聲音：“小白！醒醒！今天哥再告你個好玩的知識！”

“好玩的知識？”，小白眼里放出了驚喜的目光。

“對，通過jQuery可以改變元素的css樣式，這個好玩吧！你用jQuery實現(xiàn)鼠標(biāo)移入移出的功能了吧？讓我看看”

“矮油！不錯哦～！現(xiàn)在咱把鼠標(biāo)以上以后的處理改一下，不要更改它的html內(nèi)容了，變成更改CSS樣式。更改CSS樣式通過css(樣式屬性名,樣式屬性值進(jìn)行更改，比如更改main里面文本的顏色，我們可以這樣寫：$("#main").css("color","#F00");”

“現(xiàn)在執(zhí)行我們看一下效果吧”

“這個效果太棒了，可是鼠標(biāo)移出以后怎么恢復(fù)呢？”

“你在移出的代碼里面增加一個更改文本顏色就可以了！試試看！”

“成功了，是不是所有的樣式都可以更改？”

“那當(dāng)然，不過有個知識點你得了解一下，在css里面很多樣式屬性的默認(rèn)值是none，比如容器main的border屬性設(shè)置為none的效果跟沒給容器設(shè)置border的效果是一樣的。具體哪些css樣式的屬性默認(rèn)值是none，你可以在一個空網(wǎng)頁中寫一個div標(biāo)簽，不要給它設(shè)置任何css樣式，然后通過console.log($('div').css('屬性名'))在控制臺看看它的默認(rèn)值。這個工作你有時間了自己測試一下，我就不多說了，現(xiàn)在你做這樣一個功能，鼠標(biāo)移到main容器上時改變?nèi)萜鞯母叨取⒈尘吧⑿懈摺⑽淖执笮。瞥龊蠡謴?fù)原來的狀態(tài)。”

“好的，我試試！”

二十分鐘后小白找到老朱，“做好了！”

“很好，小白。不過這個方法雖好，可有時需要改變的樣式太多，以至于我們會寫很多行代碼。還有一個方法可以通過添加、刪除class或者直接更改容器的class屬性值進(jìn)行設(shè)置。添加class使用addClass("類名")，刪除class使用removeClass("類名")。我們可以這樣來做！”

“你也可以直接更改div標(biāo)簽上的class屬性值，更改屬性我近期會跟你說怎么做，你現(xiàn)在會這兩種更改樣式的方法就可以了。添加和刪除class會精簡js代碼的行數(shù)，直接更改css樣式的屬性值呢又很方便，在真正使用的時候你要學(xué)會靈活運用。好了你可以自己練習(xí)了～～”

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

：jQuery 對HTML操作

1、jQuery 提供一系列與 DOM 相關(guān)的方法，這使訪問和操作元素和屬性變得很容易

1、獲得內(nèi)容

1、text() - 設(shè)置或返回所選元素的文本內(nèi)容

2、html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）

3、val() - 設(shè)置或返回表單字段的值

4、獲取屬性

2、設(shè)置內(nèi)容和屬性

1、text() - 設(shè)置或返回所選元素的文本內(nèi)容

2、html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）

3、val() - 設(shè)置或返回表單字段的值

4、設(shè)置屬性 - attr()

3、添加元素

1、通過 jQuery，可以很容易地添加新元素/內(nèi)容

2、append() - 在被選元素的結(jié)尾插入內(nèi)容

3、prepend() - 在被選元素的開頭插入內(nèi)容

4、after() - 在被選元素之后插入內(nèi)容

5、before() - 在被選元素之前插入內(nèi)容

4、 刪除元素

1、通過 jQuery，可以很容易地刪除已有的 HTML 元素

2、remove() - 刪除被選元素（及其子元素）

3、empty() - 從被選元素中刪除子元素