基础DOM和CSS操作
DOM在JavaScript，它是一种文档对象模型。方便开发者对HTML结构元素内容进行展示和修改。在JavaScript中，DOM不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。在jQuery中，已经将最常用的DOM操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。
一.DOM几个基本概念：
1.D表示的是页面文档Document、O表示对象，即一组含有独立特性的数据集合、M表示模型，即页面上的元素节点和文本节点。
2.DOM有三种形式，标准DOM、HTML DOM、CSS DOM，大部分都进行了一系列的封装，在jQuery中并不需要深刻理解它。
3.树形结构用来表示DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部分是文本节点操作。
二．设置元素及内容
通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我们就可以对这些元素进行DOM的操作。那么，最常用的操作就是对元素内容的获取和修改。
html()和text()方法
<body> <div id="box"> <strong>www.xixi.com</strong> </div> </body>
(1)html()获取元素中HTML内容
$(function () { alert($('#box').html()); //获取html内容输出：<strong>www.xixi.com</strong> });
(2)text()获取元素中文本内容
$(function () { alert($('#box').text()); //text获取的是文本，有html会自动被清理输出：www.xixi.com });
(3)html(value)设置元素中HTML内容
$(function () { $('#box').html('<em>www.xi.cc</em>'); //替换HTML内容，会HTML会自动解析输出：www.xi.cc });
(4)text(value)设置原生中文本内容
$(function () { $('#box').text('<em>www.li.cc</em>'); //替换文本内容，有HTML会自动转义输出：<em>www.li.cc</em> });
(5)val()获取表单中的文本内容
如果元素是表单的话，jQuery 提供了val()方法进行获取或设置内部的文本数据
<body> <input type="text" value="西西"/> </body>
获取表单内容西西
$(function () { alert($('input').val()); //输出：西西 });
设置表单内容为诗诗
$(function () { $('input').val('诗诗'); //输出：诗诗 });
如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。
<body> <input type="radio" value="男" /> 男 <input type="radio" value="女" /> 女 <input type="checkbox" value="编程" /> 编程 </body>
把下拉菜单选框默认是选定状态
$(function () { $('input').val(['男','女','编程']); //value值是这些的将被选定 });
三．元素属性操作
除了对元素内容进行设置和获取，通过jQuery也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。
attr()和removeAttr()
<body> <div id="box"> <strong>www.xixi.com</strong> </div> </body>
(1)attr(key)获取某个元素key属性的属性值
$(function () { alert($('#box').attr('id')); //返回：box });
(2)attr(key,value)设置某个元素key属性的属性值
<body> <div id="box"> <strong>www.xixi.com</strong> </div> <div id="box"> <strong>www.xixi.com</strong> </div> </body>
给div里加上title="我是西西"
$(function () { $('div').attr('title','我是西西'); });
(3)attr({key1:value2,key2:value2...})设置某个元素多个key属性的属性值
给div里加上title="西西" class="red" data="123"
$(function () { $('div').attr({ 'title' : '西西', 'class' : 'red', //class不建议用attr来设置，后面有功能更强大和更丰富的方法代替 'data' : '123' }); });
(4)attr(key,function(index,value){})设置某个元素key通过fn来设置
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> <div id="box"> <strong>www.xixi.com</strong> </div> </body>
value得到原来的值，原来没有值的话value没用
$(function () { $('div').attr('title', function (index, value) { return '原来的title是：' + value + '，现在的title是：我是' + (index+1) + '号域名'; }); });
最后改变结果：
<div title="原来的title是：aaa，现在的title是：我是1号域名"> <strong>www.xixi.com</strong> </div> <div id="box" title="原来的title是：undefined，现在的title是：我是2号域名"> <strong>www.xixi.com</strong> </div>
注意：jQuery中很多方法都可以使用 function(){}来返回出字符串，比如 html()、text()、val()和is()、filter()方法。而如果又涉及到多个元素集合的话，还可以传递index参数来获取索引值，并且可以使用第二个参数value(并不是所有方法都适合，有兴趣可以自己逐个尝试)。
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> </body>
追加通过匿名函数赋值，并传递index
$(function () { $('div').html($('div').html() + '<em>www.xixi.com</em>'); //结果：www.xixi.com www.xixi.com });
还可以实现追加内容
$(function () { $('div').html(function (index, value) { return value + '<em>www.xixi.com</em>'; //www.xixi.com www.xixi.com }); });
注意：我们也可以使用attr()来创建id属性，但我们强烈不建议这么做。这样会导致整个页面结构的混乱。当然也可以创建class属性，但后面会有一个语义更好的方法来代替attr()方法，所以也不建议使用。
删除指定的属性，这个方法就不可以使用匿名函数，传递index和value均无效。
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> </body>
删除指定的属性title
$(function () { $('div').removeAttr('title'); //删除指定的属性title });
编译后的结果是(源代码不会被删除)：
<div>
<strong>www.xixi.com</strong>
</div>
四．元素样式操作
元素样式操作包括了直接设置CSS样式、增加CSS类别、类别切换、删除类别这几种操作方法。而在整个jQuery使用频率上来看，CSS样式的操作也是极高的，所以需要重点掌握。
1.CSS操作方法
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> </body>
(1)css(name)获取某个元素行内的CSS样式
获取www.xixi.com样式的颜色
$(function () { alert($('div').css('color')); //rgb(0,0,0) });
(2)css([name1,name2,name3])获取某个元素行内多个CSS样式
在CSS获取上，我们也可以获取多个CSS样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用for in遍历。
获取某个元素行内多个CSS样式
方式一：
$(function () { var box = $('div').css(['color', 'width', 'height']); //得到多个CSS样式的数组对象 for (var i in box) { alert(i + ':' + box[i]); //逐个遍历出来分别输出：color:rgb(0,0,0) width:1166px height:18px } });
方式二：jQuery提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。
遍历原生态对象数组
$(function () { var box = $('div').css(['color', 'width', 'height']); $.each(box, function (attr, value) { alert(attr + ':' + value); //遍历JavaScript原生态的对象数组输出：color:rgb(0,0,0) width:1166px height:18px }); });
使用$.each()可以遍历原生的JavaScript对象数组，如果是jQuery对象的数组怎么使用.each()方法呢？
遍历jQuery对象数组
$(function () { var box = $('div').css(['color', 'width', 'height']); $('div').each(function (index, element) { alert(index + ':' + element); //结果：0:[object HTMLDivElement] }); });
(3)css(name,value)设置某个元素行内的CSS样式
把www.xixi.com设置为红色
$(function () { $('div').css('color','red'); });
(4)css(name,function (index, value))设置某个元素行内的CSS样式
如果想设置某个元素的CSS样式的值，需要计算可以传递一个匿名函数。
将全局的操作包装成局部操作给width原长度为1066减去300
$(function () { $('div').css('width', function (index, value) { //局部操作，很舒服 return parseInt(value) - 300 + 'px'; }) });
最后结果
<div style="width: 866px;">
<strong>www.xixi.com</strong>
</div>
(5)css({name1 : value1, name2 : value2})设置某个元素行内多个CSS样式
传递多个CSS样式的键值对方法
$(function () { //$('div').css('color','red').css('background-color','#ccc'); $('div').css({ 'color' : 'blue', 'background-color' : '#eee', 'width' : '200px', 'height' : '30px' }); });
index.html原页面：
<body> <div> <strong>www.xixi.com</strong> </div> </body>
style.css代码:
.red { color:red; } .bg { background-color:#ccc; } .size { font-size:20px; }
(6)addClass(class)给某个元素添加一个CSS类
直接引用style.css给div添加一个class="red"
$(function () { $('div').addClass('red'); //添加一个CSS类 });
添加结果:
<div class="red">
<strong>www.xixi.com</strong>
</div>
(7)addClass(class1 class2 class3...) 给某个元素添加多个 CSS 类
直接引用style.css给div添加多个class="red bg size"
$(function () { $('div').addClass('red bg size'); //添加多个CSS类 });
添加结果
<div class="red bg size">
<strong>www.xixi.com</strong>
</div>
(8)removeClass(class) 删除某个元素的一个CSS 类
直接引用style.css给div删除class里的bg
$(function () { $('div').addClass('red bg size'); //添加多个CSS类 $('div').removeClass('bg'); //删除一个CSS类 });
删除结果：
<div class="red size">
<strong>www.xixi.com</strong>
</div>
(9)removeClass(class1 class2 class3...)删除某个元素的多个CSS类
直接引用style.css给div删除class里的red和size
$(function () { $('div').addClass('red bg size'); //添加多个CSS类 $('div').removeClass('red size'); });
删除结果：
<div class="bg">
<strong>www.xixi.com</strong>
</div>
(10)toggleClass(class)来回切换默认样式和指定样式
点击www.xixi.com实现默认样式和指定样式的切换
$(function () { $('div').click(function () { $(this).toggleClass('red'); //两个样式之间的切换，默认样式和指定样式的切换 }); });
(11)toggleClass(class1 class2 class3...)多个样式来回切换默认样式和指定样式
点击www.xixi.com实现默认样式和指定样式的切换
$(function () { $('div').click(function () { $(this).toggleClass('red size'); //两个样式之间的切换，默认样式和指定样式的切换 }); });
(12)toggleClass(class, switch) 来回切换样式的时候设置切换频率
$(function () { var count = 0; $('div').click(function () { alert(''); $(this).toggleClass('red size', count++ % 2 == 0); //频率问题 }); });
(13)toggleClass(function () {}) 通过匿名函数设置切换的规则
默认的CSS类切换只能是无样式和指定样式之间的切换，如果想实现样式1和样式2之间的切换还必须自己写一些逻辑。
style.css代码:
.red { color:red; } .green { color:green; } .bg { background-color:#ccc; } .size { font-size:20px; }
实现指定样式绿红切换
$(function () { $('div').click(function () { //这里只是click的局部，而又是toggle的全局 $(this).toggleClass('red'); //一开始切换到样式2 if ($(this).hasClass('red')) { //判断样式2存在后 $(this).removeClass('green'); //删除样式1 } else { $(this).toggleClass('green'); //添加样式1，这里也可以addClass } }); });
另一种写法：
$(function () { $('div').click(function () { $(this).toggleClass(function () { //局部 if ($(this).hasClass('red')) { $(this).removeClass('red'); return 'green'; } else { $(this).removeClass('green'); return 'red'; } }); }); });
(14)toggleClass(function () {}, switch) 在匿名函数设置时也可以设置频率
$(function () { var count = 0; $('div').click(function () { $(this).toggleClass(function () { //局部 if ($(this).hasClass('red')) { $(this).removeClass('red'); return 'green'; } else { $(this).removeClass('green'); return 'red'; } }, count++ % 2 == 0); //出现问题 }); });
(15)toggleClass(function (i, c, s) {}, switch) 在匿名函数设置时传递三个参数
对于.toggleClass()传入匿名函数的方法，还可以传递 index 索引、class类两个参数以及频率布尔值，可以得到当前的索引、class 类名和频率布尔值。
$(function () { var count = 0; $(document).click(function () { $('div').toggleClass(function (index, className, switchBool) { alert(index + ':' + className + ':' + switchBool); //得到当前值 //局部 if ($(this).hasClass('red')) { $(this).removeClass('red'); return 'green'; } else { $(this).removeClass('green'); return 'red'; } }, count++ % 2 == 0); }); });
五．CSS方法
jQuery不但提供了CSS的核心操作方法，比如.css()、.addClass()等。还封装了一些特殊功能的CSS操作方法
1.长度width()方法:
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> </body>
(1)width()获取某个元素的长度
$(function () { alert($('div').width()); //1166 });
(2)width(value) 设置某个元素的长度
$(function () { $('div').width(500); //设置为500px });
(3)width(function (index, width) {})通过匿名函数设置某个元素的长度
$(function () { $('div').width(function (index, width) { return width - 500 + 'px'; //虽然可以不加，会智能添加，但还是建议加上单位，更加清晰。 }); });
2.高度height()方法:
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> </body>
(1)height()获取某个元素的长度
$(function () { alert($('div').height()); // 默认高度是18 });
(2)height(value)设置某个元素的长度
$(function () { $('div').height(500); //设置元素高度，直接传数值，默认加 px });
(3)height(function (index, width) {})通过匿名函数设置某个元素的长度
$(function () { $('div').height(function (index, value) { //index 是索引，value 是原本值 return value - 1; //无须调整类型，直接计算 }); });
内外边距和边框尺寸方法
innerWidth()获取元素宽度，包含内边距padding
innerHeight()获取元素高度，包含内边距padding
outerWidth()获取元素宽度，包含边框border和内边距padding
outerHeight()获取元素高度，包含边框border和内边距padding
outerWidth(ture)同上，且包含外边距
outerHeight(true)同上，且包含外边距
<body> <div title="aaa" style="width:200px;padding:100px"> <strong>www.xixi.com</strong> </div> </body>
当style="width:200px;padding:100px"
$(function () { //padding alert($('div').width()); //200 alert($('div').innerWidth()); //400 alert($('div').outerWidth()); //400 alert($('div').outerWidth(true)); //400 });
~~~~
<body> <div title="aaa" style="width:200px;padding:100px; border:100 solid #ccc;"> <strong>www.xixi.com</strong> </div> </body>
当style="width:200px;padding:100px; border:100 solid #ccc;
$(function () { //padding, border alert($('div').width()); //200 200 alert($('div').innerWidth()); //400 400 alert($('div').outerWidth()); //400 600 alert($('div').outerWidth(true)); //400 600 });
~~~~
<body> <div title="aaa" style="width:200px;padding:100px; border:100 solid #ccc;margin:100px;"> <strong>www.xixi.com</strong> </div> </body>
当style="width:200px;padding:100px; border:100 solid #ccc;margin:100px;"
$(function () { //padding, border, margin alert($('div').width()); //200 200 200 alert($('div').innerWidth()); //400 400 400 alert($('div').outerWidth()); //400 600 600 alert($('div').outerWidth(true)); //400 600 800 });
元素偏移方法
(1)offset()获取某个元素相对于视口的偏移位置
<body> <div title="aaa" style="position:absolute;top:10px;"> <strong>www.xixi.com</strong> </div> </body>
查看div相对于视口的偏移位置是多少
$(function () { alert($('div').offset().top); //10 });
查看<strong></strong>离<div></div>的偏移位置
$(function () { alert($('strong').offset().top); //11 });
(2)position()获取某个元素相对于父元素的偏移位置
<body> <div title="aaa" style="position:relative;"> <strong style="position:absolute;top:1px;">www.xixi.com</strong> </div> </body>
查看<strong></strong>相对的<div></div>的像素
$(function () { alert($('strong').position().top); //1 });
(3)scrollTop()获取垂直滚动条的值
<body> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </body>
查看目前滚动条的位置和上面点的位置
$(function () { alert($(window).scrollTop()); //318像素 });
(4)scrollTop(value)设置垂直滚动条的值
设置滚动条刷新的值是300像素的位置
$(function () { $(window).scrollTop(300); });
(5)scrollLeft() 获取水平滚动条的值
(6)scrollLeft(value) 设置水平滚动条的值
DOM节点操作
DOM中有一个非常重要的功能，就是节点模型，也就是DOM中的“M”。页面中的元素结构就是通过这种节点模型来互相对应着的，只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。
一．创建节点
为了使页面更加智能化，有时我们想动态的在html结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。
$(function () { var box = $('<div id="box">节点</div>'); //创建节点(在内存中)赋值给变量box $('body').append(box); //将节点插入到<body>元素内部 });
结果：
<body>
<div id="box">节点</div>
</body>
二．插入节点
在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢，jQuery提供了其他几个方法来插入节点。
<body> <div>节点</div> </body>
1.内部插入节点方法
(1)append(content)向指定元素内部后面插入节点content
$(function () { $('div').append('<strong>DOM</strong>'); //向div内部插入strong节点DOM });
(2)append(function(index, html) {})使用匿名函数向指定元素内部后面插入节点
$(function () { $('div').append(function (index, html) { //使用匿名函数插入节点，html return '<strong>DOM</strong>' + index + html; //第一个参数index=0第二个参数html传值DOM }); });
(3)appendTo(content)将指定元素移入到指定元素content内部后面
<body> <strong>DOM</strong> <div>节点</div> </body>
将<strong>DOM</strong>放到<div>节点</div>同级节点的后面去
$(function () { $('strong').appendTo('div'); //移入操作，不需要创建节点 });
(3)prepend(content)向指定元素 content 内部的前面插入节点
<body> <div>节点</div> </body>
创建<strong>DOM</strong>插入到<div>节点</div>节点前面
$(function () { $('div').prepend('<strong>DOM</strong>'); /将span移入div内部的前面 });
(4)prepend(function(index, html) {}) 使用匿名函数向指定元素内部的前面插入节点
$(function () { $('div').prepend(function (index, html) { return '<strong>DOM</strong>' + index + html; }); });
结果：DOM0节点节点
(5)prependTo(content)将指定元素移入到指定元素 content内部前面
<body> <div>节点</div> <strong>DOM</strong> </body>
将<strong>DOM</strong>放到<div>节点</div>同级节点的前面去
$(function () { $('strong').prependTo('div'); });
2.外部插入节点方法
<body> <div>节点</div> </body>
(1)after(content)向指定元素的外部后面插入节点content
$(function () { $('div').after('<strong>DOM</strong>'); ////向div的同级节点后面插入span });
结果：
节点
DOM
(2)after(function (index, html) {}) 使用匿名函数向指定元素的外部后面插入节点
$(function () { $('div').after(function (index, html) { return '<strong>DOM</strong>' + index + html; }); });
结果：
节点
DOM0节点
(3)before(content)向指定元素的外部前面插入节点content
$(function () { $('div').before('<strong>DOM</strong>'); //向div的同级节点前面插入span });
结果：
DOM
节点
(4)before(function (index, html) {})使用匿名函数向指定元素的外部前面插入节点
$(function () { $('div').before(function (index, html) { return '<strong>DOM</strong>' + index + html; }); });
结果：
DOM0节点
节点
(5)insertAfter(content)将指定节点移到指定元素content外部的后面
<body> <strong>DOM</strong> <div>节点</div> </body>
将<strong>DOM</strong>移入到<div>节点</div>的后面
$(function () { $('strong').insertAfter('div'); //将span元素移到div元素外部的后面 });
(6)insertBefore(content)将指定节点移到指定元素content
<body> <div>节点</div> <strong>DOM</strong> </body>
将<strong>DOM</strong>移入到<div>节点</div>的前面
$(function () { $('strong').insertBefore('div'); });
三．包裹节点
jQuery提供了一系列方法用于包裹节
<body> <div>节点</div> </body>
1.包裹节点
(1)wrap(html)向指定元素包裹一层html代码
第一种写法：
$(function () { $('div').wrap('<strong class="xi"></strong>'); //在div外层包裹一层strong });
结果：
<strong class="xi"><div>节点</div></strong>
第二种写法：自动转化成双标签把div节点包含在里面
$(function () { $('div').wrap('<strong />'); });
结果：
<strong>
<div>节点</div>
</strong>
第三写法：添加内容
$(function () { $('div').wrap('<strong>西西</strong>'); //包裹的元素可以带内容 });
结果：
<strong>西西
<div>节点</div>
</strong>
第四种：多个节点包裹
$(function () { $('div').wrap('<strong><em></em></strong>'); });
结果：
<strong>
<em>
<div>节点</div>
</em>
</strong>
(2)wrap(element)向指定元素包裹一层DOM对象节点
<body> <strong></strong> <div>节点</div> </body>
方式1：把<strong></strong>获取到包裹到div里面
$(function () { $('div').wrap($('strong').get(0)); });
结果：
<strong></strong>
<strong>
<div>节点</div>
</strong>
方式2：
$(function () { $('div').wrap(document.createElement('strong')); //临时的原生DOM });
(3)wrap(function (index) {})使用匿名函数向指定元素包裹一层自定义内容
$(function () { $('div').wrap(function (index) { return '<strong>' + index + '</strong>' }); });
结果：
<strong>0
<div>节点</div>
</strong>
(4)unwrap() 移除一层指定元素包裹的内容
$(function () { $('div').wrap('<strong><em></em></strong>'); //创建俩层 $('div').unwrap(); //移除一层 });
结果：
<strong>
<div>节点</div>
</strong>
(5)wrapAll(html)用html将所有元素包裹到一起
<body> <div>节点</div> <div>节点</div> </body>
把俩个<div>节点</div>包含在<strong></strong>里
$(function () { $('div').wrapAll('<strong></strong>'); //所有div外面只包一层strong });
结果：
<strong>
<div>节点</div>
<div>节点</div>
</strong>
(6)wrapAll(element)用DOM对象将所有元素包裹在一起
$(function () { $('div').wrapAll(document.createElement('strong')); });
结果：
<strong>
<div>节点</div>
<div>节点</div>
</strong>
(7)wrapInner(html)向指定元素的子内容包裹一层html
$(function () { $('div').wrapInner('<strong></strong>'); ////包裹子元素内容 });
结果：
<body>
<div>
<strong>节点</strong>
</div>
<div>
<strong>节点</strong>
</div>
</body>
(8)wrapInner(element) 向指定元素的子内容包裹一层DOM对象节点
$(function () { $('div').wrapInner(document.createElement('strong')); });
结果：
<body>
<div>
<strong>节点</strong>
</div>
<div>
<strong>节点</strong>
</div>
</body>
(9)wrapInner(function (index) {})用匿名函数向指定元素的子内容包裹一层
$(function () { $('div').wrapInner(function (index) { return '<strong>' + index + '</strong>' }); });
结果：
<body>
<div>
<strong>0节点</strong>
</div>
<div>
<strong>1节点</strong>
</div>
</body>
注意：.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体，分别包含一层外层；后者将所有元素作为一个整体作为一个独立体，只包含一层外层。这两种都是在外层包含，而.wrapInner()在内层包含。
四．节点操作
除了创建、插入和包裹节点，jQuery还提供了一些常规的节点操作方法：复制、替换和删除节点。
<body> <div>节点</div> </body>
复制节点：
$(function () { $('div').click(function () { alert('xixi.com'); //事件处理点击div这个节点弹出xixi.com }); $('div').clone(true).appendTo('body'); //复制一个节点添加到HTML中 });
复制节点后第二个复制出来的节点也可以做到事件处理点击div这个节点弹出xixi.com
注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上true参数的话，这个元素附带的事件处理行为也复制出来。
删除节点：
$(function () { $('div').click(function () { alert('xixi.com'); }); $('div').remove(); //直接删除div元素 });
带参数删除：
<body> <div class="box">节点</div> <div>节点</div> </body>
只删除class="box"的div节点
$(function () { $('div').click(function () { alert('xixi.com'); }); $('div').remove('.box'); });
注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本事也可以带选择符参数的，比如：$('div').remove('#box');只删除 id=box 的 div。
保留事件的删除节点
$(function () { $('div').click(function () { alert('xixi.com'); }); $('div').detach().appendTo('body'); //保留事件行为的删除 });
注意：.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。
清空节点保留div空标签
$(function () { $('div').click(function () { alert('xixi.com'); }); $('div').empty(); });
替换节点把<div>节点</div>节点换成<span>DOM</span>
方式一：
$(function () { $('div').click(function () { alert('xixi.com'); }); $('div').replaceWith('<span>DOM</span>'); //将div替换成span元素 });
方式二：
$(function () { $('div').click(function () { alert('xixi.com'); }); $('<span>DOM</span>').replaceAll('div'); //将div替换成span元素 });
注意：节点被替换后，所包含的事件行为就全部消失了。
