jQuery核心：DOM操作及属性方法

在jQuery中，对DOM元素进行属性操作，主要是通过以下方法实现的：

// selector 表示具体的选择器

$("selector").val(); // 获取第一个匹配元素的value值(一般用于表单控件)
$("selector").val("Hello"); // 设置所有匹配元素的value值为"Hello"
$("selector").html(); // 获取第一个匹配元素的innerHTML值
$("selector").html("Hello"); // 设置所有匹配元素的innerHTML值为"Hello"
$("selector").text(); // 获取第一个匹配元素的innerText值(jQuery已进行兼容处理)
$("selector").text("Hello"); // 设置所有匹配元素的innerText值为"Hello"
$("selector").attr("class"); // 获取第一个匹配元素class属性
$("selector").attr("class", "code"); // 设置所有匹配元素的class属性为"code"
$("selector").removeAttr("class"); // 移除所有匹配元素的class属性
$("selector").prop("checked"); // 获取第一个匹配元素的checked属性值
$("selector").prop("checked", true); // 设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框)
$("selector").removeProp("className"); // 移除所有匹配元素的className属性

对于val()、html()、text()方法，相信大家都能够理解。
很明显，attr和prop分别是单词attribute和property的缩写，并且它们均表示”属性”的意思。

不过，在jQuery中，attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性。

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };
</script>

在jQuery中，prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)；attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

属性API——操作文档节点、DOM对象的属性。
attr() 设置或返回文档节点的属性。
removeAttr() 移除文档节点的属性。
prop() 设置或返回DOM元素的属性。
removeProp() 移除每个匹配元素的属性。
addClass() 添加CSS类名。
removeClass() 移除CSS类名。
toggleClass() 切换CSS类名(存在就删除，不存在就添加)。
html() 设置或返回元素的html内容(即innerHTML)。
text() 设置或返回元素的文本内容(已过滤掉HTML标签，即IE中的innerText )。
val() 设置或返回元素的值(主要是表单元素的value值)。

内容操作——插入、修改、删除文档节点。
append() 向每个匹配元素内部的末尾位置追加内容。
appendTo() 将所有匹配元素追加到目标元素内部的末尾位置。
prepend() 向每个匹配元素内部的开头位置追加内容。
prependTo() 将所有匹配元素追加到目标元素内部的开头位置。
after() 在每个匹配元素之后插入内容。
before() 在每个匹配元素之前插入内容。
insertAfter() 将所有匹配元素插入到目标元素之后。
insertBefore() 将所有匹配元素插入到目标元素之前。
wrap() 在每个匹配元素外包裹指定的HTML结构。
unwrap() 移除每个匹配元素的父元素的HTML标签。
wrapAll() 将所有匹配元素用单个HTML结构包裹起来
wrapInner() 在每个匹配元素内侧(所有子节点外侧)包裹指定的HTML结构。
replaceWith() 将每个匹配元素替换成指定的HTML内容或DOM元素。
replaceAll() 使用所有匹配的元素替换掉每个目标元素。
empty() 清空每个匹配元素的html内容。
remove() 移除所有的匹配元素，包括它的附加数据和绑定事件。
detach() 移除所有的匹配元素，但在jQuery对象上保留其附加数据和绑定事件。
clone() 克隆所有的匹配元素。

CSS操作——操作文档节点的样式属性。
css() 设置或返回元素的CSS属性。
jQuery.cssHooks 全局属性用于设置或获取jQuery操作CSS属性的钩子。
offset() 获取鼠标相对于当前文档的坐标。
position() 获取当前元素相对于离它最近的拥有定位的祖辈元素的坐标。
scrollTop() 设置或返回当前元素相对于垂直滚动条顶部的偏移
scrollLeft() 设置或返回当前元素相对于水平滚动条最左侧的偏移
height() 设置或返回当前元素的高度值(不包括内边距、边框、外边距)。
width() 设置或返回当前元素的宽度值(不包括内边距、边框、外边距)。
innerHeight() 设置或返回当前元素的内高度(包括内边距)。
innerWidth() 设置或返回当前元素的内宽度(包括内边距)。
outerHeight() 设置或返回当前元素的外高度(包括内边距、边框，以及可选的外边距)。
outerWidth() 设置或返回当前元素的外宽度(包括内边距、边框，以及可选的外边距)。

DOM操作的原则
Get and Set in One 原则

为了更加易于使用，jQuery提供了简洁的DOM操作API，其方法往往是”读写一体”的。也就是说，某个方法既可用于读取操作，也可用于设置操作。如果没有为其传入表示值的参数，则表示获取操作，将返回获取到的数据；如果为其传入了表示值的参数，则表示设置操作，它将设置DOM元素指定属性的值。

// 返回一个匹配id为"username"的元素的jQuery对象
var  uid = $("#username");
// 没有传入value参数，返回第一个匹配元素的value属性值
var value = uid.val();
// 传入了value参数，设置所有匹配元素的value值为"CodePlayer"
uid.val("CodePlayer");

Get first Set all 原则

在学习jQuery的DOM操作时，我们首先应该了解一下”Get first Set all”原则。jQuery对象几乎所有的DOM操作方法都遵守”Get first Set all”原则。简而言之，假设当前jQuery对象匹配多个元素，如果使用jQuery对象的方法来获取数据(“读”数据)，则只会获取第一个匹配元素的数据；如果使用jQuery对象的方法来设置元素数据(“写”数据)，则会对所有匹配元素都进行设置操作。

var $lis = $("ul li"); // 匹配ul元素的所有后代li元素
var className = $lis.attr("class"); // 只获取第一个匹配的li元素的class属性
$lis.attr("class", "codeplayer"); // 将所有匹配的li元素的class属性设为"codeplayer"

详细具体详解可参见中文API。
多多整理方便后期学习。