在上一回的学习中，我们认识了很多jQuery选择器，学会了使用选择器来选择DOM元素。那选好了元素之后我们要干啥呢？当然！就是要对元素进行各种操作喽。
操作网页元素，最常见的需求是对它进行取值、赋值、移动和删除操作。特别的，jQuery允许我们使用同一个函数对网页元素进行取值和赋值操作，区别仅在于传参不同。需要注意的是，jQuery有很多的操作函数，并不好记忆，但我们可以根据实际的操作需求来将它们分类，然后当我们在进行某个操作时就可以从中选择最合适的函数。基于此，我们可以将jQuery的元素操作函数分为4类：
- 取值&赋值
- 移动
- 删除
- 其它
1. 取值&赋值
jQuery允许我们使用同一个函数来对元素进行取值和赋值操作，区别仅在于参数不同。如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的text内容）。
例如：.attr()
1）取值
// 取值操作
<!DOCTYPE html>
<html>
<head>
<style>
em { color:blue; font-weight:bold; }
div { color:red; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
The title of the emphasis is:<div></div>
<script>
var title = $("em").attr("title"); //获取title属性的值
$("div").text(title);
</script>
</body>
</html>
2）赋值
// 赋值操作
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />
// 为图片改变alt属性 和 添加title属性
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});
其它常见的取值和赋值函数如下：
| 函数名 | 功能 |
|---|---|
| .attr() | 获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。 |
| .val() | 获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。 |
| .css() | 获取匹配元素集合中的第一个元素的样式属性的值。设置每个匹配元素的一个或多个CSS属性。 |
| .html() | 获取集合中第一个匹配元素的HTML内容。设置每一个匹配元素的html内容。 |
| .text() | 得到匹配元素集合中每个元素的合并文本，包括他们的后代。设置匹配元素集合中每个元素的文本内容为指定的文本内容。 |
| .prop() | 获取匹配的元素集中第一个元素的属性（property）值。为匹配的元素设置一个或多个属性（properties）。 |
| .width() | 为匹配的元素集合中的第一个元素计算宽度值。给每个匹配的元素设置CSS宽度。 |
| .height() | 获取匹配元素集合中的第一个元素的当前高度值。设置每一个匹配元素的高度值。 |
| .offset() | 在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。 设置匹配的元素集合中每一个元素的坐标， 坐标相对于文档。 |
| .scrollLeft() | 获取匹配的元素集合中第一个元素的当前水平滚动条的位置。设置每个匹配元素的水平滚动条位置。 |
| .scrollTop() | 获取匹配的元素集合中第一个元素的当前垂直滚动条的位置。设置每个匹配元素的垂直滚动条位置。 |
| .innerHeight() | 为匹配的元素集合中的第一个元素计算高度值，包括padding，但是不包括border。设置匹配的元素集合中每个元素的高度值。 |
| .innerWidth() | 为匹配的元素集合中的第一个元素计算宽度值，包括padding，但是不包括border。设置匹配的元素集合中每个元素的宽度值。 |
| .outerHeight() | 为匹配的元素集合中的第一个元素计算高度值，包括padding，border和选择性的margin。设置匹配的元素集合中每个元素的高度值。 |
| .outerWidth() | 为匹配的元素集合中的第一个元素计算宽度值，包括padding，border和选择性的margin。设置匹配的元素集合中每个元素的宽度值。 |
2. 移动
jQuery提供两组方法来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。
例如：假定我们要把一个div元素移到p元素的后面，有两种方法。
方法一：使用.insertAfter()把div元素移动p元素后面。
$('div').insertAfter($('p'));
方法二：使用.after()把p元素加到div元素前面。
$('p').after($('div'));
两种方法的效果一样，却有一个重大区别，就是它们返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。
使用这种模式的操作方法总共有四对：
| 函数名 | 功能 |
|---|---|
| .insertAfter() 和 .after() | 在现存元素的外部，从后面插入元素。 |
| .insertBefore() 和 .before() | 在现存元素的外部，从前面插入元素。 |
| .appendTo() 和 .append() | 在现存元素的内部，从后面插入元素 |
| .prependTo() 和 .prepend() | 在现存元素的内部，从前面插入元素 |
3. 删除
| 函数名 | 功能 |
|---|---|
| .remove() | 将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据。） |
| .detach() | 从DOM中去掉所有匹配的元素。（注：保存元素上的所有jQuery数据） |
| .empty() | 从DOM中移除集合中匹配元素的所有子节点。（包括元素里的文本） |
| .removeProp() | 为集合中匹配的元素删除一个属性（property）。 |
| .removeAttr() | 为匹配的元素集合中的每个元素中移除一个属性（attribute）。 |
| .removeClass() | 移除集合中每个匹配元素上一个，多个或全部样式。 |
| .toggleClass() | 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类，即：如果存在（不存在）就删除（添加）一个类。 |
| .unwrap() | 将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。 |
注：.remove()和.detach()的功能是一样的，都是删除匹配元素，区别在于.remove()会同时删除元素上的jQuery数据，而.detach()不删除。
4. 其它
| 函数名 | 功能 |
|---|---|
| .replaceWith() | 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。 |
| .replaceAll() | 用匹配元素集替换每个目标元素。 |
| .clone() | 创建匹配元素集的深层副本 |
| .addClass() | 为每个匹配的元素添加指定的样式类名。 |
| .hasClass() | 确定任何一个匹配元素是否有被给定的（样式）类。 |
| .wrap() | 在每个匹配的元素外层包上一个html结构/元素。 |
| .wrapAll() | 在所有匹配元素外面包一层HTML结构。 |
| .wrapInner() | 在匹配元素里的内容外包一层结构。 |
| .position() | 获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 ) |
按照“取值&赋值”、“移动”、“删除”和“其它”的分类标准将jQuery的操作函数分类后，我们在使用的时候就可以根据实际需求快速地查找到合适的函数。当然，这里列出来的只是一些相对常用的函数，还有很多请参考jQuery官方文档或者jQuery API 中文文档。
码字不易，如果喜欢这篇笔记的话，记得点赞哦！
如果需要转载，也请注明出处：
作者：江江酱酱233
原文链接：https://www.jianshu.com/p/b9e42917e01b
参考：
https://www.jquery123.com/
https://api.jquery.com/
http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html
91
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
