【前端】：property OR attribute

WEBJ2EE

发布于 2020-01-17 15:52:55

1.5K0

发布于 2020-01-17 15:52:55

文章被收录于专栏：WebJ2EEWebJ2EE

目录
1. jQuery.prop OR jQuery.attr
    1.1. jQuery.prop
    1.2. jQuery.attr
2. property OR attribute
3. 操作 radio、checkbox、select
    3.1. radio
    3.2. checkbox
    3.3. select
4. 几道笔试题

1. jQuery.prop OR jQuery.attr

1.1. jQuery.prop

The .prop() method gets the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the matched set has no elements.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.
Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property

示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="jquery-1.12.4.js"></script>
</head>
<body>
  Checkbox: <input type="checkbox" checked="checked" onchange="handleChange()" />

  <script type="text/javascript">
    function handleChange(){
      console.log("prop", $("input").prop("checked"), "|", "attr", $("input").attr("checked"));
    }
</script>
</body>
</html>

jQuery.prop 源码分析（3.4.1）：

1.2. jQuery.attr

The .attr() method gets the attribute value for only the first element in the matched set.

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set.

2. property OR attribute

以下内容节选自

https://share.web-tinker.com/articles/20115.json

Attribute 和 Property 都被翻译成“属性”，但是它们的本质不同。

举个例子

桌子上有个苹果”。Attribute仅仅是描述了这个“有苹果”的事实，而Property则是直指那个桌子上的苹果。这里的苹果是一个实体，用Attribute来描述只能说明这个事件的事实。它无法准确的描述出具体是哪个苹果在桌子上。

这么理解

Attribute 是标记语言的概念，标记语言本身是一种文本，所以 Attribute 这种文本方式描述的性质在标记语言中很容易使用。而Property则是保存在内存（memory）中，而内存会随着程序运行结束被释放，因此变得无法长期储存。在JavaScript中，DOM 对象通常都是多重继承的。同时继承了 HTML 和 JavaScript 的 Object。Object 是完完全全的内存对象，所以使用的是 Property，而 HTML 本身是标记语言所以使用的是 Attribute。当这两个东西被继承到同一个对象上的时候经常会让人混淆起来。由于一些Attribute是很常用的，比如id、class等，所以DOM把它们映射到了Property上以方便使用。这样我们就会遇到一个对象同时具有id这个Attribute和Property（由于class是保留字，所以它被映射到 Property 上时变成了className）。

总结

虽然被DOM这样一搞就变得很乱，但是我们这样理解之后就很简单。只要是HTML标签上设置的属性就是Attribute，而直接在JavaScript中用点运算符操作的DOM对象属性就是Property。还有一些HTML自带的属性，它们同时是Attribute和Property。Attribute的数据类型永远都是字符串，而Property就可以非常丰富。

图2-1：property 与 attribute 间关系

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <input id="name" 
    name="user" 
    class="form-control" 
    value="webj2ee" 
    myAttr="my-attr" 
    data-control="text" />
</body>
</html>

3. 操作 radio、checkbox、select

3.1. radio

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="./jquery-3.4.1.js"></script>
</head>
<body>
  <form name="myform">
    <label for="bachelor">本科</label>
    <input type="radio" id="bachelor" name="degree" value="bachelor"/>

    <label for="master">硕士</label>
    <input type="radio" id="master" name="degree" value="master"/>

    <label for="doctor">博士</label>
    <input type="radio" id="doctor" name="degree" value="doctor"/>
  </form>

  <script type="text/javascript">
    // 选中某值
    $("input[value=master]").prop("checked", true);

    // 获取选中值
    var selected = $("input[name=degree]:checked").val();
    console.log(selected);

    // 删除特定项
    $("input[value=doctor]").remove();

    // 追加项目
    $("form[name=myform]").append(
      "<label for=\"higher\">高中</label>"+
      "<input type=\"radio\" id=\"higher\" name=\"degree\" value=\"higher\"/>"
    );
</script>
</body>
</html>

3.2. checkbox

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="./jquery-3.4.1.js"></script>
</head>
<body>
  <form name="myform">
    <label for="bachelor">本科</label>
    <input type="checkbox" id="bachelor" name="degree" value="bachelor" />

    <label for="master">硕士</label>
    <input type="checkbox" id="master" name="degree" value="master"/>

    <label for="doctor">博士</label>
    <input type="checkbox" id="doctor" name="degree" value="doctor"/>
  </form>

  <script type="text/javascript">
    // 选中某值
    $("input[value=master], input[value=bachelor]").prop("checked", true);

    // 获取选中值
    var selected = [];
    $("input[name=degree]:checked").each(function (index, item) {
      selected.push($(this).val());
      });
    console.log(selected);

    // 追加项目
    $("form[name=myform]").append(
      "<label for=\"higher\">高中</label>"+
      "<input type=\"checkbox\" id=\"higher\" name=\"degree\" value=\"higher\"/>"
    );
</script>
</body>
</html>

3.3. select

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="./jquery-3.4.1.js"></script>
</head>
<body>
  <form name="myform">
    <select name="single">
      <option value="bachelor" selected="selected">本科</option>
      <option value="master">硕士</option>
      <option value="doctor">博士</option>
    </select>

    <select name="multiple" multiple="multiple">
      <option value="bachelor">本科</option>
      <option value="master" selected="selected">硕士</option>
      <option value="doctor" selected="selected">博士</option>
    </select>
  </form>

  <script type="text/javascript">
    // 取值
    var selected = $("select[name=single]").val();
    console.log(selected);

    // 选中某值
    $("select[name=single]").val("doctor");

    // -------------------------------------------
    // 取值
    var multiSelected = $("select[name=multiple]").val();
    console.log(multiSelected);

    // 选中某几个值
    $("select[name=multiple]").val(["bachelor", "master"]);
</script>
</body>
</html>