IT技术库 - 技术成就梦想
首页
网络编程
发布时间:2023-10-21 08:36:01
jQuery Attributes(属性)的使用(一、属性篇)
jquery
attributes
本篇讲解:attr(name),attr(properties),attr(key,value),attr(key,fn),removeAttr(name)的用法。
您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com
您可以到jQuery官网来学习更多的有关jQuery知识。
下面的代码,运行后,需要刷新下。
jQuery-Attributes-1
<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
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('<span style="color:Red;"><strong>图片数量:$("#div_a1 img")获取到'+$("#div_a1 img").size()+'张图片</strong></span><br />');
$("#div_a1_1").append('第一张图片路径:'+$("#div_a1 img").attr("src")+'<br />');
$("#div_a1_1").append('第一张图片ID:'+$("#div_a1 img").attr("id")+'<br />');
$("#div_a1_1").append('第一张图片Name:'+$("#div_a1 img").attr("name")+'<br />');
$("#div_a1_1").append('第一张图片框宽度:'+$("#div_a1 img").attr("width")+'<br />');
$("#div_a1_1").append('第一张图片框alt:'+$("#div_a1 img").attr("alt")+'<br />');
$("#div_a1_1").append('<span style="color:Red;"><strong>第一个图片框Value值:'+$("#div_a1 img").attr("Value")+'</strong></span><br />');
//点击按钮一看效果
DIV ID="div_a1"
id="div_a1_1"
你可以试着将上面那个文本框的属性值输出 <script type="text/javascript"> $("#btn_1").click(function(){ $("#div_a1_1").append('
图片数量:$("#div_a1 img")获取到'+$("#div_a1 img").size()+'张图片
'); $("#div_a1_1").append('第一张图片路径:'+$("#div_a1 img").attr("src")+'
'); $("#div_a1_1").append('第一张图片ID:'+$("#div_a1 img").attr("id")+'
'); $("#div_a1_1").append('第一张图片Name:'+$("#div_a1 img").attr("name")+'
'); $("#div_a1_1").append('第一张图片框宽度:'+$("#div_a1 img").attr("width")+'
'); $("#div_a1_1").append('第一张图片框alt:'+$("#div_a1 img").attr("alt")+'
'); $("#div_a1_1").append('
第一个图片框Value值:'+$("#div_a1 img").attr("Value")+'
'); }); </script>
注意:选择器$("#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: "//tu.exitrh.com/2023/1021/20231021083601643.gif", alt: "Google" });
$("#div_b1 img:eq(1)").attr({ src: "//tu.exitrh.com/2023/1021/20231021083602899.gif", alt: "雅虎" });
//点击按钮二看效果
DIV ID="div_b1"
<script type="text/javascript"> $("#btn_2").click(function(){ $("#div_b1 img:eq(0)").attr({ src: "//tu.exitrh.com/2023/1021/20231021083601643.gif", alt: "Google" }); $("#div_b1 img:eq(1)").attr({ src: "//tu.exitrh.com/2023/1021/20231021083602899.gif", alt: "雅虎" }); }); </script>
3. attr(key,value)用法
定义:为所有匹配的元素设置一个属性值。
返回值:jQuery
参数:key (String) : 属性名称 value (Object) : 属性值
实例:将ID为"div_c1"的DIV中为所有图像设置src属性。
代码:
$("#div_c1 img:eq(0)").attr("src","//tu.exitrh.com/2023/1021/20231021083601643.gif");
$("#div_c1 img:eq(1)").attr("src","//tu.exitrh.com/2023/1021/20231021083602899.gif");
//点击按钮三看效果
DIV ID="div_c1"
<script type="text/javascript"> $("#btn_3").click(function(){ $("#div_c1 img:eq(0)").attr("src","//tu.exitrh.com/2023/1021/20231021083601643.gif"); $("#div_c1 img:eq(1)").attr("src","//tu.exitrh.com/2023/1021/20231021083602899.gif"); }); </script>
4. attr(key,fn)用法
定义:为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。
返回值:jQuery
参数:key (String) : 属性名称 fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值
实例:将ID为"div_d1"的DIV中为所有图像把title属性的值设置为src属性的值。
代码:$("#div_d1 img").attr("src", function() { return this.title;});
//点击按钮四看效果
DIV ID="div_d1"
<script type="text/javascript"> $("#btn_4").click(function(){ $("#div_d1 img").attr("src", function() { return this.title;}); }); </script>
5. removeAttr(name)用法
定义:从每一个匹配的元素中删除一个属性。
返回值:jQuery
参数:name (String) : 要删除的属性名
实例:将ID为"div_e1"的DIV中为把所有图像src属性删除 。
代码:$("#div_e1 img").removeAttr("src");
//点击按钮五看效果
DIV ID="div_e1"
<script type="text/javascript"> $("#btn_5").click(function(){ $("#div_e1 img").removeAttr("src"); }); </script>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
完整代码打包下载
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
你可能感兴趣的
JQuery 操作Javascript对象和数组的工具函数小结
23-07-24
JQuery
Javascript
数组
工具函数
jQuery AnythingSlider滑动效果插件
23-07-24
anythingslider
插件
jquery
JQery 渐变图片导航效果代码 漂亮
23-07-24
js
jquery
代码
JQuery 获取和设置Select选项的代码
23-07-24
JQuery
select
select
options
Discuz! 6.1_jQuery兼容问题
23-07-25
discuz!
jquery
jquery $.ajax入门应用二
23-07-25
ajax
jquery
把html页面的部分内容保存成新的html文件的jquery代码
23-07-25
jquery
html
html文件
jQuery 对象中的类数组操作
23-07-25
jQuery
数组
数组操作
Jquery 学习笔记(一)
23-07-25
Jquery
jquery
schema
jquery 实现京东商城、凡客商城的图片放大效果
23-07-26
jquery
京东商城
凡客商城