jQuery 属性操作 - attr() 方法

简介:

实例

改变图像的 width 属性:

$("button").click(function(){
  $("img").attr("width","180");
});

定义和用法

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

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

返回属性值

返回被选元素的属性值。

语法

$(selector).attr(attribute)
复制代码
<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>
复制代码

设置属性/值

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

语法

$(selector).attr(attribute,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>
复制代码

使用函数来设置属性/值

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

语法

$(selector).attr(attribute,function(index,oldvalue))
复制代码
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width",function(n,v){
      return v-50;
    });
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>减少图像的宽度 50 像素</button>
</body>
</html>
复制代码

设置多个属性/值对

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

语法

$(selector).attr({attribute:value, attribute: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"});
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>




本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/archive/2012/08/06/2625010.html,如需转载请自行联系原作者
相关文章
|
2月前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
45 6
|
3月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
38 5
|
2月前
|
存储 JavaScript 前端开发
jQuery 对属性的操作
【10月更文挑战第8天】
|
2月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
29 1
|
2月前
|
前端开发 JavaScript
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
58 6
|
3月前
|
JavaScript 前端开发
jQuery 杂项方法
jQuery 杂项方法
36 2
|
3月前
|
JavaScript
jQuery 效果 方法
jQuery 效果 方法
18 3
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
41 1
|
3月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
21 2
|
2月前
|
存储 JSON JavaScript
jQuery 方法大全
jQuery 方法大全
19 0