jQuery中的DOM操做

一、DOM操做的分類：DOM Core、HTML-DOM和CSS-DOM；

二、DOM Core並不專屬於JavaScript，任何一種支持DOM的編程語言均可以使用它。JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法都是DOM Core的組成部分；

三、使用DOM Core獲取表單對象：

document.getElementsByTagName("form");

四、使用DOM Core獲取某個元素的src屬性：

element.getAttribute("src");

五、HTML-DOM提供了一些更簡明的記號來描述各類HTML元素的屬性；

六、使用HTML-DOM來獲取表單對象的方法：

document.forms

七、使用HTML-DOM獲取某個元素的src屬性：

element.src;

八、HTML-DOM只能用來處理Web文檔；

九、CSS-DOM技術的主要做用是獲取和設置style對象的各類屬性；

十、設置某個元素的style對象的字體顏色的方法：

element.style.color = "red";

十一、查找某個元素節點：

HTML代碼：
<p title="????"></p>
<ul>
   <li title="??">??</li>
   <li title="??">??</li>
   <li title="??">??</li>
</ul>

javascript代碼：
var $li = $("ul li:eq(1)");    //獲取<ul>裏的第二個<li>節點
var li_txt = $li.text();       //獲取第二個<li>元素節點裏的文本內容

十二、查找某個屬性節點：

HTML代碼：
<p title="????"></p>
<ul>
   <li title="??">??</li>
   <li title="??">??</li>
   <li title="??">??</li>
</ul>

javascript代碼：
var $para = $("p");      //獲取<p>節點
var p_txt = $para.attr("title");   //獲取<p>元素節點屬性title

1三、刪除屬性：

HTML代碼：
<p title="????"></p>
<ul>
   <li title="??">??</li>
   <li title="??">??</li>
   <li title="??">??</li>
</ul>

javascript代碼：
$("p").removeAttr("title");     //刪除<p>元素的屬性title

1四、用text()方法對<p>元素進行操做：

<p title="???">??</p>


var p_text = $("p").text();   //獲取<p>元素的文本內容

1五、用val()方法對某元素進行操做：

HTML代碼：
<input type="text" id="address" value="????">
<input type="text" id="address" value="???">
<input type="button" value="??">

javascript代碼：
$(function() {
$("#address").focus(function() {
var txt_value = $(this).val();
if(txt_value == "????") {
$(this).val("");
}
});
$("#address").blur(function() {
var txt_value = $(this).val();
if(txt_value == "") {
$(this).val("????");
}
});

$("#address").focus(function() {
var txt_value = $(this).val();
if(txt_value == "???") {
$(this).val("");
}
});
$("#address").blur(function() {
var txt_value = $(this).val();
if(txt_value == "") {
$(this).val("???");
}
});

})

1六、構建網頁演示val()方法的選中功能：

HTML代碼：
<select id="single">
	<option>選擇1號</option>
	<option>選擇2號</option>
	<option>選擇3號</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
	<option selected="selected">選擇1號</option>
	<option>選擇2號</option>
	<option>選擇3號</option>
	<option>選擇4號</option>
	<option selected="selected">選擇4號</option>
</select>
<input type="checkbox" value="check1">多選1
<input type="checkbox" value="check2">多選2
<input type="checkbox" value="check3">多選3
<input type="checkbox" value="check4">多選4
<input type="radio" value="radio1">單選1
<input type="radio" value="radio2">單選2
<input type="radio" value="radio3">單選3

javascript代碼：
$("#single").val("選擇2號");
$("multiple").val(["選擇2號","選擇3號"]);
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);

1七、遍歷節點：(1)children()方法，用於取得匹配元素的子元素集合；(2)next()方法，用於匹配元素後面緊鄰的同級元素；(3)prev()方法，用於匹配元素前面緊鄰的同級元素；(4)siblings()方法，用於匹配元素先後全部的同級元素；

1八、圖片提示效果：

HTML代碼：
<ul>
		<li><a href="圖片連接" class="tooltip" title="圖片名字"><img src="圖片連接" alt="圖片名字"></a></li>
		<li><a href="圖片連接" class="tooltip" title="圖片名字"><img src="圖片連接" alt="圖片名字"></a></li>
		<li><a href="圖片連接" class="tooltip" title="圖片名字"><img src="圖片連接" alt="圖片名字"></a></li>
		<li><a href="圖片連接" class="tooltip" title="圖片名字"><img src="圖片連接" alt="圖片名字"></a></li>
</ul>

javascript代碼：
$(function() {
			var x = 10;
			var y = 20;
			$("a.tooltip").mouseover(function(e) {
				this.myTitle = this.title;
				this.title = "";
				var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
				var tooltip = "<div id='tooltip>'<img src='"+this.href + "' alt='產品預覽圖'/>" + imgTitle + "</div>";
				$("body").append(tooltip);
				$("#tooltip")
					.css({
						"top": (e.pageY + y) + "px",
						"left": (e.pageX + x) + "px"
					}).show("fast");
			}).mouseout(function() {
				this.title = this.myTitle;
				$("#tooltip").remove();
			}).mousemove(function(e) {
				$("#tooltip")
					.css({
						"top": (e.pageY + y) + "px",
						"left": (e.pageX + x) + "px"
					});
			});
		})

1九、三元運算符：三元運算的結構爲Boolean? 值1 ：值2.它的第一個參數必須爲布爾值；

20、三元運算符也能夠用"if(){   }else{   }"代替，例如：

var imgTitle;
if(this.myTitle) {
   imgTitle = "<br/>" + this.myTitle;
} else {
   imgTitle = "";
}

2一、parent()、parents()與closest()的區別：

parent()：得到集合中每一個匹配元素的父級元素；

parents()：得到集合中每一個匹配元素的祖先元素；

closest()：從元素自己開始，逐級向上級元素匹配，並返回最早匹配的祖先元素；

2二、CSS類：

addClass() - 向被選元素添加一個或多個類，在添加類時，您也能夠選取多個元素，也能夠在 addClass() 方法中規定多個類 removeClass() - 從被選元素刪除一個或多個類 toggleClass() - 對被選元素進行添加/刪除類的切換操做 該方法對被選元素進行添加/刪除類的切換操做