jQuery中 attr() 方法使用小结

 更新时间:2015年05月03日 10:22:56   投稿:hebedich  
jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr()

定义和用法

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

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

实例1

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

<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>

实例2

返回被选元素的属性值。

<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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • jquery中获取id值方法小结

    jquery中获取id值方法小结

    ID是html页面中一些元素都可以有个本页面唯一的id包括如,div,input,iframe等等都是可以的,下面我来给大家介绍利用jquery 获取id值方法,有需要了解的朋友可参考
    2013-09-09
  • 基于bootstrap3和jquery的分页插件

    基于bootstrap3和jquery的分页插件

    这篇文章主要介绍了基于bootstrap3和jquery的分页插件的相关资料,需要的朋友可以参考下
    2015-07-07
  • json+jQuery实现的无限级树形菜单效果代码

    json+jQuery实现的无限级树形菜单效果代码

    这篇文章主要介绍了json+jQuery实现的无限级树形菜单效果代码,涉及jquery针对json数据的遍历、读取及动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery返回定位插件详解

    jQuery返回定位插件详解

    本篇文章主要介绍了jQuery返回定位插件的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • jQuery+HTML5实现弹出创意搜索框层

    jQuery+HTML5实现弹出创意搜索框层

    本文主要分享了jQuery+HTML5弹出创意搜索框层的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2016-12-12
  • 使用jquery制作弹出框效果

    使用jquery制作弹出框效果

    本文主要是使用jDialog插件实现的弹出框效果,代码十分简介,需要的小伙伴自己参考下吧。
    2015-04-04
  • 不同的jQuery API来处理不同的浏览器事件

    不同的jQuery API来处理不同的浏览器事件

    我们将探讨不同的API jQuery来处理不同的浏览器事件,需要的朋友可以参考下
    2012-12-12
  • JQuery实现表格数据行上移与下移

    JQuery实现表格数据行上移与下移

    这篇文章主要为大家详细介绍了JQuery实现表格数据行上移与下移,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • jQuery不兼容input的change事件问题解决过程

    jQuery不兼容input的change事件问题解决过程

    本文记录了在项目中发现在IE9中不会立即触发change事件,存在兼容问题的解决过程,非常的详尽,解决过程中也有新问题出现,最终都解决完毕,完美实现了兼容各大主流浏览器
    2014-12-12
  • jquery实现表格行的上下移动和置顶

    jquery实现表格行的上下移动和置顶

    这篇文章主要为大家详细介绍了jquery实现表格行的上下移动和置顶,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02

最新评论