DOM在整个网页开发中都是很关键的，它是可用于检索网页内任意元素或内容的索引目录。利用DOM提供的接口可以操作页面中的元素，还可以添加、删除以及修改元素的属性、样式、内容等。
1. 操作元素样式
虽然传统的CSS样式表可以实现对元素的修饰，但如果可以任意操作元素现有的样式，或者为元素添加新的样式，Web页面就会变得灵活多变。为此，jQuery提供了一些操作元素样式的方法。
1.1 操作样式属性
1.获取样式属性值
获取样式属性： 把需要获取的样式作为属性名传递到css()方法中，即样式值。
获取多个属性： $(selector).css([‘property1’, ‘property2’…])。
获取单个属性： $(selector).css(‘property’)。
原理：
- 以数组的形式传入css()方法中；
- 返回的结果是对象的属性名和属性值；
<div style="color: red;font-size:50px;font-family:'楷体';">
越努力，越幸运
</div>
<script>
//获取多个属性的值
var obj = $('div').css(['color', 'font-size', 'font-family']);
//在控制台查看obj
console.log(obj);
</script>
2.设置样式属性值
设置样式属性： 把需要设置的样式作为参数值传递到css()方法中，即样式值。
设置多个样式属性： $(selector).css({‘property1’: ‘value’, ‘property2’: ‘value’…})；
设置单个样式属性： $(selector).css(‘property’, ‘value’)；
原理：
- css()方法中传入一个对象，该对象中包含多个键值对；
- 每个键值对都是元素样式属性名以及对应的属性值；
<input id="btn" type="button" value="设置样式">
<div></div>
<script>
$('#btn').click(function () {
$('div').css({ backgroundColor: 'pink',
width: '150px',
height: '150px',
'border-radius': '50%' })
});
</script>
3.通过函数设置样式属性值
函数设置样式属性： 每个样式属性对应的value值还可以替换为函数形式。
<!--语法-->
<script>
//设置单个属性
/*index ——— 元素的索引值从0开始
value ——— 元素样式属性的当前值
newValue ——— 函数的返回值
*/
$(selector).css('property', function (index, value) {
return nweValue;
});
//设置多个属性
$(selector).css({
'property1': function (index, value2) {
return newValue;
},
'property2': function (index, value2) {
return newValue;
}
});
</script>
<!--示例-->
<script>
//将div的宽度修改为原div宽度的2倍。
$('div').css('width',function(index,value){
return parseFloat(value)*2+'px';
});
//将第4个div的宽度修改为原div宽度的2倍
$('div').css('width',function(index,value){
if(index==3){
return parseFloat(value)*2+'px';
}
})
</script>
<input id="btn" type="button" value="设置样式">
<div></div>
<div></div>
<script>
$('div').css({
backgroundColor: 'pink',
width: '100px',
height: '50px',
'border-radius': '50%'
});
//在原有样式的基础上，为div元素新样式
$('#btn').click(function () {
$('div').css({
width: function (index, value) {
return parseFloat(value) * 2;
},
height: function (index, value) {
//为索引值为1的匹配元素设置高度
if (index === 1) {
return parseFloat(value) * 2;
}
}
});
});
</script>
1.2操作元素类
jQuery提供了专门的操作类的方法，包括添加类、移除类、切换类以及判断某个类是否存在等常用的方法。
| 方法 | 描述 |
|---|---|
| addClass() | 将指定的类添加到匹配元素中 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类 |
| toggleClass() | 对设置或移除被选元素的一个或多个类进行切换 |
| hasClass() | 确定是否有匹配的元素被分配了给定类 |
1.addClass()方法
<script>
//添加单个类“c”
$(selector).addClass('c');
//添加多个类c1、c2、c3
$(selector).addClass('c1 c2 c3');
</script>
addClass()方法： 在保留已有的样式上，再去添加新的一些样式。
添加多个类： 使用空格隔开，调用addClass()方法后，元素将具备这三个类定义的样式。
2.removeClass()方法
在网页开发中，有时需要移除一些元素已经存在的类，需要用removeClass()方法 。
removeClass()的参数：
- 是可选的，不传递参数时，会移除当前元素的所有类名。
- 一次移除指定的多个类时，需要使用空格隔开。
<script>
//移除所有类
$(selector).remove();
//移除单个类
$(selector).remove('c1');
//移除多个类
$(selector).remove('c1 c2 c3');
</script>
<div></div>
<script>
var div = $('div');
//添加单个类
div.addClass('c1');
//输出结果：<div class='c1'></div>
console.log(div[0].outerHTML);
//添加多个类
div.addClass('c2 c3');
//输出结果：<div class='c1 c2 c3'></div>
console.log(div[0].outerHTML);
//移除单个类
div.remove('c1');
//输出结果：<div class='c2 c3'></div>
console.log(div[0].outerHTML);
//移除所有类
div.remove();
//输出结果：<div class=''></div>
console.log(div[0].outerHTML);
</script>
注意：
css()方法与addClass()、removeClass()方法虽然都可以改变元素的样式，但适用的场景不同。建议使用addClass()、removeClass()对类进行操作，而css()方法适合CSS样式值不固定的情况。例如，为元素随机生成背景色。
3.toggleClass()方法
toggleClass()方法： 在网页开发中，当用户在多个标签中，选择一个标签时，会增加特定的样式，否则，取消该样式。
- $(selector).toggleClass(‘c’)，参数c表示一个自定义的类。
- 指定元素中若没有c，则添加，否则执行移出操作。
- addClass()和removeClass()方法虽然可以实现，但不够简便。
- 直接对元素的类进行切换。
<div></div>
<script>
/*匹配到的元素对指定的类名进行切换无则加，
否则去掉。outerHTML用于获取元素内的html
内容和文本。
*/
var div = $('div');
//第一次调用
div.toggleClass('c');
//输出结果：<div class='c'></div>
console.log(div[0].outerHTML);
//第二次调用
div.toggleClass('c');
//输出结果：<div class=''></div>
console.log(div[0].outerHTML);
//第三次调用
div.toggleClass('c');
//输出结果：<div class='c'></div>
console.log(div[0].outerHTML);
</script>
toggleClass()方法： 还支持使用第2个参数手动控制类的添加或移除。
参数： 是一个布尔值，若值为true表示添加类，值为false表示移除类。
<script>
//添加类
$(selector).toggleClass('c',true);
//移除类
$(selector).toggleClass('c',false);
//条件返回值
$(selector).toggleClass('c',条件判断);
</script>
<script>
//案例演示：还可以通过条件判断的返回值情况设置
var count=0;
$('div').click(function(){
$(this).toggleClass('c',++count%3 === 0);
});
</script>
扩展：在操作元素类的方法中使用函数
jQuery中用于操作元素类的addClass()、removeClass()、toggleClass()方法，都支持使用函数作为参数，通过函数的返回值来操作元素的类
<script>
//addClass()方法
$('div').addClass(function (index, value) {
console.log('元素的索引：' + index);
console.log('元素原来的class值；' + value);
return 'item-' + index;//将返回值作为要添加的class
});
//removeClass()方法
$('div').removeClass(function (index, value) {
return 'item-' + index;//将返回值作为要移除的class
});
//toggleClass()方法
$('div').toggleClass(function (index, value) {
return 'item-' + index;//将返回值作为要移除的class
});
</script>
<!--示例-->
<style>
.c1 {
color: blue;
}
.c2 {
color: red;
}
.c3 {
color: yellow;
}
</style>
<body>
<div>How</div>
<div>are</div>
<div>you?</div>
<script>
$('div').toggleClass(function (index, value) {
if (index === 0) {
return 'c3';
} else if (index === 1) {
return 'c2';
} else if (index === 2) {
return 'c1';
}
});
</script>
</body>
4.hasClass()方法
在网页开发过程中，有时需要判断元素的某个类是否存在，然后执行某些操作。
语法： $(selector).hasClass(‘c’)；
分析： 必选参数c用于检测该类名是否存在，存在时返回true，否则返回false。
<style>
.c {
color: pink;
}
</style>
<body>
<div>test</div>
<script>
$('div').click(function () {
if ($(this).hasClass('c')) {
$(this).removeClass('c');
} else {
$(this).addClass('c');
}
});
</script>
</body>
1.3操作元素的尺寸
元素尺寸的操作是Web开发中常用的功能之一，例如登录框的拖拽特效、图片的放大等功能。
| 方法 | 描述 |
|---|---|
| width() | 获取或设置元素的宽度 |
| height() | 获取或设置元素的宽度 |
| innerWidth() | 获取元素的宽度(包括内边距) |
| innerHeight() | 获取元素的高度(包括内边距) |
| outerWidth() | 获取元素的宽度(包括内边距和边框) |
| outerHeight() | 获取元素的高度(包括内边距和边框) |
| outerWidth(true) | 获取元素的宽度(包括内边距、边框和外边距) |
| outerHeight(true) | 获取元素的高度(包括内边距、边框和外边距) |
1.操作元素的宽度
width()方法： 包括设置元素的宽度和获取元素的宽度。
<script>
$(selector).width(); //获取宽度
$(selector).width('30px'); //设置宽度
</script>
注意：
在设置宽度时，参数的引号可以省略。但是如果不添加引号，里面传递的只能是数字，不能包含单位，如果包含单位就会出现语法错误。
height()方法： 包括设置元素的高度和获取元素的高度。
<script>
$(selector).height(); //获取高度
$(selector).height('30px'); //设置高度
</script>
<style>
div {
width: 100px;
height: 100px;
background: darkorange;
border-radius: 25%;
color: aliceblue;
text-align: center;
padding: 10px;
line-height: 25px;
}
</style>
<body>
<input type="button" value="按钮">
<div>只要努力，人生的长度和宽度都可以改变</div>
<script>
//使用width()方法和height()方法在原div元素宽高的基础上增加了50像素。
$('input').click(function () {
$('div').width($('div').width() + 50);
$('div').height($('div').height() + 50);
});
</script>
</body>
2.获取元素的内部宽度和高度
jQuery中innerWidth()和innerHeight()方法也是用于获取元素的宽度和高度。
与width()方法和height()方法不同的是： 这两个方法包括元素的内边距。
需要注意：width()和height()不传递参数时，表示获取元素宽度和高度；传递参数时设置值，参数的引号可以省略，如果省略只能传递数字不能包含单位，否则会出现语法错误。
3.获取元素外部的宽度和高度
outerWidth()和outerHeight()方法也可获取元素的宽度和高度。
与width()方法和height()方法不同的是：
- 只是除了元素本身的宽高值，还包括内边距和边框值。
- 若在调用方法时传递参数true，获取到的结果中还会包含元素的外边距。
<style>
body {
border: 1px solid #ccc;
}
div {
width: 100px;
height: 100px;
background: red;
padding: 10px;
border: 5px solid pink;
margin: 20px;
}
</style>
<body>
<input type="button" value="获取元素的高度">
<div>人人都是主角，过着属于自己楚门的世界</div>
<script>
$('input').click(function () {
console.log($('div').width());
console.log($('div').height());
console.log($('div').innerWidth());
console.log($('div').innerHeight());
console.log($('div').outerWidth());
console.log($('div').outerHeight());
console.log($('div').outerWidth(true));
console.log($('div').outerHeight(true));
});
</script>
</body>
div元素的外边距margin： 上下左右都是20像素。
带有参数true的outerWidth()方法和outerHeight()方法：
- 与不带有参数的这两个方法取得的外部元素宽高值，相差了40像素；
- 这40像素就是div元素的外边距。
1.4.操作元素的位置
jQuery提供了专门的操作元素位置的方法，可以操作元素在页面中的位置以及相对滚动条的位置等，包括offset()、position()、scrollLeft()等方法。
| 方法 | 描述 |
|---|---|
| offset() | 获取匹配元素的第一个元素的坐标位置，或设置每个元素的坐标 |
| offsetParent() | 获取距离匹配元素最近的含有定位信息的元素 |
| position() | 获取匹配元素相对父元素的偏移 |
| scrollLeft() | 获取或设置匹配元素相对滚动条左侧的偏移 |
| scrollTop() | 获取或设置匹配元素相对滚动条顶部的偏移 |
1.offset()方法
offset()可以获取匹配元素的第一个元素的坐标位置。若元素的样式属性display设置为none，则获取到的值为0.
语法：
$(selector).offset();
获取和设置div元素的位置：
<style>
div {
width: 200px;
height: 100px;
background: blue;
}
</style>
<body>
<div></div>
<script>
//获取div的top和left值
console.log($('div').offset());
console.log($('div').offset().left);
console.log($('div').offset().top);
//设置div的left和top值
//向下移动100像素并向右移动200像素
$('div').offset({ left: 200, top: 100 });
//向右移动200像素
$('div').offset({ left: 200 });
//再次获取div的top和left值
console.log($('div').offset().left);
console.log($('div').offset().top);
</script>
</body>
2.offsetParent()方法
offsetParent()方法回距指定元素最近的“被定位”的祖辈元素对象。“被定位”是指元素的样式属性中position属性的值为relative、absolute或fixed，不包括position属性的默认值static。
语法：
$(selector).offsetparent()；
<body>
<button>设置背景颜色</button>
<div style="border:1px solid black;
width:70%;
position:absolute;
left:10px;
top:50px">
<div style="border:1px solid black;
margin:50px;
background-color:yellow">
<p>点击按钮这一段的设置第一个定位的父元素的背景颜色。</p>
</div>
</div>
<script>
$('button').click(
function () {
$('p').offsetParent().css('backgroundColor', 'green')
}
)
</script>
</body>
3.scrollLeft()和scrolTop()方法
scrollLeft()和scrolTop()方法可以获取或者设置指定元素相对滚动条左侧和顶部的偏移值。
//获取元素相对左侧的偏移值
$(selector).scrollLeft();
//获取元素相对顶部的偏移值
$(selector).scrollTop();
<style>
div {
background: green;
border: 3px solid #999;
width: 200px;
height: 100px;
overflow: auto;
}
p {
background: pink;
margin: 10px;
width: 1000px;
height: 1000px;
}
</style>
<body>
<input type="button" value="按钮">
<div>
<p>行动好过语言</p>
</div>
<script>
$('input').click(function () {
$('div').scrollLeft(500);
$('div').scrollTop(50);
});
</script>
</body>
2.操作元素属性
元素属性是指当前元素节点的属性，
常用的元素属性：
- 有id、value、type；
- 以及用于标识元素状态的checked、disabled等；
2.1 获取和设置元素的属性值
1.获取元素属性值
获取元素属性值： 即把需要获取的属性名传递到attr()方法中。
语法：
$(selector).attr('property')
语法分析：
- property可以是元素的样式属性，如style等；
- 也可以是其他属性，如value等；
- 利用attr()方法可以操作元素的任意属性；
2.设置元素属性值
设置元素属性即通过给元素设置属性名和属性值来改变元素。
设置多个属性：
$(selector).attr({‘property1’: ‘value1’,
‘property2’: ‘value2’,
……
})；
设置单个属性：
$(selector).attr('property', 'value');
语法分析：
- property表示属性的名称；
- value表示属性的值；
- 具体用法和前面学习的css()方法相似；
<!--attr()方法设置和获取元素的属性的使用。-->
<body>
<input type="button" value="按钮一" class="btn1">
<input type="button" value="按钮二" class="btn2">
<script>
$('.btn1').click(function () {
console.log($('.btn2').attr('type'));
$('.btn2').attr('type', 'checkbox');
})
</script>
</body>
<!--
将class值等于btn2的type属性设置为text；
将value属性的默认值设置为“我是文本框”
-->
<body>
<input type="button" value="按钮一" class="btn1">
<input type="button" value="按钮二" class="btn2">
<script>
$('.btn1').click(function () {
$('.btn2').attr({ 'type': 'text', 'value': '我是文本框' });
})
</script>
</body>
2.2 设置元素的状态属性
jQuery中attr()方法的参数为元素状态属性时，可以用于设置元素状态；
举例： 复选框是否选中的状态，文本框或者提交按钮的启用与禁用状态等。
| 属性 | 描述 |
|---|---|
| checked | 获取或设置表单元素的选中状态 |
| disabled | 获取或设置表单元素的禁用状态 |
| selected | 获取或设置下拉框的选中状态 |
<body>
<!--
第1个没有定义checked属性，默认未选中；
其余两个默认都是选中的状态；
-->
<input type="checkbox">
<input type="checkbox" checked="">
<input type="checkbox" checked="checked">
<script>
//获取表单元素的选中状态
/* 第1个input控件会返回undefined，
其余两个input控件则返回checked。
*/
$('input:eq(0)').attr('checked');
$('input:eq(1)').attr('checked');
$('input:eq(2)').attr('checked');
//设置表单元素的选中状态
/* 无论将checked属性设置值为checked还是true，
都可以设置元素为选中状态。
*/
$('input').attr('checked', 'checked');
$('input').attr('checked', 'true');
</script>
</body>
3.操作元素内容
jQuery中还提供了一些方法，可以操作元素内容。
举例： 设置或者返回元素的文本值、表单的字段值等。
3.1 获取和设置元素的HTML内容和文本
html()和text()方法都可以用来为元素设置文本内容。
区别： html()方法操作的元素内容包含标签，text()方法操作的内容不含标签。
| 方法 | 参数 | 返回值 |
|---|---|---|
| html() | 无参数 | 用于获取元素的HTML内容 |
| 字符串 | 用于设置元素的HTML内容 | |
| text() | 无参数 | 用于获取元素的文本内容 |
| 字符串 | 用于设置元素的文本内容 |
<body>
<!-- 分别使用html()方法和text()方法为p元素设置文本内容。 -->
<p id="p1"></p>
<p id="p2"></p>
<hr>
<p id="p3"></p>
<p id="p4"></p>
<script>
//没有带元素
$("#p1").html('hello world!');
$('#p2').text('hello world!');
//带元素
$("#p3").html('<h3>hello world!</h3>');
$('#p4').text('<h3>hello world!</h3>');
</script>
</body>
3.2获取和设置表单的值
val()方法：
- 可以获取和设置表单元素的值；
- 相当于JavaScript中input控件对象value属性的作用；
- value表示表单元素的value属性的值，selector一般是指表单元素。
//获取表单元素的值
$(selector).val();
//设置表单元素的值
$(selector).val(value);
<body>
<input type="text" class="txt">
<input type="button" value="按钮" class="btn">
<div></div>
<br>
<hr><br>
<input type="text" class="txt1">
<input type="button" value="按钮" class="btn1">
<div></div>
<script>
//text()方法
$('.btn').click(function () {
$('div:eq(0)').text($('.txt').val());
$('.txt').val('');
})
//html()方法
$('.btn1').click(function () {
$('div:eq(1)').html($('.txt1').val());
$('.txt1').val('');
})
</script>
</body>
4 操作DOM节点
如果需要更灵活的操作网页上的动态效果很多时候需要直接操作DOM节点。
比如： 如在网页中的某个位置动态添加a链接。
4.1创建节点
jQuery提供了动态创建节点的方法，创建节点后返回jQuery对象。
1. $()函数
$()函数在jQuery中有很多作用。$()实际可以成为工厂函数，通过此函数可以返回选择器对象，能够产生对象。
语法：
$(‘HTML代码’);
举例：
- 将DOM对象转换成为jQuery对象；
- 将HTML代码转换成DOM对象，并将其包装成jQuery对象；
//例如：将obj对象传入append()方法中，便可以在DOM中插入节点。
var p =$('<p>这是一个段落</p>');
$('body').append(p);
2. html()方法
html()方法可用来设置或返回所选元素的HTML内容。
html(‘HTML代码’) ： 可以在DOM中动态创建节点。
其作用： 与JavaScript中的 innerHTML属性类似。
语法：
$(selector).html('HTML代码');
//示例
$('body').html('<p>这是一个段落</p>');
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
}
</style>
<body>
<!-- 案例演示：jQuery中创建节点的两种方式$()函数和html()方法。 -->
<input id="btn" type="button" value="创建节点">
<div id="dv"></div>
<script>
$('#btn').click(function () {
$('#dv').html('<a href="#">腾讯</a><br/>');
var aObj = $('<a href="#">阿里</a><br/>');
$('#dv').append(aObj);
});
</script>
</body>
4. 2 插入节点
jQuery提供了一些方法用于将创建好的节点插入到DOM的不同位置。
例如： 前面用过的append()方法。
| 方法 | 描述 |
|---|---|
| append(ele) | 用于在匹配元素的最后一个子元素后插入ele，插入ele作为匹配元素的最后一个子元素 |
| prepend(ele) | 用于在匹配元素的第一个子元素前面插入ele，插入的ele作为匹配元素的第一个子元素 |
| appendTo(ele) | 将匹配元素插入到ele中，该匹配元素作为ele的最后一个子元素 |
| prependTo(ele) | 将匹配元素插入到ele中，该匹配元素作为ele的第一个子元素 |
| before(ele) | 在匹配元素前面插入ele元素 |
| insertBefore(ele) | 将匹配元素插入到ele之前 |
| after(ele) | 在匹配元素后面插入ele元素 |
| insertAfter(ele) | 将匹配元素插入到ele之后 |
<!--HTML代码-->
<nav>
<ul>
<li>序列号1</li>
<li>序列号2</li>
<li>序列号3</li>
</ul>
</nav>
1.append()和appendTo()方法
-
append()和appendTo()方法区别在于这两个方法的调用对象不同
-
不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
//append()方法
var $p ='<p>插入的节点</p>';
//将新创建的p节点插入到nav容器的内部底部
$('nav').append($p);
//appendTo()方法
var $p ='<p>插入的节点</p>';
//将新创建的p节点插入到nav容器的内部底部
$($p).appendTo('nav');
<!--append()和appendTo()方法运行结果-->
<nav>
<ul>
<li>序列号1</li>
<li>序列号2</li>
<li>序列号3</li>
</ul>
<p>插入的节点</p>
</nav>
2.prepend()和prependTo()方法
- prepend()和prependTo()方法区别在于这两个方法的调用对象不同
//prepend()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到nav容器的内部顶部
$('nav').prepend($p);
//prependTo()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到nav容器的内部顶部
$($p).prependTo('nav');
<!--prepend()和prependTo()方法运行结果-->
<nav>
<p>插入的节点</p>
<ul>
<li>序列号1</li>
<li>序列号2</li>
<li>序列号3</li>
</ul>
</nav>
3.after()和insertAfter()方法
- after()和insertAfter()方法区别在于这两个方法的调用对象不同
//after()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到ul元素之后
$('ul').after($p);
//insertAfter()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到ul元素之后
$($p).insertAfter('ul');
<!--after()和insertAfter()方法运行结果-->
<nav>
<ul>
<li>序列号1</li>
<li>序列号2</li>
<li>序列号3</li>
</ul>
<p>插入的节点</p>
</nav>
4.before()和insertBefore()方法
- before()和insertBefore()区别在于这两个方法的调用对象不同
//before()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到ul元素之前
$('ul').before($p);
//insertBefore()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到ul元素之前
$($p).insertBefore('ul');
<!--before()和insertBefore()方法运行结果-->
<nav>
<p>插入的节点</p>
<ul>
<li>序列号1</li>
<li>序列号2</li>
<li>序列号3</li>
</ul>
</nav>
4.3 删除节点
在网页开发中，有时需要动态的删除某个节点。
1.remove()方法
| 方法 | 描述 |
|---|---|
| remove() | 从DOM中删除所有匹配的元素 |
| detach() | 从DOM中删除所有匹配的元素 |
| empty() | 删除匹配的元素集合中所有的子节点 |
remove()方法: 待删除元素对象调用remove()方法即可完成删除操作。
语法：
$('p').remove();
语法分析：
- $(‘p’)用于获取待删除的元素对象。
- 只会从DOM中移除匹配到的元素，但该元素还存在于jQuery对象中。
注意：
jQuery对象中不会保留元素的jQuery 数据。例如，被删除的p元素如果绑定了事件或有附加的数据等都会被移除。
2.detach()方法
detach()方法： detach()方法的使用方式与remove()基本相同。
区别：
- detach()方法不仅会保留jQuery对象中的匹配元素；
- 还会保留该元素所有绑定的事件以及附加的数据。
var obj =$(selector).detach(); //删除元素节点
$(obj).appendTo(selector); //恢复元素节点
<button id="btn1">删除段落</button>
<button id="btn2">恢复段落</button>
<p>今天天气不错！</p>
<script>
$('#btn1').click(function () {
$p = $('p').detach();
});
$('#btn2').click(function () {
$($p).appendTo('body')
})
</script>
3.empty()方法
empty()方法： 清空元素中的所有后代节点。
与remove()和detach()方法不同： empty()方法并不是删除节点。
//清除div元素中的所有内容
$('div').empty();
<!--html页面-->
<ul id="ul1">
<li><span>序列号1</span></li>
<li><span>序列号2</span></li>
<li><span>序列号3</span></li>
</ul>
<ul id="ul2">
<li><span>序列号1</span></li>
<li><span>序列号2</span></li>
<li><span>序列号3</span></li>
</ul>
//删除序列号2列表项
$('#ul1 li:eq(1)').remove();
//删除序列号3列表项的内容
$('#ul2 li:eq(1)').empty();
4.4 复制节点
jQuery提供一个clone()方法，专门用于处理DOM节点的复制。
语法：
$(selector).clone();
语法分析：
- 参数selector可以是选择器或HTML内容；
- 调用clone()方法后会生成一个被选元素的副本；
- 该副本需要利用插入节点的方法才能显示到DOM中；
<style>
div {
width: 300px;
height: 100px;
background-color: palegoldenrod;
margin-top: 20px;
}
</style>
<body>
<input type="button" value="复制节点" id="btn">
<div id="dv">
<span>星星之火可以燎原</span>
</div>
<div id="dv1"></div>
<script>
$('#btn').click(function () {
//复制第一个div中的span元素生成副本
var spanObj = $('#dv>span').clone();
//设置副本的样式
spanObj.css('fontSize', '30px');
$('#dv1').append(spanObj);
})
</script>
</body>
4.5 替换节点
replaceWith()和replaceAll()方法： 替换元素或元素中的内容
其区别： 在于调用方法的对象以及参数设置的不同。
语法分析：
- content可以是DOM元素对象或HTML内容。
$(selector).replaceWith(content); //replaceWith()语法
$(content).replaceAll(selector); //replaceAll()语法
例如： 将p元素替换为span元素。
分析：
- replaceWith()方法的调用对象是待替换的元素对象。
- replaceAll()方法的使用正好与之相反。
$('p').replaceWith('<span>替换喽</span>');//实现方式一
$('<span>替换喽</span>').replaceAll('p');//实现方式二
<style>
div {
width: 200px;
height: 50px;
background-color: palegoldenrod;
margin-top: 20px;
}
</style>
<body>
<input type="button" value="替代元素" id="btn">
<div id="dv">没有永远的朋友</div>
<div id="dv1">只有永恒的利益</div>
<script>
$('#btn').click(function(){
$('#dv').replaceWith('<div>世界之所以美好</div>');
$('<div>主要原因是有着团结奋斗的热血青年</div>').replaceAll('#dv1');
});
</script>
</body>
4.6 包裹节点
包裹节点是指在某个元素的外层添加父元素，将其“包裹”起来。
<!--HTML页面-->
<ul>
<li>成都</li>
<li>乐山</li>
<li>宜宾</li>
</ul>
1.wrap()方法
wrap()方法用于为每个匹配到的元素添加父元素，将匹配元素包裹在其中。
语法：
$(selector).wrap(wrapper);
语法分析： 参数wrapper表示包裹元素的结构化标记。
$('li').wrap('<strong></strong>');
<!--wrap()方法运行结果-->
<ul>
<strong><li>成都</li></strong>
<strong><li>乐山</li></strong>
<strong><li>宜宾</li></strong>
</ul>
2.wrapAll()方法
wrapAll()方法： 将所有匹配元素一起包裹起来。
语法：
$(selector).wrapAll(wrapper);
语法分析： 参数wrapper表示包裹元素的结构化标记。
$('li').wrapAll('<strong></strong>');
<!--wrapAll()方法运行结果-->
<ul>
<strong>
<li>成都</li>
<li>乐山</li>
<li>宜宾</li>
</strong>
</ul>
3.wrapInner()方法
wrapInner()方法： 为匹配元素添加子元素并且包裹匹配元素中的所有内容。
语法：
$(selector).wrapInner(wrapper);
语法分析： 参数wrapper表示包裹元素的结构化标记。
$('li').wrapInner('<strong></strong>')
<!--wrapInner()方法运行结果-->
<ul>
<li><strong>成都</strong></li>
<li><strong>乐山</strong></li>
<li><strong>宜宾</strong></li>
</ul>
4.7遍历节点
在DOM元素操作中，为ul元素下的li元素内容都为添加内容。
代码实现：
$(‘ul li’).text('测试');
代码分析：
-
我们并没有去取得所有li元素然后循环添加；
-
这种实现方式被称为“隐式迭代”。它是通过jQuery内部机制实现的；
-
一般适用于对指定的元素做相同操作的处理；
1.each()方法
在实际开发中，有些需求是“隐式迭代”所不能处理的。
例如： 为ul元素下的奇数行li元素添加内容。
解决方案： 通过jQuery提供的each()方法遍历所有元素，并进行相关的处理。
语法：
$(selector).each(function(index,element){});
语法分析：
- index表示遍历索引，索引默认从0开始；
- element表示当前元素，一般使用this关键字表示当前元素；
<body>
<ul>
<li>刘三</li>
<li>赵四</li>
<li>王小五</li>
</ul>
<script>
//获取第2个li元素中的文本内容
$('li').each(function(index){
if(index == 1){
console.log($(this).text());
}
})
</script>
</body>
<style>
ul li {
width: 60px;
height: 100px;
background-color: green;
list-style-type: none;
float: left;
margin-left: 10px;
}
</style>
<body>
<ul id="uu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script>
//让ul列表中的每个li元素的背景色由浅入深。
$('#uu>li').each(function (index, element) {
//改变每个元素的透明度
$(element).css('opacity', (index + 1) / 10);
})
</script>
</body>
扩展：jQuery链式编程
利用jQuery获取DOM元素以后，可以对该元素对象进行一系列操作，并且所有操作可以通过点号“.”的形式连接在一起形成一句代码，这种类似“链条”的调用方式称之为链式编程。
- “$(‘#pic’).css(‘border’, ‘solid 1px#FF00030’)”代码执行后，会返回当前元素的jQuery对象，这个jQuery对象与$(‘#pic’)返回的结果相同，所以可以直接使用“.”调用attr()方法。
//没有使用链式
$('#pic').css("border",'1px solid red');
$('#pic').attr('alt','myPhoto');
//使用链式
$('#pic').css("border",'1px solid red').attr('alt','myPhoto');
<!--修改div元素下的第4个p元素的内容-->
<body>
<div>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<script>
$('div').find('p').eq(3).html('我的索引值为3的元素')
</script>
</body>
注意：
jQuery之所以可以实现链式编程，就是因为每个函数或方法被调用后返回的都是jQuery对象，在jQuery对象上可以继续调用jQuery方法执行其他操作。但是链式编程的语句不宜过长，否则会造成代码难以阅读的问题。
