jQuery中attr()方法用法实例
本文实例讲述了jQuery中attr()方法用法。分享给大家供大家参考。具体分析如下：
此方法设置或返回匹配元素的属性值。 attr()方法根据参数的不同，功能也不同。
语法结构一: 获取第一个匹配元素指定属性的属性值。
参数列表:
| 参数 | 描述 |
| name | 定义要获取其值的属性名称。 |
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>attr()函数-脚本之家</title>
<style type="text/css">
.font{
font-size:18px;
color:yellow
}
.bg{
background:#336;
}
.second{
color:green
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
alert($("div").attr("class"));
})
})
</script>
</head>
<body>
<div class="font bg">我是第一个div</div>
<div class="second">我是第二个div</div>
<button id="btn">点击查看效果</button>
</body>
</html>
以上代码中，点击按钮可以弹出匹配元素集合中，第一个元素的class属性值。
语法结构二: 为匹配元素指定的属性设置属性值。
参数列表:
| 参数 | 描述 |
| attribute | 定义要设置值的属性名称。 |
| value | 定义要设置的属性值。 |
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>attr()函数-脚本之家</title>
<style type="text/css">
div{
width:200px;
height:200px;
border:1px solid blue
}
.font{
font-size:18px;
color:yellow
}
.bg{
background:#336;
}
.reset{
color:green;
font-size:20px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("div").attr("class","reset");
});
})
</script>
</head>
<body>
<div class="font bg">脚本之家欢迎您</div>
<button id="btn">点击查看效果</button>
</body>
</html>
以上代码中， 当点击按钮的时候，能够重新设置div元素的class属性值。
语法结构三: 将“名/值”形式的对象设置为匹配元素的属性。可以一次性设置多组“名/值”对，对匹配元素属性进行设置。
参数列表:
| 参数 | 描述 |
| attribute:value | 定义属性名/值对 |
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>attr()函数-脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("td").attr({width:"200",height:"300"});
})
})
</script>
</head>
<body>
<table border="1">
<tr>
<td>欢迎来到脚本之家</td>
</tr>
</table>
<button id="btn">点击查看效果</button>
</body>
</html>
以上代码中，可以设置单元格的宽度和高度。
语法结构四:通过函数返回值设置属性值。
参数列表:
| 参数 | 描述 |
| name | 定义要设置值的属性的名称。 |
| function(index,oldvalue) | 定义返回属性值的函数 index - 可选，接受选择器的索引位置。 class - 可选，接受选择器的当前的属性值。 |
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>attr()函数-脚本之家</title>
<style type="text/css">
div{
height:200px;
width:200px;
border:1px solid blue
}
.font{
font-size:18px;
}
.bg{
background:#336;
color:red;
}
.reset{
font-size:20px;
color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("div").attr("class" ,function(){
return "reset"
})
})
})
</script>
</head>
<body>
<div class="font bg">脚本之家欢迎您</div>
<button id="btn">点击查看效果</button>
</body>
</html>
以上代码中，同样可以设置div的class属性值，只是属性值是以函数的返回值方式获得的。
希望本文所述对大家的jQuery程序设计有所帮助。
转自：http://www.jb51.net/article/59428.htm
jQuery中attr()方法用法实例的更多相关文章
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- jQuery中animate()方法用法实例
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...
- jQuery中index()方法用法实例
本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值 ...
- jQuery中data()方法用法实例
语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...
- 解析jQuery中extend方法--用法《一》
extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法.常用语jQuery插件开发. jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实 ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- 解析jQuery中extend方法--源码解析以及递归的过程《二》
源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...
随机推荐
- Java中Office(word/ppt/excel)转换成HTML实现
运行条件:JDK + jacob.jar + jacob.dll 1) 把jacob.dll在 JAVA_HOME\bin\ 和 JAVA_HOME\jre\bin\ 以及C:\WINDOWS\sys ...
- MyBatis动态SQL详解
MyBatis的动态SQL是基于OGNL表达式的,它可以帮助我们方便的在SQL语句中实现某些逻辑. MyBatis中用于实现动态SQL的元素主要有: if choose(when,otherwise) ...
- 【CISP笔记】安全漏洞与恶意代码（2）
恶意代码自我保护 进程保护 进程守护 超级权限 检测对抗 反动态调试 反静态调试 恶意代码检测技术 特征码扫描 沙箱技术 行为检测 恶意代码分析技术 静态分析 需要实际执行恶意代码,它通过对其二进制文 ...
- log4net的基本配置及用法
[1].[代码] [C#]代码 跳至 [1] [2] ? 1 2 using System.Reflection; //使用反射 static private ILog log = log4net. ...
- solr多条件查询（三）
1.昨天记了一下三条件的“并且” “并且”( && && )的情况,今天再来记一下 “并且” “或者” 的情况. 这里的或者情况,一定要搞清楚无论有多少情况, ...
- select2
.select2-container .select2-choice { height: 34px; line-height: 34px; } .自定义 组件高度 在css 里面设置 .select2 ...
- eclipse svn快捷键
一.打开eclipse插件安装市场,搜索svn,选择Subclipse安装 二.设置 svn ,设置快捷键, 1.windows-preference,在打开对话框输入keys过滤出keys选择 2. ...
- Android在TextView中实现RichText风格
参考: Android实战技巧:用TextView实现Rich Text---在同一个TextView中设置不同的字体风格 Demo: private SpannableStringBuilder c ...
- 利用LruCache为GridView加载大量本地图片完整示例
MainActivity如下: package cc.testlrucache; import android.os.Bundle; import android.widget.GridView; i ...
- smem – Linux 内存监视软件
导读 Linux 系统的内存管理工作中,内存使用情况的监控是十分重要的,在各种 Linux 发行版上你会找到许多这种工具.它们的工作方式多种多样,在这里,我们将会介绍如何安装和使用这样的一个名为 sm ...