DOM：Document Object Model的缩写，文档对象模型。
DOM操作的分类
- DOM Core(核心)
并不专属JavaScript，任何一种支持DOM的程序设计语言都可以使用它。（例如XML）
举例：JavaScript中getElementById()、getElementsByTagName()等方法。 - HTML-DOM
提供一些简明的记号来描述各种HTML元素的属性。
举例：document.forms、element.src等 - CSS-DOM
获取和设置style对象的各种属性。
举例：element.style.color = “red”;
jQuery中的DOM操作
实例：HTML
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
一、查找节点
- 查找元素节点
var $li = $("ul li:eq(1)"); //获取<ul>里第2个<li>节点
var li_txt = $li.text(); //获取第2个<li>元素节点的文本内容
alert(li_txt); //打印文本内容
- 查找属性节点
使用attr()方法来获取元素的各种属性的值。
var $para = $("p"); //获取<p>节点
var p_txt = $para.attr("title"); //获取<p>元素节点属性title
alert(p_txt); //打印title属性值
二、创建节点
- 创建元素节点
例：创建两个li节点插入ul中。
（1)：创建两个<li>新元素。使用jQuery的工厂函数$()来完成—— $(html)。
（2)：将这两个新元素插入文档中。使用append()等方法。
jQuery代码：
var $li_1 = $("<li></li>"); //创建第1个<li>元素
var $li_2 = $("<li></li>"); //创建第2个<li>元素
$("ul").append($li_1); //添加到<ul>节点中，使之能在网页中显示
$("ul").append($li_2); //可以采用链式写法:$("ul").append($li_1).append($li_2)
- 创建文本节点
为创建的元素节点添加文本内容。
jQuery代码：
var $li_1 = $("<li>香蕉</li>"); // 创建一个<li>元素，包括元素节点和文本节点
//“香蕉”就是创建的文本节点。
var $li_2 = $("<li>雪梨</li>"); // 创建一个<li>元素，包括元素节点和文本节点
//“雪梨”就是创建的文本节点。
var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
$("ul").append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$("ul").append($li_2); // 添加到<ul>节点中，使之能在网页中显示
- 创建属性节点
直接在创建节点时一起创建。
jQuery代码：
var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素
//包括元素节点,文本节点和属性节点
//其中title='香蕉' 就是创建的属性节点
var $li_2 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素
//包括元素节点,文本节点和属性节点
//其中title='雪梨' 就是创建的属性节点
var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 等价于：$parent.append($li_1).append($li_2);
三、插入节点
- append() ： 父节点使用的方法。加到父元素内部的后面的位置。
- appendTo() ：创建的节点使用的方法。
- prepend() ：向每个匹配的元素内部前置内容。父元素的方法，加到父元素内部的前面的位置。
- prependTo() ：创建的节点使用的方法。
- after() ：在每个匹配的元素之后插入内容。已有匹配到的元素方法。放匹配到的元素后面，在匹配到的元素外部。
- insertAfter() ：创建的节点使用的方法。
- before() ：与after相反。
- insertBefore() ：创建的节点使用的方法。
这些方法也可以对原有的DOM元素进行移动。
创建节点并插入的jQuery代码：
var $li_1 = $("<li title='香蕉'>香蕉</li>"); // 创建第一个<li>元素
var $li_2 = $("<li title='雪梨'>雪梨</li>"); // 创建第二个<li>元素
var $li_3 = $("<li title='其它'>其它</li>"); // 创建第三个<li>元素
var $parent = $("ul"); // 获取<ul>节点，即<li>的父节点
var $two_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
$parent.append($li_1); // append方法将创建的第一个<li>元素添加到父元素的最后面
$parent.prepend($li_2); // prepend方法将创建的第二个<li>元素添加到父元素里的最前面
$li_3.insertAfter($two_li); // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
对原有DOM移动的jQuery代码：
var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点
$two_li.insertBefore($one_li); //移动节点
移动前：
移动后：
四、删除节点
- remove()方法
删除所有匹配的元素。
例：$("ul li:eq(1)").remove()
li节点下的文本节点或者span等节点、所有绑定的事件、附加的数据等会一并删除。
可以用一个变量接收被删除的节点，再插到其他地方。
可以传参：
例：$("ul li").remove("li[title!=菠萝]");
- detach()方法
所有绑定的事件、附加的数据等会保留下来。
用变量接收再插入，事件仍会触发。 - empty()方法
清空元素中的所有后代节点。
五、复制节点
clone()方法。
有参数，不传true则被复制的新元素并不具有任何行为。带true则同时复制元素中所绑定的事件。
六、替换节点
- replaceWith()
替换成指定的HTML或者DOM元素。 - replaceAll()。
颠倒replaceWith()操作。
例：
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
// 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
七、包裹节点
- wrap()
在文档中插入额外的结构化标记非常有用，不会破坏原始文档的语义。
例：
$("strong").wrap("<b></b>");
2. wrapAll()
将所有匹配的元素用一个元素包裹。wrap是将所有的元素进行单独的包裹。
3. wrapInner()
将每一个匹配的元素的字内容（包括文本节点）用其他结构化的标记包裹起来。
例：
$("strong").wrapInner("<b></b>");
八、属性操作
- attr()：获取和设置元素属性。
获取：
alert( $("p").attr("title") );
设置（单值）：
$("p").attr("title","选择你最喜欢的水果.");
设置（多值）：
$("p").attr({"title" : "your title" , "name" : "test"});
- removeAttr()：删除元素属性。
$("p").removeAttr("title");
九、样式操作
- 获取样式和设置样式
通过attr()方法获取class和设置class。 - 追加样式
addClass()方法添加类值。 - 移除样式
removeClass()方法。可以一次删除多个class名。 - 切换样式
toggle()方法。代码格式如下：
$toggleBtn.toggle(function(){ //toggle()，交替一组动作
//显示元素 代码③
},function(){
//隐藏元素 代码④
});
toggleClass()方法。
- 判断是否含有某个样式
hasClass()，返回true或者false。
增强可读性，内部实际上调用了is()方法。
十、设置和获取HTML、文本的值
- html()方法
类似innerHTML属性。 - text()方法
类似innerText属性。
text()方法兼容性好 - val()方法
类似value属性
示例：
HTML代码：
<input type="text" id="address" value="请输入邮箱地址"/> <br/><br/>
<input type="text" id="password" value="请输入邮箱密码"/> <br/><br/>
<input type="button" value="登录"/>
jQuery代码：
$(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("请输入邮箱地址");// 如果符合条件，则设置内容
}
})
$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value=="请输入邮箱密码"){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val("请输入邮箱密码");
}
})
});
注意：
- focus()方法相当于JavaScript中的onfocus()方法。获得焦点时触发。
- blur()方法相当于JavaScript中的onblur()方法。失去焦点时触发。
使用defaultValue属性（包含该表单的初始值）改善代码：
$(function(){
$("#address").focus(function(){ // 地址框获得鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==this.defaultValue){
$(this).val(""); // 如果符合条件，则清空文本框内容
}
});
$("#address").blur(function(){ // 地址框失去鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==""){
$(this).val(this.defaultValue);// 如果符合条件，则设置内容
}
})
$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value==this.defaultValue){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val(this.defaultValue);
}
})
});
val()方法的选中功能示例代码：
HTML：
<input type="button" value="设置单选下拉框选中"/>
<input type="button" value="设置多选下拉框选中"/>
<input type="button" value="设置单选框和多选框选中"/>
<br/><br/>
<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">选择5号</option>
</select>
<br/><br/>
<input type="checkbox" value="check1"/> 多选1
<input type="checkbox" value="check2"/> 多选2
<input type="checkbox" value="check3"/> 多选3
<input type="checkbox" value="check4"/> 多选4
<br/>
<input type="radio" value="radio1"/> 单选1
<input type="radio" value="radio2"/> 单选2
<input type="radio" value="radio3"/> 单选3
jQuery代码：
//设置单选下拉框选中
$("input:eq(0)").click(function(){
$("#single").val("选择2号");
});
//设置多选下拉框选中
$("input:eq(1)").click(function(){
$("#multiple").val(["选择2号", "选择3号"]);
});
//设置单选框和多选框选中
$("input:eq(2)").click(function(){
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);
});
十一、遍历节点
- children()方法
获取匹配元素的子元素集合。
children()方法只考虑子元素而不考虑其他后代元素。 - next()方法
获取匹配元素后面紧邻的同辈元素。 - prev()方法
获取匹配元素前面紧邻的同辈元素。 - siblings()方法
获取匹配元素前后所有的同辈元素。 - closest()方法
获取最近的匹配元素。
首先检查当前元素是否匹配，匹配则直接返回元素本身。
不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。
如果什么都没找到则返回一个空的jQuery对象。
例：给点击的目标元素的最近的li元素添加颜色。
jQuery代码：
$(document).bind("click", function (e) {
$(e.target).closest("li").css("color","red");
})
6. parent(),parents()与closest()的区别
parent()：获取集合中每个匹配元素的父级元素。（返回一个）
parents()：获取集合中每个匹配元素的祖先元素。（返回多个）
closest()：获取最近的匹配元素。
十二、CSS-DOM操作
读取和设置style对象的各种属性。
style属性最大不足：
无法通过它提取到外部CSS设置的样式信息。
jQuery：
直接利用css()方法获取元素的样式属性。
可以获取外部。
可以同时设置多个样式属性。
注意：
- 如果值是数字，将会被自动转化为像素值。
- font-size、background-color等值变成驼峰式写法。fontSize、backgroundColor。
- 部分属性替代方法，如：height()、width()等。
关于元素定位的几个常用方法
- offset()方法
获取元素在当前视窗的相对偏移。
返回的对象包括top和left两个属性。
只对可见元素有效。 - position()方法
获取元素相对于最近的一个position样式设置为relative或者absolute的祖父节点的相对偏移。
返回的对象包括top和left两个属性。 - scrollTop()方法和scrollLeft()方法
分别获取元素的滚动条距顶端距离和距左侧距离。
案例研究——某网站的超链接和图片提示效果
1.超链接提示效果
HTML：
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
jQuery代码：
$(function(){
$("a.tooltip").mouseover(function(e){
var tooltip = "<div id='tooltip'>"+ this.title +"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": e.pageY + "px",
"left": e.pageX + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
$("#tooltip").remove(); //移除
});
});
问题：
1.默认自动的也会提示
2.设置x坐标和y坐标的问题，自制提示与鼠标的距离太近，有时候会引起无法提示的问题。
改进的jQuery代码：
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
});
});
新问题：当鼠标在链接上移动时，提示效果并不会跟着鼠标移动。
改正后的jQuery代码：
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
2.图片提示效果
HTML：
<h3>有效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h3>无效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
jQuery代码：
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/><\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
