HTML-使用jQuery操作 DOM
DOM操作分為三類：
- DOM Core：任何一種支援DOM的程式語言都可以使用它，如getElementById()
- HTML-DOM：用於處理HTML文件，如document.forms
- CSS-DOM：用於操作CSS，如element.style.color="green"
注：JavaScript用於對(x)html文件進行操作，它對這三類DOM操作都提供了支援
jQuery對JavaScript中的DOM操作進行了封裝：
jQuery中的DOM操作：
1. 樣式操作
①使用css()為指定的元素設定樣式值或獲取樣式值
語法：
css(name,value) ; 【設定單個屬性】
或
css({name:value, name:value,name:value…}) ; 【同時設定多個屬性】示例：
$(this).css("border","5px solid #f5f5f5");或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"}); 【opacity：設定透明度】②追加樣式
語法：
$(selector).addClass(class);或
$(selector).addClass(class1 class2 … classN);示例：
.text{ padding:10px;} .content {background-color:#FFFF00; } .border {border:1px dashed #333; } $("h2").mouseover(function() { $("p").addClass("content border"); }); 【使用addClass為P新增content和border】
③移除樣式
語法：
$(selector).removeClass("class") ;或
$(selector).removeClass("class1 class2 … classN ") ;示例：
$("h2").mouseout(function() { $("p").removeClass("text content"); });【使用removeClass為P移除content和text】
④切換樣式
toggleClass()：模擬了addClass()與removeClass()實現樣式切換的過程
語法：
$(selector).toggleClass(class) ;
示例：
$("h2").click(function() { $("p").toggleClass("content border"); });
⑤判斷是否含指定的樣式
hasClass( )方法來判斷是否包含指定的樣式
語法：
$(selector). hasClass(class);示例：
$("h2").mouseover(function() {
if(!$("p").hasClass("content ")){ $("p").addClass("content "); } });
【滑鼠移入，判斷p元素是否含有content，不含有就新增content】
$("h2").mouseout(function() {
if($("p").hasClass("content ")) { $("p").removeClass("content "); } });
【滑鼠移出，判斷p元素是否含有content，含有就移除content】2. 內容及Value值操作
①HTML程式碼操作
html()可以對HTML程式碼進行操作，類似於JS中的innerHTML
語法：
$("div.left").html(); 【獲取元素中的html程式碼】或
$("div.left").html("<div class='content'>…</div>"); 【設定元素中的html程式碼】示例：
$("div.left").html("");
【清空需要新增引號，如果html方法括號中不新增任何內容，是獲取html程式碼】②標籤內容操作
text()可以獲取或設定元素的文字內容
語法：
$("div.left").text(); 【獲取元素中的文字內容】或
$("div.left").text("<div class='content'>…</div>"); 【設定元素中的文字內容】示例：
$("div.left"). text ("");
【清空需要新增引號，如果text方法括號中不新增任何內容，是獲取文字內容】注：html( ) 和text( )方法的區別：
③屬性值操作
val()可以獲取或設定元素的value屬性值
語法：
$(this).val(); 【獲取元素的value屬性值】或
$(this).val(value); 【設定元素的value屬性值】
$( this). val ("");
【清空需要新增引號，如果val方法括號中不新增任何內容，是獲取val值】
$(#search). focus ( );
【獲得焦點的事件】
$(#search). blur ( );
【失去焦點的事件】3. 節點操作
①查詢節點（前面章節已講）
使用選擇器來查詢節點
②建立節點元素
工廠函式$()用於獲取或建立節點：
- $(selector)：通過選擇器獲取節點
- $(element)：把DOM節點轉化成jQuery節點
- $(html)：使用HTML字串建立jQuery節點
例如：
var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜歡哪些冬季運動專案？</li>");
var $newNode2=$("<li title='last'>北京申辦冬奧會是再合適不過了！</li>");
【建立含文字與屬性<li>元素節點】③元素內部插入子節點
④元素外部插入同輩節點
⑤刪除節點
jQuery提供了三種刪除節點的方法：
a. remove( )：刪除整個節點：$(selector).remove([expr]);
【remove( )刪除之後不保留原有位置】
b. empty( )：清空節點內容：$(selector).empty( );
【empty( )只刪除內容，但是保留原有位置】
c. detach()：刪除整個節點，保留元素的繫結事件、附加的資料節點屬性操作
⑥替換節點
replaceWith( )和replaceAll( )用於替換某個節點：
示例：
var $newNode1=$("<li>你喜歡哪些冬季運動專案？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");replaceWith( )和replaceAll( )兩者的關係類似於append( )和appendTo( )
⑦複製節點
clone()用於複製某個節點：
語法：
$(selector).clone([includeEvents]) ;includeEvents：引數ture或flase, true複製事件處理，flase時只能複製節點不能複製事件處理
示例：
$(".gameList li:eq(1)").click(function(){ $(this).clone(true).appendTo(".gameList"); })
【複製了第2個li並且複製了事件處理】
$(".gameList li:eq(2)").click(function(){ $(this).clone(false).appendTo(".gameList"); })
【複製了第3個li但是沒有複製事件處理】
4. 屬性操作
①獲取與設定元素屬性
attr()用來獲取與設定元素屬性
語法：
$(selector).attr([name]) ; 【獲取屬性值】或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ; 【設定多個屬性的值】示例：
$(".contain img").attr({width:"200",height:"80"}); 【使用attr方法設定了多個屬性的值】
②刪除元素屬性
removeAttr()用來刪除元素的屬性
語法：
$(selector).removeAttr(name) ;示例：
$(".contain img").removeAttr("alt"); 【刪除元素的alt屬性】5. 節點遍歷
①遍歷子元素
children( )方法可以用來獲取元素的所有子元素
語法：
$(selector).children([expr]);示例：
var $section =$("section").children();
【獲取<section>的子元素，但不包含子元素的子元素】
alert($section.length);
②遍歷同輩元素
jQuery可以獲取緊鄰其後、緊鄰其前和位於該元素前與後的所有同輩元素
示例：
$("li:eq(1)"). next ().addClass("orange"); 【遍歷獲得同輩節點】
$("li:eq(1)"). prev ().addClass("orange");
$("li:eq(1)"). slibings ().addClass("orange");③遍歷前輩元素
jQuery中可以遍歷前輩元素
parent()：獲取元素的父級元素
parents()：元素元素的祖先元素
示例：
$("li:eq(1)").parent().addClass("orange"); 【獲取前輩節點】
$("li:eq(1)").parents().addClass("orange");④其他遍歷方法
a. each( ) ：規定為每個匹配元素規定執行的函式
語法：
$(selector).each(function(index,element)) ;Index：選擇器的位置
Element：當前的元素
示例：
$("img").click(function(){ 【給圖片新增點選事件】
$("li").each(function(){ 【遍歷每一個li元素】
var str=$(this).text()+"<br>"; 【獲取當前li元素中的內容】
$("section").append(str); 【把內容追加到section後面】 }) });
b. end( )：結束當前鏈條中的最近的篩選操作，並將匹配元素集還原為之前的狀態
示例：
$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5"); 【使用鏈式操作，檢索第一個元素，並且把顏色設定成藍色；end()方法將物件還原為呼叫first()之前的狀態，之後的last()方法呼叫的是.gameList li中的元素，而不是呼叫了first()之後的元素】
$(".gameList li:last").css("border","none");
6. CSS-DOM操作
除css()外，還有獲取和設定元素高度、寬度等的樣式操作方法
|
語法 |
功能 |
|
css() |
設定或返回匹配元素的樣式屬性 |
|
height([value]) |
設定或返回匹配元素的高度 |
|
width([value]) |
設定或返回匹配元素的寬度 |
|
offset([value]) |
返回以畫素為單位的top和left座標。僅對可見元素有效 |
|
offsetParent( ) |
返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被設定為relative、absolute或fixed的元素 |
|
position( ) |
返回第一個匹配元素相對於父元素的位置 |
|
scrollLeft([position]) |
引數可選。設定或返回匹配元素相對滾動條左側的偏移 |
|
scrollTop([position]) |
引數可選。設定或返回匹配元素相對滾動條頂 |
