• HTML属性就是HTML文档中，元素标签内的属性，属性值通常用“”或者‘’括起来。

• DOM属性就是浏览器依据HTML文档生成的DOM树中，各种DOM元素的属性，它的值是jQuery（JavaScript）可以直接操作的值。

大部分的HTML属性与对应的DOM属性是一样的，通常在使用jQuery进行操作时没有什么差异，但还是应该知道他们的区别。

1. “类”的属性名不同。元素的类在HTML中标记为class，而在DOM中为className。虽然jQuery可以帮我们处理名字不一致的问题，但还是应该知道，jQuery实际是在操作DOM元素，因此，要操作元素的类时，建议引用“className”，而不是“class”。如果直接使用JavaScript而不是jQuery，那么必须使用“className”。

2. 部分属性只在DOM中有。例如：nodeName、nodeType等，它们只在DOM中存在，在HTML中则不存在对应的属性。

3. 部分属性值的数据类型不同。例如：checked属性值，在HTML中是一个字符串（“checked”），而在DOM中为一个布尔值（“true”或“false”）。
   

要获取某个属性的值非常简单，可以使用.prop()方法或者.attr()方法，将要获取的属性名作为参数传递给它们即可。这两种方法一般情况下没有太大区别，在特殊情况下会有差异，建议按照如下方法选择使用：

• 如果是DOM标准的属性，就使用.prop()。

• 如果是自定义的属性，就使用.attr()。

HTML代码如下：

<div>
    <input id="ck" type="checkbox" />
    <a href="#" id="one" who="me">clickOne</a>
    <a href="#" id="two" who="me">clickTwo</a>
</div>

对应的JavaScript代码如下：

$(document).ready(function () {
    $('#one').click(function () {
        var message = $(this).attr('id')
                + " ; "
                + $(this).attr('who')
                + " ; "
                + $('#ck').attr('checked');
        alert(message);
        return false;
    });
    $('#two').click(function () {
        var message = $(this).prop('id')
                + " ; "
                + $(this).prop('who')
                + " ; "
                + $('#ck').prop('checked');
        alert(message);
        return false;
    });
});

以上代码中，HTML部分分别定义了一个复选框“ck”，一个链接“one”和一个链接“two”。在JavaScript部分，分别为两个链接各绑定了一个点击事件。当“one”被点击时，使用.attr()方法获取“id”、“who”和“checked”属性的值并用警告框进行显示，其中“who”为自定义的属性；当“two”被点击时，使用.prop()方法获取以上各属性。结果如下：

“one”（使用.attr()）的结果：

“two”（使用.prop()）的结果：

从以上结果可以看出，对于DOM标准的属性，使用.prop()可以确保总是获取正确的值（“checked”的值为“false”），而使用.attr()可能会出错（“checked”的值为“undefined”）。对于自定义的属性（非DOM标准的属性），使用.attr()可以确保总是获取正确的值（“who”的值为“me”），而使用.prop()可能会出错（“who”的值为“undefined”）。

对于表单元素（例如：input、select等），HTML与DOM的对应属性存在明显的差异，属性名称不同甚至属性值的数据类型也不同，因此，要获取表单元素的当前值，不建议使用.attr()和.prop()，而是应当使用.val()方法。

HTML代码如下：

<form>
    <input type="text" value="haha"/>
    <select>
        <option value="a">a</option>
        <option value="b" selected>b</option>
        <option value="c">c</option>
    </select>
    <a href="#">console</a>
</form>

对应的JavaScript代码如下：

$(document).ready(function () {
    $('a').click(function () {
        var inputValue = $('input[type=text]').val();
        var selectValue = $('select').val();
        console.log(inputValue);
        console.log(selectValue);
        return false;
    });
});

以上代码中，当链接a被点击后，会使用.val()方法分别获取文本输入框input的值和选择列表select的值，并在浏览器控制台打印出来，默认情况下的值分别是“haha”和“b”。

要设置元素的属性值同样要使用.attr()、.prop()和.val()方法，但是要传递的参数为一个属性名-值对，或者一个由多个属性名-值对组成的对象。

1、设置一组属性

HTML代码如下：

<input type="text" value="haha" id="input1"/>
<a href="#">change</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    console.log($('input[type=text]').prop('id'));
    $('a').click(function () {
        $('input[type=text]').prop('id', 'input2')
        console.log($('input[type=text]').prop('id'));
        return false;
    });
});

以上代码中，当DOM就绪后，会在浏览器控制台打印文本输入框input的id属性值“input1”。当链接a被点击后，通过使用.prop()函数，将input的id值修改为“input2”，然后在控制台再次打印改变后的id属性值。

2、设置多组属性

HTML代码如下：

<input type="text" value="haha" id="input1" name="inputOne"/>
<a href="#">change</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    console.log($('input[type=text]').prop('id'));
    console.log($('input[type=text]').prop('name'));
    $('a').click(function () {
        $('input[type=text]').prop({'id':'input2','name':'inputTwo'})
        console.log($('input[type=text]').prop('id'));
        console.log($('input[type=text]').prop('name'));
        return false;
    });
});

以上代码与设置一组属性的区别就是，向.prop()方法中传递的不再是一组属性名-值对，而是同时包含了“id”和“name”属性名-值对的对象，这就如同使用.css()方法改变元素的多组样式一样。

3、设置表单控件的值

HTML代码如下：

<form>
    <select>
        <option value="a">a</option>
        <option value="b" selected>b</option>
        <option value="c">c</option>
    </select>
    <a href="#">change</a>
</form>

对应的JavaScript代码如下：

$(document).ready(function () {
    console.log($('select').val());
    $('a').click(function () {
        $('select').val('c');
        console.log($('select').val());
        return false;
    });
});

以上代码中，当点击链接a时，通过.val()方法将选择列表select的值由默认的“b”修改为“c”，可以通过浏览器控制台查看变化情况。