jQuery 的 getter 与 setter

jQuery 对象上最简单、最常见的操作是获取或设置 HTML 属性、CSS 样式、元素内容和位置宽高的值。

获取和设置 HTML 属性

attr() 方法是 jQuery 中用于 HTML 属性的 getter/setter。一个相关的函数是 removeAttr()，用于从所有选中元素中移除某个属性：

$("#form").attr("action");
$("#icon").attr("src", "icon.gif");
// 一次设置4个属性
$("#banner").attr({
    src: "banner.gif",
    alt: "Advertisement",
    width: 720,
    height: 64
});
$("a").attr("target", "_blank");
// 通过回调函数返回值设置属性
$("a").attr("target", function () {
    if (this.host == location.host)
        return "_self";
    else
        return "_blank";
});
$("a").removeAttr("target");

获取和设置 CSS 属性

css() 方法用于元素的 CSS 样式的 getter/setter：

$("h1").css("font-weight");
$("h1").css("fontWeight");
$("h1").css("font-variant", "smallcaps");
$("div").css("border", "solid black 2px");
$("h1").css({
    backgroundColor: "black",
    textColor: "white",
    padding: "10px 2px 4px 20px",
    border: "dotted black 4px"
});
$("h1").css("font-size", function (i, curval) {
    return Math.round(1.25 * parseInt(curval));
});

注：不可以通过 css() 获取复合样式的值，如 border、margin，但可以用于设置复合样式的值。

获取和设置 CSS 类

在 jQuery 中，可以通过 addClass() 和 removeClass() 从选中元素中添加或删除类；toggleClass() 的用途是当元素还没有某些类时，给元素添加这些类，反之，则删除；hasClass() 可用于判断某个类是否存在。

需要注意的是 hasClass() 不如其他三个方法灵活，一次只能接受单个类名作为参数，并且不支持函数参数。而前面提到的 is() 方法倒是很灵活，可以用来做一样的事情。

获取和设置 HTML 表单值

val() 方法可用来设置和获取 HTML 表单元素的 value 属性值，以及复选框、单选框、下拉列表的选中状态。

设置和获取元素内容

text() 和 html() 可用于获取和设置元素的纯文本或 HTML 内容。

获取和设置元素的位置宽高

使用 offset() 可用于获取或设置元素的位置，该方法相对于文档来计算位置值，返回一个带有 left 和 top 属性的对象，用来代表 X 坐标和 Y 坐标：

var elt = $("#sprite");
var position = elt.offset();  // 获取当前位置
position.top += 100;
elt.offset(position);         // 设置新位置
    
// 将所有 h1 元素向右移动
$("h1").offset(function(index, curpos){
    return {left: curpos.left + 25 * index, top: cuspos.top};
});

position() 方法和 offset() 方法类似，不过只能用于返回元素相对于父元素的偏移位置。

关于元素宽高方法有以下三组：

• width() 和 height() 返回元素的宽度和高度，不含内边距和边框。可用于窗口和文档，既是getter 也是 setter。

• innerWidth() 和 innerHeight() 也返回元素的宽度和高度，包含内边距。

• outerWidth() 和 outerHeight() 则用于返回包含内边距和边框的宽度和高度。

与位置尺寸相关的最后一对 jQuery 方法是 scrollTop() 和 scrollLeft()，可用于设置/获取元素的滚动条位置，与其他 setter 不同，这两个方法支持传入函数参数。

获取和设置元素数据

data() 方法可用来设置或获取与文档元素、Document 对象或 Window 对象相关联的数据，这是 jQuery 事件处理程序注册和队列机制的基础。removeData() 可用于从元素中删除数据。