2、jQuery中的DOM操做
Dom操做的分类javascript
通常来讲，Dom操做分为3个方面，即DOM Core、HTML-DOM和CSS-DOM。css
jQuery中的DOM操做html
1、查找节点java
用jQuery在文档树上查找节点很是容易，能够利用前面介绍的jQuery选择器来完成。jquery
一、查找元素节点 利用jQuery选择器数组
<script type="text/javascript">
$(function(){
//获取第二个li元素
var $li=$('ul li:eq(1)');
var li_txt=$li.text();
alert(li_txt);
});
</script>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
二、查找属性节点app
利用jQuery选择器查找到须要的元素以后，就可使用attr()方法来获取它的各类属性的值。attr()方法的参数能够是一个，也能够是两个。当参数是一个时，则是要查询的属性的名字。dom
//获取p元素
var $p=$('p');
var p_title=$p.attr('title'); //获取<p>元素节点的属性title
alert(p_title);
2、建立节点函数
一、建立元素节点：网站
使用jQuery的工厂函数$()来完成。$(html)
var $li_1=$('<li></li>');
var $li_2=$('<li></li>');
//而后将这两个新建的元素插入到文档中，使用jQuery中的append()方法
$('ul').append($li_1);
$('ul').append($li_2);
3、插入节点
动态建立的HTML元素并无实际用处，还须要将建立的元素插入文档中，将新建立的节点插入文档最简单的方法是，让它成为这个文档的某个节点的子节点。
插入节点的方法：
| 方法 | 描述 | 示例 |
| append() | 向每一个匹配的元素内部追加内容 | html: <p>我想说</p> $('p').append('<b>你好</b>'); 结果：<p>我想说<b>你好</b></p> |
| appendTo() | 将全部匹配的元素追加到指定的元素中，实际上，使用该方法是颠倒了常规的$(A).append(B)的操做， | <p>我想说</p> $('<b>你好</b>').appendTo('p') 结果：<p>我想说<b>你好</b></p> |
| prepend() | 向每一个匹配的元素内部前置内容 | <p>我想说</p> $('p').prepend('<b>你好</b>'); 结果：<p><b>你好</b>我想说</p> |
| prependTo() | 将全部匹配的元素前置到指定的元素中 | <p>我想说</p> $('<b>你好</b>').prependTo('p'); 结果：<p><b>你好</b>我想说</p> |
| after() | 在每一个匹配的元素以后插入内容 | <p>我想说：</p> $('p').after('<b>你好</b>'); 结果： <p>我想说：</p><b>你好</b> |
| insertAfter() | 将全部匹配的元素插入到指定元素的后面 | <p>我想说：</p> $('<b>你好</b>').insertAfter('p'); |
| before() | 在每一个匹配的元素以前插入内容 | <p>我想说：</p> $('p').befor('<b>你好</b>'); <b>你好</b><p>我想说:</p> |
| insertBefore() | 将全部匹配的元素插入到指定的元素的前面 | <p>我想说：</p> $('<b>你好</b>').insertBefore('p'); 结果：<b>你好</b><p>我想说:</p> |
示例：
$(function(){
var $li_1=$('<li title="香蕉">香蕉</li>'); //建立第一个<li>元素
var $li_2=$('<li title="雪梨">雪梨</li>');
var $li_3=$('<li title="其余">其余</li>');
//获取<ul>节点
var $ul=$('ul');
//获取ul的第二个li节点
var $two_li=$('ul li:eq(1)');
//将第一个建立的li元素插入到ul的后面
$ul.append($li_1);
//将第二个建立的li元素插入到ul的前面
$ul.prepend($li_2);
//讲第三个建立的li元素插入到获取到的第二个li节点
$li_3.insertAfter($two_li);
});
3、删除节点
jQuery提供了两种删除节点的方法，remove()和empty()
一、remove()方法
做用是从dom中删除全部匹配的元素。当某个节点用remove()方法删除后，该节点所包含的全部后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，所以能够在之后再使用这些元素。
var $li=$('ul li:eq(1)').remove();
$li.appendTo('ul');
//能够简化代码直接使用appendTo()方法，也能够用来移动元素
$('ul li:eq(1)').appendTo('ul');
remove()方法也能够经过传递参数来选择性删除元素,
$('ul li').remove('li[title=菠萝]')
二、empty()方法
empty()方法不是删除节点，而是清空节点，它能清空元素中的全部后代节点。
4、复制节点
复制节点，例如某个购物网站的效果，用户不只能够经过单击商品下方的"选择"按钮购买相应的产品，也能够经过鼠标拖动商品并将其放到购物车中。这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到购物效果。
$('ul li').click(function(){
$(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中。
});
复制节点后，被复制的元素并不具备任何行为，若是须要新元素也具备复制功能，可使用
$(this).clone(true).appendTo("ul");
在clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。
5、替换节点
若是要替换某个节点，jQuery提供了相应的方法，replaceWith()和replaceAll()
replaceWith()：方法的做用是将全部匹配的元素都替换成指定的html或者dom元素。若是在替换前，已经为元素绑定事件，替换后原先绑定的事件将会与替换的元素一块儿消失，须要在新元素上从新绑定事件。
6、包裹节点
一、jQuery提供了wrap()方法：该方法对于须要在文档中插入额外的结构化标记很是有用，并且不会破坏原始文档的语义。
$('strong').wrap('<b></b>');
结果：<b><strong>你最喜欢的水果</strong></b>
二、wrapAll()方法
该方法会将全部匹配的元素用一个元素来包裹。它不一样于wrap()方法，wrap()方法是将全部的元素进行单独的包裹。
html:
<strong>你最喜欢的水果？</strong> <strong>你最喜欢的水果？</strong>
使用wrap()方法：
$('strong').wrap('<b></b>')
结果：
<b><strong>你最喜欢的水果？</strong></b> <b><strong>你最喜欢的水果？</strong></b>
使用wrapAll()方法：
$('strong').wrapAll('<b></b>');
结果：
<b> <strong>你最喜欢的水果？</strong> <strong>你最喜欢的水果？</strong> </b>
三、wrapInner()方法
该方法将每个匹配的元素的子内容(包括文本节点)用其余结构化的标记包裹起来。例如可使用它来包装<strong>标签的子内容，
$('strong').wrapInner('<b></b>');
运行代码后，<strong>标签内的内容被一对<b>标签包裹了。
<strong><b>你最喜欢的水果？</b></strong>
7、属性操做
在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。
一、获取属性和设置属性
var $p=$('p');
var p_title=$p.attr('title');//获取p元素的title属性
p.attr('title','这啥呢');//设置单个属性的值
p.attr({"title":"your title","name":"tst"});
jQuery中不少方法都是同一个函数实现获取和设置的，例如attr()、html()、text()、height()、width()、val()、css()
二、删除属性
使用removeAttr()方法
$('p').removeAttr('title') //删除<p>元素的属性title
8、样式操做
一、获取样式和设置样式
使用attr()方法获取class和设置class。
var p_class=$('p').attr('class');
$('p').attr('class','test');//设置<p>元素的class为test
大多数状况下，它是将原来的class替换为新的class，而不是在原来的基础上追加新的class
二、追加样式：
jQuery提供了专门的addClass()方法来追加样式。
三、移除样式
removeClass()
四、切换样式
jQuery提供了一个toggleClass()方法控制样式上的重复切换
$('p').toggleClass('another');//重复切换类名 another
五、判断是否含有某个样式
hasClass()用来判断，若是有，则返回true，不然返回false
9、设置和获取HTML、文本和值
一、html()方法：
相似于js中的innserHTML属性，能够用来读取或者设置某个元素中的HTML内容。该方法也能够设置HTML代码，
var p_html=$('p').html(); //获取<p>元素的HTML代码
$('p').html('<strong>你好啊？</strong>');
二、text()方法：
相似于js中的InnerText属性，能够用来读取或设置某个元素中的文本内容。
var p_text=$('p').text();//获取<p>元素的文本内容
$('p').text('你最喜欢啥?');
三、val()方法
① 此方法相似于js中的value值，能够用来设置和获取元素的值。不管元素时文本框，下拉列表仍是单选框，它均可以返回元素的值。若是元素为多选，则返回一个包含全部选择的值的数组。
示例：邮箱登录界面，邮箱地址文本框和邮箱密码框内分别有"请输入邮箱地址"和“请输入邮箱密码”的提示。当将鼠标聚焦到邮箱文本框时，文本框内的“请输入邮箱地址”文字将被清空。
//当鼠标获取焦点时
$('#address').focus(function(){
var address_val=$('#address').val(); //获取address地址
if(address_val=='请输入邮箱地址'){
$(this).val("");
}
});
//当鼠标失去焦点时
$('#address').blur(function(){
var address_val=$('#address').val(); //获取address地址
if(address_val==""){
$(this).val("请输入邮箱地址");
}
});
②val()方法不只能设置元素的值，同时也能获取元素的值。另外，val()方法还有另一个用处，就是他能使select、checkbox和radio相应的选项被选中。
jQuery中的val()方法是从最后一个选项往前读取，若是选项的value或text中任意一项符合就会被选中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
.test{
font-weight:bold;
color : red;
}
.add{
font-style:italic;
}
</style>
<script type="text/javascript">
$(function(){
//设置下拉框选择 选择2号
$("input:eq(0)").click(function(){
$("#single").val("选择2号");
});
//设置下拉列表同时选择 2 3项
$("input:eq(1)").click(function(){
$("#multiple").val(["选择2号", "选择3号"]);
});
//设置多选框 多选2
$("input:eq(2)").click(function(){
$(":checkbox").val(["check1"]);
$(":radio").val(["radio1"]);
});
});
</script>
</head>
<body>
<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
</body>
</html>
上面的例子中，可使用val()方法，也可使用attr("selected",true)方法。
10、遍历节点
一、children()方法
该方法用于取得匹配元素的子元素集合。只考虑子元素而不考虑任何后代元素。
var $body=$('body').children(); //获取body下全部的孩子节点。
二、next()方法
该方法用于取得匹配元素后面相邻的同辈元素
var $p1=$("p").next();//取得相邻<p>元素后的同辈元素
三、prev()方法
该方法用于取得匹配元素前面紧邻的同辈元素。
四、siblings()方法
该方法用于取得匹配元素先后全部的同辈元素。
五、closest()
它用来取得最近的匹配元素。首先检查当前元素是否匹配，若是匹配则直接返回元素自己。若是不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。若是什么都没找到则返回一个空的jQuery对象。
除此以外，在jQuery中还有不少遍历节点的方法，例如find()、filter()方法、nextAll()方法、prevAll()方法、parent()方法和parents()方法等。
11、CSS-DOM操做
CSS-DOM就是读取和设置style对象的各类属性。
一、利用css()方法获取元素的样式属性
$("p").css("color"); //获取<p>元素的样式颜色
二、能够直接利用css()方法设置某个元素的单个样式
$("p").css("color","red"); //设置<p>元素的样式颜色为red
与attr()方法同样，css()方法也能够同时设置多个样式属性。
$("p").css({"font-size":"30px","background-color":"#999999"});
在css()方法中，若是属性中带有“-”符号，例如font-size和background-color属性，若是在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如
$("p").css(fontSize:"30px",background-color:"#8888");
若是带上了引号，既能够写成"font-size"，也能够写成"fontSize"，总之建议你们加上引号，养成良好的习惯。
三、对透明度设置，可使用opacity属性，
$("p").css("opacity","0.3");
四、获取元素的高度
能够经过css()方法获取高度，也能够经过height()方法获取元素的高度。
$("p").css("height");
$("p").height();
height()方法也能用来设置元素的高度。
css()方法和Height()方法的区别：
css()方法获取的高度值和样式的设置有关，可能会获得auto，也可能获得10px之类的字符串，而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，而且不带单位。
与height()对应的还有一个width()方法。
此外，在CSS-DOM中，还有如下几个常用的方法：
五、offset()方法
它的做用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
var offset=$("p").offset();
var left=offset.left();
var top=offset.top();
六、position()方法
它的做用是获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()同样，它返回的对象也包括两个属性，top和left。
七、scrollTop()和scrollLeft()方法
这两个方法的做用分别是获取元素的滚动条距离顶端的距离和距左侧的距离。
12、案例研究
一、超连接提示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px;}
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
//取消title属性默认提示，设置x y坐标，解决因为自制的提示与鼠标距离太近而引发的提示问题。
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
//鼠标通过
this.myTitle=this.title;
this.title=""; //设置默认的title属性为""
console.info(e.pageY+":"+e.pageX);
var $html=$("<div id='tooltip'>"+this.myTitle+"</div>"); //建立元素
$html.appendTo("body"); //插入文档中
$("#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"
});
});
});
</script>
</head>
<body>
<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>
</body>
</html>
二、图片提示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="file:///F|/html/jquery/jquery-1.7.2.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px;}
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/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"
});
});
});
</script>
</head>
<body>
<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>
</body>
</html>
- 1. jQuery：基础2---操做DOM
- 2. jQuery中的DOM操做
- 3. JQuery中的DOM操做
- 4. jQuery的DOM操做、
- 5. jquery的DOM操做
- 6. jQuery操做dom
- 7. jquery操做DOM
- 8. jquery DOM操做（一）
- 9. jQuery之DOM操做
- 10. 【jQuery】之DOM操做
- 更多相关文章...
- • Java 中操作 R - R 语言教程
- • Spring中Bean的作用域 - Spring教程
- • C# 中 foreach 遍历的用法
- • Scala 中文乱码解决
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. jQuery：基础2---操做DOM
- 2. jQuery中的DOM操做
- 3. JQuery中的DOM操做
- 4. jQuery的DOM操做、
- 5. jquery的DOM操做
- 6. jQuery操做dom
- 7. jquery操做DOM
- 8. jquery DOM操做（一）
- 9. jQuery之DOM操做
- 10. 【jQuery】之DOM操做