每天學點jQuery(五)

最近忙着各種考試、各種複習,各種上課。。。。後來騰出時間來了還手懶了很多。。。就是說幹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謝謝!







發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章