本文实例讲述了jQuery中attr()方法用法。分享给大家供大家参考。具体分析如下：

此方法设置或返回匹配元素的属性值。 attr()方法根据参数的不同，功能也不同。

语法结构一: 获取第一个匹配元素指定属性的属性值。

代码如下:
$(selector).attr(name)

参数列表:

参数 描述
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属性值。

语法结构二: 为匹配元素指定的属性设置属性值。

代码如下:
$(selector).attr(attribute,value)

参数列表:

参数 描述
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属性值。

语法结构三: 将“名/值”形式的对象设置为匹配元素的属性。可以一次性设置多组“名/值”对，对匹配元素属性进行设置。

代码如下:
$(selector).attr(properties)

参数列表:

参数 描述
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>

以上代码中，可以设置单元格的宽度和高度。

语法结构四:通过函数返回值设置属性值。

代码如下:
$(selector).attr(name,function(index,oldvalue))

参数列表:

参数 描述
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()方法用法实例的更多相关文章

  1. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  2. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

  3. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  4. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  5. jQuery中index()方法用法实例

    本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值 ...

  6. jQuery中data()方法用法实例

    语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...

  7. 解析jQuery中extend方法--用法《一》

    extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法.常用语jQuery插件开发. jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实 ...

  8. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  9. 解析jQuery中extend方法--源码解析以及递归的过程《二》

    源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...

随机推荐

  1. Emacs教程

    中文 http://www.cnblogs.com/robertzml/category/209299.html 英文 http://ergoemacs.org/emacs/emacs_fun.htm ...

  2. matlab求解相关系数

    最近收到一项新任务,要求两个矩阵的相关系数,说白了就是转换成向量两两计算.本来这个工作我是想自己写个小程序搞定的,但是大家纷纷反映matlab自带了此项功能,本着活到老学到老的心态,我开始查找这个函数 ...

  3. A simple Snippet in ST2

    Reference: http://web-design-weekly.com/2012/07/03/snippets-in-sublime-text-2/ A sample - cofirm (To ...

  4. [转载]解析用户生命周期价值：LTV

    http://www.sykong.com/2014/07/23144 http://youxiputao.com/articles/1288 http://www.woshipm.com/opera ...

  5. WCF服务显示的是服务器名称而不是IP地址...

    打开http://xx.xx.xx.xx:端口号/Service1.svc页面显示的服务地址为: http://xx_yy_server:端口号/Service1.svc?wsdl 是显示的服务器的名 ...

  6. page文件

    题目:主页面引用 page 文件 ./configs/style.conf ./templates/main.html <body> <{config_load file=" ...

  7. LR常用函数整理

    1,变量转参数lr_save_string("aaa","param"):将字符串"aaa"或者一个字符串变量,转变成LR的参数{param ...

  8. C\C++ 字符串的格式化与类型转化

    字符串格式化 1.sscanf int sscanf(const char *buffer,const char *format,[argument ]...) 取到指定字符为止的字符串.如在下例中, ...

  9. CentOS-6.5-NFS部署

                      nfs-server与nfs-client端配置一样   NFS(network file system)网络文件系统:用于在网络上共享存储. 服务端-192.16 ...

  10. Nginx的作用

    负载均衡 现在几乎看不到单机奋斗的应用了吧.反向代理服务器可以根据负载均衡算法进行均匀或者自定义的转发.常见的负载均衡算法有:轮转算法(Round Robin).最少连接算法(Least Connec ...