jquery步骤之-attr()返回或设置属性值

jquery方法之-attr()返回或设置属性值
返回被选元素的属性值：$(selector).attr(attribute)
设置被选元素的属性和值：$(selector).attr(attribute,value)
设置一个以上的属性和值：$(selector).attr({attribute:value, attribute:value ...})

<script type="text/javascript">
$("button").click(function(){
    $("#p1").attr("title","我是div1");
    alert($("#p1").attr("title"));
});
</script>
<div id="p1" style="background-color:red" >段落1</div>
<button>返回图像的宽度</button>

网上有这样的说法：css()是用来操纵style{}的，而attr()是加在标签内部的。【我是对的】
so：如<img>标签，attr()的权重比css()要大，它会覆盖css()的样式。【我是错的】
http://jsfiddle.net/t4m2tkxa/1/

<script type="text/javascript">
$(document).ready(function () {
    $("#button1").click(function () {        
        $("img").attr("width", "180");
    });
    $("#button2").click(function () {        
        $("img").css("width","20");
    });
});
</script>
<img src="/i/eg_smile.gif"  width="280"/>
<br />
<button id="button1">通过attr()设置图像的 width 属性</button>
<button id="button2">通过css()设置图像的 width 属性</button>

但是测试结果显示：
此时，先点击按钮1图片宽度改变再点击按钮2图片宽度再次改变。
      先点击按钮2图片宽度改变再点击按钮1图片宽度不发生改变。
为什么呢？原来是理解有偏差：attr()是修改获取属性，css()是修改获取样式。

css()作用后：<img src="/i/eg_smile.gif" style="width: 280px" width="280"/>
attr()作用后：<img src="/i/eg_smile.gif"  width="180"/>