jQuery 中的 DOM 操作

1、DOM操作的分类：DOM Core、HTML-DOM和CSS-DOM；

2、DOM Core并不专属于JavaScript，任何一种支持DOM的编程语言都可以使用它。JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法都是DOM Core的组成部分；

3、使用DOM Core获取表单对象：

document.getElementsByTagName("form");

4、使用DOM Core获取某个元素的src属性：

element.getAttribute("src");

5、HTML-DOM提供了一些更简明的记号来描述各种HTML元素的属性；

6、使用HTML-DOM来获取表单对象的方法：

document.forms

7、使用HTML-DOM获取某个元素的src属性：

element.src;

8、HTML-DOM只能用来处理Web文档；

9、CSS-DOM技术的主要作用是获取和设置style对象的各种属性；

10、设置某个元素的style对象的字体颜色的方法：

element.style.color = "red";

11、查找某个元素节点：

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>元素节点里的文本内容

12、查找某个属性节点：

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

13、删除属性：

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

javascript代码：
$("p").removeAttr("title");     //删除<p>元素的属性title

14、用text()方法对<p>元素进行操作：

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


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

15、用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("???");
}
});

})

16、构建网页演示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"]);

17、遍历节点：(1)children()方法，用于取得匹配元素的子元素集合；(2)next()方法，用于匹配元素后面紧邻的同级元素；(3)prev()方法，用于匹配元素前面紧邻的同级元素；(4)siblings()方法，用于匹配元素前后所有的同级元素；

18、图片提示效果：

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"
					});
			});
		})

19、三元运算符：三元运算的结构为Boolean? 值1 ：值2.它的第一个参数必须为布尔值；

20、三元运算符也可以用"if(){ }else{ }"代替，例如：

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

21、parent()、parents()与closest()的区别：

parent()：获得集合中每个匹配元素的父级元素；

parents()：获得集合中每个匹配元素的祖先元素；

closest()：从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素；

22、CSS类：

addClass() - 向被选元素添加一个或多个类，在添加类时，您也可以选取多个元素，也可以在 addClass() 方法中规定多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
该方法对被选元素进行添加/删除类的切换操作

墨冥

jQuery 中的 DOM 操作