最近忙着各種考試、各種複習,各種上課。。。。後來騰出時間來了還手懶了很多。。。就是說幹IT這行的要是手懶那真做不好,總歸這麼久沒寫,都是因爲我手懶了的原因。。。好吧,現在歸於平靜,繼續學習吧O(∩_∩)O哈哈~
從上面的那幾篇文章中,如果你有一定的js基礎的話,那掌握是沒問題的,而且還可以做出四種的那個小的特效。因爲前面用到了蠻多用jQuery操作DOM,那這一篇就來講下怎麼用jQuery操作DOM。
1,首先是最基本的類似於js中的getElementById來獲取元素:
<div id="div1">this is a div</div>
$(document).ready(function() {
var text = $("#div1");
alert( text.html() );
});
其中text.html()這個方法和js中的innerHTML是一樣的。
另外一種獲取文本的方法是:.text()
這些是最基本的jQuery提供的一些方法,那麼當你使用的時候如果你不熟悉的話最好是多查查手冊,因爲有些東西沒必要說出來,這個就靠你的自學能力了。
2,通過下面的這個實例實現來演示元素的查找、創建、刪除、添加:
<ul>
<li title="蘋果">蘋果</li>
<li title="橘子">橘子</li>
<li title="香蕉">香蕉</li>
<li title="梨子">梨子</li>
</ul>
(1)查找節點
function searchNode() {
var oLi = $("ul li:eq(1)"); //篩選節點(下標從0開始)
var li_text = oLi.text(); //獲取節點文本
var li_title = oLi.attr("title"); //獲取節點屬性(指定爲title屬性)
alert( li_text );
alert( li_title );
}
searchNode();
因爲jQuery中的選擇器是支持層級查找的,那$("ul li")的意思就是找到ul下面的所有的li節點,而li:eq(idx)就是表示在所有的li中找第幾個li,那所有的Li的下標識從0開始的。
(2)創建節點
function createNode() {
var oLi1 = $( '<li title="蜜瓜">蜜瓜</li>' ); //創建節點(帶屬性和文本)
var oLi2 = $( '<li title="番茄">番茄</li>' );
var oLi3 = $( '<li title="梨子">梨子</li>' );
$("ul").append(oLi1).append(oLi2).append(oLi3); //添加節點
}
createNode();
查找節點你要是理解的話,那麼創建節點就很簡單了,只不過方法就變成了append()
(3)刪除節點
function deleteNode() {
var oLi = $("ul li:eq(1)");
var oDelLi = oLi.remove(); //返回被刪除節點的引用
$("ul").append( oDelLi ); //再將其插入,可以實現換位操作
//$("ul").empty(); //清空節點
}
deleteNode();
那麼通過上面的這些就掌握了基本的DOM操作,那需要說明的就是:當通過$('')這種方式創建和.remove()的時候返回的都是當前操作節點的對象,這樣就可以解釋爲什麼可以這麼寫:$("ul").append(oLi1).append(oLi2).append(oLi3);同時也可以說明爲什麼上面刪除節點的時候將返回的值再通過append()來添加的時候可以將刪掉的元素添加到ul的尾部,就是因爲返回的是操作節點的對象。
那清空節點就容易多了,找到對象調用.empty()方法,那麼就將當前節點下所有的子元素清除了,注意這裏是清除子節點,當前操作節點其本身還是在頁面中的。
(4)插入節點
那麼對於節點的插入呢,其實通過實際情況的考慮就會發現其原理所在,首先你要向那個節點中插入一個什麼樣的節點,那就需要兩個對象,一個被插入的節點和一個待插的節點。明白了這一點,那下面的代碼就清晰多了
我們的html代碼如下:
<p>這是開始=========<font id="insertT">這是測試添加節點:</font>========這是結束</p>
這是插入函數:
function insertNode() {
var oP = $("#insertT"); //目標節點
var oB = $("<b>這是插入的節點</b>"); //待插節點
//在之前插入
oP.before( oB );
在之後插入
//oP.after( oB );;
}
insertNode();
那你也可以想象的到了,插入的時候被查節點和待插節點其實是有順序的,那麼這裏就是一個在之前插入,一個在之後插入。
3,最後呢就說下關於設置屬性的一些基本操作:
關於設置元素樣式的操作:
(1)可以用attr("class", "clasName")來設置元素的樣式
(2)可以通過addClass("className")來添加樣式
(3)可以通過removeClass("className")來刪除元素的樣式
(4)可以通過hasClass("className")來確認元素是否具有某一樣式
最後對於attr和addClass的比較:
attr是設置元素的樣式,當元素原本存在樣式的時候則替換掉原來的樣式
addClass是追加樣式,當元素原本存在樣式的時候則再給其追加一個樣式
二者對於原本不存在樣式的元素都是執行設置元素樣式的動作
好,這一篇就寫這麼,DOM操作還有一些東西需要說的,那還是留在下一篇來寫吧。。。
每天說一句:這個月是懷念黃家駒的月份,如果你跟我一樣的喜歡他,喜歡Beyond那請你祝福他在那邊過的好吧,O(∩_∩)O謝謝!