jQuery学习—

jQuery学习——属性

.attr()

获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

在jQuery 1.6中,当属性没有被设置时候，.attr()方法将返回undefined。~~另外，.attr()不应该用在普通的对象，数组，窗口（window）或文件（document）上。~~若要检索和更改DOM属性,比如元素的checked, selected, 或disabled状态，请使用.prop()方法。

Attributes vs. Properties

attributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法方法返回 property 的值,而.attr() 方法返回 attributes 的值。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected应使用.prop()方法进行取值或赋值。在jQuery1.6之前，这些属性使用.attr()方法取得，但是这并不是元素的attr属性。他们没有相应的属性（attributes），只有特性(property)。

例如，考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked" /> ，并假设它是一个JavaScript变量命名的elem ：

`elem.checked`	`true` (Boolean) 将随着复选框状态的改变而改变
`$(elem).prop("checked")`	`true` (Boolean) 将随着复选框状态的改变而改变
`elem.getAttribute("checked")`	`"checked"` (String) 复选框的初始状态;不会改变
`$(elem).attr("checked")` (1.6)	`"checked"` (String) 复选框的初始状态;不会改变
`$(elem).attr("checked")` (1.6.1+)	`"checked"` (String) 将随着复选框状态的改变而改变
`$(elem).attr("checked")` (pre-1.6)	`true` (Boolean) 将随着复选框状态的改变而改变

根据W3C的表单规范，在checked属性是一个布尔属性，这意味着,如果这个属性（attribute）是目前存在，即使，该属性没有对应的值，或者被设置为空字符串值，或甚至是"false"，相应的属性（property）为true。这才是真正的所有布尔属性（attributes）。

然而，要记住的最重要的概念是checked特性（attribute）不是对应它checked属性（property）。特性（attribute）实际对应的是defaultChecked属性（property），而且仅用于设置复选框最初的值。checked特性（attribute）值不会因为复选框的状态而改变，而checked属性（property）会因为复选框的状态而改变。因此，跨浏览器兼容的方法来确定一个复选框是否被选中，是使用该属性（property）：

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

对于其他的动态属性，同样是true，比如 selected 和 value.

Additional Notes（其他注意事项）:

在Internet Explorer 9之前的版本，使用.prop()设置DOM元素的属性进行赋值时，若所赋值的类型不是基本类型(number, string, 或 boolean)，而且也没有使用 .removeProp() 方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题，请使用 .data() 方法。

在页面的第一个<em>中找到title属性。

<!DOCTYPE html>
<html>
<head>
  <style>
  em { color:blue; font-weight:bold; }
  div { color:red; }
</style>
  <script src="http://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");
  $("div").text(title);
</script>
 
</body>
</html>

.attr( attributeName, value )

描述: 设置每一个匹配元素的一个或多个属性。

这个 .attr() 方法是一个设置属性值的方便而且强大的途径—特别是当设置多个属性或使用值来自函数。让我们考虑下面的图片：
警告： 当设置样式名（“class”）属性时，必须使用引号！

注意: jQuery禁止改变一个 <input> 或 <button>元素的type 特性（attribute），并且在所有浏览器下将抛出一个错误。因为Internet Explorer不会允许你改变<input>或者<button>元素的type属性。

Computed attribute values(推算属性值)

通过使用一个函数来设置属性，可以根据该元素上的其它属性值返回最终所需的属性值。例如，我们可以把新的值与现有的值联系在一起：

$('#greatphoto').attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark'
});

当前运用一个函数来计算属性的值，当我们修改了多个元素的属性，特别有用。

注意如果setter函数没有返回任何数据（例如：function(index, attr){})，属性的当前值返回值是undefined，作为一个getter行为。实际上，如果不进行任何更改的setter函数不返回的东西。

为页面中全部的 <img>设置一些属性。

<!DOCTYPE html>
<html>
<head>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
  <img />
  <img />
  <img />
 
  <div><B>Attribute of Ajax</B></div>
 
<script>
$("img").attr({
  src: "images/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</script>
 
</body>
</html>

使第二个后面的按钮disabled

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
        </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
  <div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>
 
<script>
$("div").attr("id", function (arr) {
  return "div-id" + arr;
})
.each(function () {
  $("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
</script>
 
</body>
</html>

通过图片的title属性设置SRC属性。

<script>
$("img").attr("src", function() {
    return "images/" + this.title;
});
</script>

.prop()

获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

Attributes vs. Properties

attributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法方法返回 property 的值,而.attr() 方法返回 attributes 的值。

例如，考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked" /> ，并假设它是一个JavaScript变量命名的elem ：

`elem.checked`	`true` (Boolean) 将随着复选框状态的改变而改变
`$(elem).prop("checked")`	`true` (Boolean) 将随着复选框状态的改变而改变
`elem.getAttribute("checked")`	`"checked"` (String) 复选框的初始状态;不会改变
`$(elem).attr("checked")` (1.6)	`"checked"` (String) 复选框的初始状态;不会改变
`$(elem).attr("checked")` (1.6.1+)	`"checked"` (String) 将随着复选框状态的改变而改变
`$(elem).attr("checked")` (pre-1.6)	`true` (Boolean) 将随着复选框状态的改变而改变

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

对于其他的动态属性，同样是true，比如 selected 和 value.

如果你使用jQuery 1.6 ，代码if ( $(elem).attr("checked") )，将获得一个属性(attribute) ，它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。为了保持向后兼容，.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外，还会更新 property 属性，因此 boolean attribute（布尔属性）不需要通过 .prop() 来改变其值。推荐使用上述方法之一，来取得 checked 的值。要想知道在最新的 jQuery 版本中,它们是如何工作的，请点击下例中的 check。

Additional Notes（其他注意事项）:

在Internet Explorer 9之前的版本，使用.prop()设置DOM元素的属性进行赋值时，若所赋值的类型不是基本类型(number, string, 或 boolean)，而且也没有使用 .removeProp()方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题，请使用 .data() 方法。

Checked属性显示一个复选框，因为它的变化和属性。

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 20px 0 0 }
  b { color: blue; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$("input").change(function() {
  var $input = $(this);
  $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
              + ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
              + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
}).change();
</script>
 
</body>
</html>

.prop( propertyName, value )

.prop()方法设置属性值非常方便，尤其是对于需要使用一个函数设置多个属性值或是一次性设置多个属性值的情况。当设置selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 或defaultSelected必须使用这个方法。从jQuery1.6开始，这些属性可以不再使用.attr()方法来设置。他们没有相应的属性（attributes），只有属性(property)。

Properties 属性一般影响 DOM 元素的动态状态并不会改变序列化的 HTML attribute 属性。例如，input 元素的 value 属性，input 和按钮元素的 disabled 属性, 以及 checkbox 的 checked 属性。应该使用 .prop() 方法设置 disabled 和 checked 属性，而不是使用 .attr() 方法。 .val() 方法应该用于存取 value 值。

$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");

还要注意的是.removeProp()方法不应该被用来设置这些属性为false。一旦原生的属性被移除，就无法再被添加。见.removeProp()获取更多信息。

Computed property values（计算的属性值）

通过使用一个函数来设置属性，你可以根据其他的元素的属性计算它的值。例如，根据单独的值切换所有复选框：

$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

注意: 如果设置的函数没有返回（即 function(index, prop){})），或者返回undefined ，当前值不会被改变。这当某些条件得到满足选择性元素设定属性值（比如复选框，单选等），是非常有用的。

Additional Notes（其他注意事项）:

在Internet Explorer之前的版本9，使用.prop()设置DOM元素的属性进行赋值时，若所赋值的类型不是基本类型(number, string, 或 boolean)，而且也没有使用 .removeProp() 方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题，请使用 .data() 方法。

禁用页面上的所有复选框。

<script>
$("input[type='checkbox']").prop({
  disabled: true
});
</script>

.removeAttr()

描述: 为匹配的元素集合中的每个元素中移除一个属性（attribute）。

.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。

注意: Internet Explorer 6， 7 ，或8中，使用.removeAttr()删除一个内联onclick 事件处理程序没有实现，为了避免潜在的问题，使用 .prop()代替：

$element.prop("onclick", null);
console.log("onclick property: ", $element[0].onclick);

点击按钮，添加或删除按钮后面 input 元素的 title 属性。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Enable</button>
<input type="text" title="hello there" />
<div id="log"></div>
 
<script>
(function() {
  var inputTitle = $("input").attr("title");
  $("button").click(function () {
    var input = $(this).next();
 
    if ( input.attr("title") == inputTitle ) {
      input.removeAttr("title")
    } else {
      input.attr("title", inputTitle);
    }
 
    $("#log").html( "input title is now " + input.attr("title") );
  });
})();
</script>
 
</body>
</html>

.removeProp()

描述: 为集合中匹配的元素删除一个属性（property）。

.removeProp()方法用来删除由.prop()方法设置的属性集。

若尝试移除 DOM 元素或 window 对象上一些内建的属性（ property ），浏览器可能会产生错误。如果真的那么做了，那么 jQuery 首先会将属性（ property ）设置成 undefined ，然后忽略任何浏览器产生的错误。一般来说,只需要移除自定义的属性（ property ），而不是移除内建的（原生的）属性（ property ）。

注意: 不要使用此方法来删除原生的属性（ property ），比如checked, disabled, 或者 selected。这将完全移除该属性，一旦移除，不能再次被添加到元素上。使用.prop()来设置这些属性设置为false代替。

Additional Notes（其他注意事项）:

在Internet Explorer之前的版本9，使用.prop()设置DOM元素的属性进行赋值时，若所赋值的类型不是基本类型(number, string, 或 boolean)，而且也没有使用 .removeProp() 方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题，请使用 .data() 方法。

设置一个段落数字属性，然后将其删除。

<!DOCTYPE html>
<html>
<head>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
  <p></p>
 
<script>
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
 
</script>
 
</body>
</html>

.val()

获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。

$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select even easier
$('input:checkbox:checked').val();        // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

注意: 通过 .val() 方法从 textarea 元素中取得的值是不含有回车（）字符的。但是如果该值是通过 XHR 传递给服务器的，回车（）字符会被保留（或者是被浏览器添加的，但是在原始数据中并不包含回车（））。可以使用下面的 valHook 方法解决这个问题：

$.valHooks.textarea = {
  get: function( elem ) {
    return elem.value.replace( /
?
/g, "
" );
  }
};

从单一列表框和复选列表中取值，并显示选中的值。

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:4px; }
  b { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p></p>
 
  <select id="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
 
  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
 
<script>
    function displayVals() {
      var singleValues = $("#single").val();
      var multipleValues = $("#multiple").val() || [];
      $("p").html("<b>Single:</b> " +
                  singleValues +
                  " <b>Multiple:</b> " +
                  multipleValues.join(", "));
    }
 
    $("select").change(displayVals);
    displayVals();
 
</script>
 
</body>
</html>

取得文本框的值。

<!DOCTYPE html>
<html>
<head>
  <style>
 
  p { color:blue; margin:8px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input type="text" value="some text"/>
  <p></p>
<script>
    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();
</script>
 
</body>
</html>

.val( value )

描述: 设置匹配的元素集合中每个元素的值。

此方法通常用于设置表单字段的值。

传递一个元素的数组，允许匹配<input type="checkbox">, <input type="radio"> 和 <select multiple="multiple">中的<option>被选中。对于 <input type="radio"> 属于一个单选按钮组，还有<select multiple="multiple">的其他元素都将被取消选中。

.val() 方法允许我们通过一个函数来设置这个值。从 jQuery 1.4 开始，这个函数通过两个参数，当前元素的所引值和它当前的值：

$('input:text.items').val(function( index, value ) {
  return value + ' ' + this.className;
});

点击按钮时，在文本框中显示按钮的值。

<!DOCTYPE html>
<html>
<head>
  <style>
  button { margin:4px; cursor:pointer; }
  input { margin:4px; color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <button>Feed</button>
    <button>the</button>
    <button>Input</button>
  </div>
  <input type="text" value="click a button" />
<script>
    $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });
</script>
 
</body>
</html>

jQuery学习——属性

Contents:

Attributes vs. Properties

Additional Notes（其他注意事项）:

在页面的第一个<em>中找到title属性。

为页面中全部的 <img>设置一些属性。

使第二个后面的按钮disabled

通过图片的title属性设置SRC属性。

Contents:

Attributes vs. Properties

Additional Notes（其他注意事项）:

Checked属性显示一个复选框，因为它的变化和属性。

Computed property values（计算的属性值）

Additional Notes（其他注意事项）:

禁用页面上的所有复选框。

点击按钮，添加或删除按钮后面 input 元素的 title 属性。

Additional Notes（其他注意事项）:

设置一个段落数字属性，然后将其删除。

Contents:

.val()

从单一列表框和复选列表中取值，并显示选中的值。

取得文本框的值。