jQuery Attributes(属性)的使用(一、属性篇)

网络编程 2024/11/16 佚名

3 2 1

本篇讲解：attr(name),attr(properties),attr(key,value),attr(key,fn),removeAttr(name)的用法。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
您可以到jQuery官网来学习更多的有关jQuery知识。
下面的代码，运行后，需要刷新下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery-Attributes-1</title> <style type="text/css"> .div { width:95%; margin-left:15px; margin-top:15px; margin-right:15px; padding-left:5px; padding-top:5px; padding-bottom:5px; background-color:#ccc; border:#999 1px solid; line-height:30px; font-size:13px; font-family:微软雅黑; } .blue{color:Blue;} .green{color:Green;} .button{border:green 1px solid;width:100px;} .xiaobiao{ font-weight:bold;} .red_test{background-color:red; color:White; width:300px; height:30px;} .li_test{border:#000 1px solid;} </style> </head> <body> jQuery-Attributes(属性)的使用(一、属性篇) 本系列文章主要讲述jQuery框架的属性(Attributes)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，文章分为：属性篇、类篇、Html代码篇&文本篇、值篇共4篇文章。 本篇讲解：attr(name),attr(properties),attr(key,value),attr(key,fn),removeAttr(name)的用法。 您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com 您可以到jQuery官网来学习更多的有关jQuery知识。 版权所有：code-cat 博客:http://www.cnblogs.com/bynet 转载请保留原作者、出处和版权信息！ 在IE6/7/8、火狐下测试过了，效果都行实现。 1. attr(name)用法 定义：取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。 返回值：Object 参数：name (String) : 属性名称 实例：将ID为"div_a1"的DIV中第一张图片的路径、ID、Name、宽度、Alt、Value属性的值输出到ID为'div_a1_1'的DIV中。 代码： $("#div_a1_1").append('&lt;span style="color:Red;">&lt;strong>图片数量：$("#div_a1 img")获取到'+$("#div_a1 img").size()+'张图片&lt;/strong>&lt;/span>&lt;br />'); $("#div_a1_1").append('第一张图片路径：'+$("#div_a1 img").attr("src")+'&lt;br />'); $("#div_a1_1").append('第一张图片ID：'+$("#div_a1 img").attr("id")+'&lt;br />'); $("#div_a1_1").append('第一张图片Name：'+$("#div_a1 img").attr("name")+'&lt;br />'); $("#div_a1_1").append('第一张图片框宽度：'+$("#div_a1 img").attr("width")+'&lt;br />'); $("#div_a1_1").append('第一张图片框alt：'+$("#div_a1 img").attr("alt")+'&lt;br />'); $("#div_a1_1").append('&lt;span style="color:Red;">&lt;strong>第一个图片框Value值：'+$("#div_a1 img").attr("Value")+'&lt;/strong>&lt;/span>&lt;br />'); //点击按钮一看效果 DIV ID="div_a1" <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20091214233425668.gif');"><img src="/UploadFiles/2021-04-02/20091214233425668.gif" alt="jQuery Attributes(属性)的使用(一、属性篇)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('/upload/2009-12/20091214233425172.gif');"><img src="/upload/2009-12/20091214233425172.gif" alt="jQuery Attributes(属性)的使用(一、属性篇)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <input type="text" id="txt_1" name="txt_bky" style="width:150px;" value="input text 博客园" /> id="div_a1_1" <input type="button" id="btn_1" value="按钮一" class="button" /> 你可以试着将上面那个文本框的属性值输出 注意：选择器$("#div_a1 img")获取到了2张图片，而att(name)只得到第一张图片的属性值。img元素没有value属性，所以最后输出'undefined'。 2. attr(properties)用法 定义：将一个"名/值"形式的对象设置为所有匹配元素的属性。 这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。 或者你可以直接使用.addClass( class ) 和 .removeClass( class ). 返回值：jQuery 参数：properties (Map) : 作为属性的"名/值对"对象 实例：将ID为"div_b1"的DIV中为所有图像设置src和alt属性。 代码： $("#div_b1 img:eq(0)").attr({ src: "/upload/2009-12/20091214233425668.gif", alt: "Google" }); $("#div_b1 img:eq(1)").attr({ src: "/upload/2009-12/20091214233425172.gif", alt: "雅虎" }); //点击按钮二看效果 DIV ID="div_b1" <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20091214233425668.gif');"><img src="/UploadFiles/2021-04-02/20091214233425668.gif" alt="jQuery Attributes(属性)的使用(一、属性篇)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('/upload/2009-12/20091214233425172.gif');"><img src="/upload/2009-12/20091214233425172.gif" alt="jQuery Attributes(属性)的使用(一、属性篇)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <input type="button" id="btn_5" value="按钮五" class="button" /> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
完整代码打包下载

jQuery,Attributes,属性

标签：

jQuery,Attributes,属性

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

桃源资源网 Design By www.nqtax.com

评论“jQuery Attributes(属性)的使用(一、属性篇)”

jQuery Attributes(属性)的使用(一、属性篇)

暂无“jQuery Attributes(属性)的使用(一、属性篇)”评论...

www.nqtax.com 桃源资源网

19,905影音资源

44,626技术资源

1,817软件资源

378,645站长资源

jQuery Attributes(属性)的使用(一、属性篇)

jQuery,Attributes,属性

jquery自动完成插件(autocomplete)应用之PHP版

Javascript attachEvent传递参数的办法

评论“jQuery Attributes(属性)的使用(一、属性篇)”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

jQuery Attributes(属性)的使用(一、属性篇)

jQuery,Attributes,属性

jquery自动完成插件(autocomplete)应用之PHP版

Javascript attachEvent传递参数的办法

评论“jQuery Attributes(属性)的使用(一、属性篇)”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存