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