先學30天jQuery再說之属性操作 - attr() 方法和prop()（part1）

attr() 方法

看看今天要學的目錄：

.attr( attributeName )
1. .attr( attributeName )
.attr( attributeName, value )
1. .attr( attributeName, value )
2. .attr( attributes )
3. .attr( attributeName, function(index, attr) )

正文：

定义和用法

attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数，其工作方式也有所差异。

使用 jQuery的 .attr() 方法得到了一个元素的属性值主要有两个好处：

方便：它可以直接被jQuery对象访问并且链式调用其他jQuery方法。
浏览器兼容：一些属性在不同浏览器中得到不同的值。甚至在同一个浏览器的不同版本中。 .attr() 方法减少了兼容性问题。

注意: 除少数属性意外，属性值都是字符串，如value和tabindex。

注意: 试图改变通过HTML创建的，或已经在HTML文档中的input元素的type特性（attribute）或属性（property），在Internet Explorer 6, 7, or 8下将会抛出一个错误。

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

返回属性值

返回被选元素的属性值。

语法

$(selector).attr(attribute)

參數

attribute

规定要获取其值的属性。

设置属性/值

设置被选元素的属性和值。

语法

$(selector).attr(attribute,value)

参数	描述
attribute	规定属性的名称。
value	规定属性的值。

设置多个属性/值对

为被选元素设置一个以上的属性和值。

语法

$(selector).attr({attribute:value, attribute:value ...})

参数	描述
attribute:value	规定一个或多个属性/值对。

設置函數

語法

$(selector).attr( attributeName, function(index, attr) )

参数	描述
attributeName（string）	設置值得属性名。
function(index,attr)(function)	函數返回用來設置的值，this指向當前元素。接受index參數表示元素在匹配集合中的索引位置和html參數表示元素上原來的HTML內容

栗子一：.attr( attributeName )

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert("Image width " + $("img").attr("width"));
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>返回图像的宽度</button>
</body>
</html>

點擊之後：

可以看到用先用$("img")找到img標籤，然後在用attr取到width屬性。

栗子二：.attr( attributeName, value )

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width","180");
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 属性</button>
</body>
</html>

點之前：

點之後：

可以看到點之前寬度是128px，點擊之後就變成180px

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<img title="eg_smile.gif"/>
 
<script>
$("img").attr("src", function() {
    return "/i/" + this.title;
});
</script>
 
</body>
</html>

結果為：

栗子三：.attr( attributeName:value,attributeName:value )，增加或者修改一个属性

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr({width:"50",height:"80",alt:'green apple'});
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>

點之前：

點之後：

当设置多个属性,包裹属性名的引号是可选的。

警告： 当设置样式名（“class”）属性时，必须使用引号！

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

栗子四：.attr( attributeName, function(index, attr) )

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark'
});
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>

結果為：

點擊button之後，可以看到點擊一次增加一個title裡面的值，可以加很多。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
        </style>
  <script src="https://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 (index) {
  return "div-id" + index;
})
.each(function () {
  $("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
</script>
 
</body>
</html>

結果為：

可以看出，在全部標籤為div中加入一個id屬性，然後在為這個他添加一個帶形參的函數

注意事项

1、attr()函数在操作少数属性时可能会出现异常情况，例如value和tabindex属性。

2、如果通过attr()函数更改<input>和<button>元素的type属性，在多数浏览器上将会抛出一个错误，因此该属性一般不允许在后期被更改。

3、尽量不要使用attr()操作表单元素的checked、selected、disabled属性。

4、在jQuery 1.6之前，attr()函数还可以设置或返回DOM元素的Element对象上的某些属性，例如：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等属性。但是这些属性不属于元素的DOM属性范畴，从jQuery 1.6开始，你不能再使用attr()函数进行上述属性的操作，你应该使用prop()函数。

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>

<body>

    <div id="n1">
        <p id="n2" data-id="25">CodePlayer</p>
        <input id="n3" name="name" type="text" label="姓名">
        <img id="n4" alt="CodePlayer" src="/image/blank.gif">
        <img id="n5" alt="站点logo" title="专注于编程开发技术分享" src="/static/upload/image/info.png">
        <ul id="n6">
            <li id="n7" uid="21">item1</li>
            <li id="n8" uid="23">item2</li>
            <li id="n9" uid="35">item3</li>
        </ul>
    </div>

    <script>
        //设置n4(img元素)的src属性值
        $("#n4").attr("src", "/static/upload/image/js-confirm-close-window-1.png");

        var $n2 = $("#n2");
        // 获取n2的data-id属性的值
        document.writeln($n2.attr("data-id")); // 25
        // 获取n2的myAttr属性的值，没有该属性，返回undefined
        document.writeln($n2.attr("myAttr")); // undefined

        //只返回第一个匹配元素的uid属性的值
        document.writeln($("li").attr("uid")); // 21

        // 以对象形式同时设置所有img元素的多个属性值
        $("img").attr({ height: 180, width: 180, "class": "img-box" });
        document.writeln($("#n5").attr("height")); // 180

        // 设置所有img元素的title属性值：
        // 1.如果该元素已经有了title属性，则不作改变
        // 2.如果该元素之前没有title属性，则设置title属性等于它的alt属性
        $("img").attr("title", function (index, attrValue) {
            // 这里的this表示当前DOM元素
            return attrValue == undefined ? this.alt : attrValue;
        });
    </script>

</body>

</html>

結果為：當img圖片可以顯示時

當img圖片無法顯示

小練習：

圖片選項卡：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .imgbig img {
            width: 100%;
            height: 570px;
        }

        .smallimg {
            width: 100%
        }

        .smallimg img {
            width: 33%;
            float: left;
            height: 200px;
        }
    </style>
</head>
<div class="imgbox">
    <div class="imgbig"><img src="https://i.ytimg.com/vi/Urc8zH7za-Y/maxresdefault.jpg"></div>
    <div class="smallimg">
        <img src="https://cdn2.ettoday.net/images/2534/d2534343.jpg" alt="">
        <img src="https://i.ytimg.com/vi/pkeUudycHjE/maxresdefault.jpg" alt="">
        <img src="http://hbimg.b0.upaiyun.com/0f97bb5a18d60d9197b8c92d69fa6d3fa021a2751a0ae-XStwCT_fw658" alt="">
    </div>
</div>

<body>
    <script src="js/jquery.min.js"> </script>
    <script>
        $(document).ready(function () {
            $(".smallimg img").click(function () {
                var big = $(".imgbig img").attr('src');
                var small = $(this).attr('src');
                $(".imgbig img").attr('src',small);
                $(this).attr('src',big);
            })
        })
    </script>
</body>

</html>

結果：

點擊小圖，則馬上小圖切換到上面變成大圖，大圖則變成小圖

prop() 方法

目錄：

.prop( propertyName )
1. .prop( propertyName )
.prop( propertyName, value )
1. .prop( propertyName, value )
2. .prop( properties )
3. .prop( propertyName, function(index, oldPropertyValue) )

參數：

参数	描述
propertyName	规定属性的名称。
value	规定属性的值。
function(index,oldPropertyValue)	规定返回要设置的属性值的函数。 index - 检索集合中元素的 index 位置。 oldPropertyValue- 检索被选元素的当前属性值。

定义和用法

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

注意: 试图改变通过HTML创建的，或已经在HTML文档中的input元素的type属性（property）（或特性attribute），在Internet Explorer 6, 7, or 8下将会抛出一个错误。

提示：如需检索 HTML 属性，请使用 attr() 方法代替。

提示：如需移除属性，请使用 removeProp() 方法。

.prop()方法只获得第一个匹配元素的属性值。如果元素上没有该属性，或者如果没有匹配的元素。那么该方法会返回undefined值。若要取得每个匹配元素的属性值（property），请使用循环结构，如jQuery .each()或.map()方法。

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

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

栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		var $x = $("div");
		$x.prop("style","color:#FF0000");
	});
});
</script>
</head>
<body>
<button>點我</button>
<br><br>
<div>添加和删除属性</div>
</body>
</html>

點擊之前：

點擊之後：

禁用下面的複選框：


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

結果為：

Computed property values（计算的属性值）

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

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

return !val;

});

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

prop()和attr()的主要区别

prop()函数针对的是DOM元素(JS Element对象)的属性，attr()函数针对的是DOM元素所对应的文档节点的属性。详情请查看jQuery函数attr()和prop()的区别。