本文实例讲述了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. MYSQL 连接数据库命令收藏

    一.MySQL 连接本地数据库,用户名为“root”,密码“123”(注意:“-p”和“123” 之间不能有空格) C:\>mysql -h localhost -u root -p123 二. ...

  2. 黑客攻防技术宝典Web实战篇（三）web攻击方式总结

    web攻击的手段无非就是使服务器资源耗尽,使服务器无法接收正常请求. 一.DDos攻击 二.DRDos攻击 三.慢攻击 与Ddos攻击相反,慢攻击并不是以多取胜,而是靠保持连接.

  3. 你真的懂了R中的stem函数是如何绘制茎叶图的么？

    本文原创,转载请注明出处,本人Q1273314690(交流学习)   哭晕 你真的学会了stem()函数了吗? stem()函数的使用方法是: stem(x, scale=1,width=80, at ...

  4. ios如何普安短图片类型

    很多时候需要知道服务器返回的图片是.png还是.jpg或者是.git, 两种方式 1,获取扩展名 //图片    NSString *image = @"4351141241.GIT&quo ...

  5. Excel 使用CHIINV函数和GAMMA.DIST函数绘制卡方分布

    1.使用CHIINV(概率,自由度),在Excel中绘制卡方分布. 若n个独立的随机变量均服从标准正态分布,则这n个随机变量的平方和构成一新的随机变量,其分布规律称为服从自由度为ν 的χ2分布. 2. ...

  6. 大数据处理时用到maven的repository

    由于做数据处理时,经常遇到maven 下载依赖包错误,下面我将自己下载好的repository 分享下 里边包含:Hadoop ,storm ,sprk ,kafka ,等 压缩后500多M. htt ...

  7. 热更新脚本C#light,ulua,Scorpio性能比较

    http://www.unity蛮牛.com/thread-32861-1-1.html 测试环境: unity4.5.2  三个脚本全是源码导入  PC :处理器 Intel(R) Core(TM) ...

  8. 回归基础: JavaScript 变量提升

    from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScr ...

  9. Android6.0以后动态增加权限

    private void test() throws IOException { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { in ...

  10. 2016年11月2日--Window.document对象

    一.找到元素: docunment.getElementById("id"):                      根据id找,最多找一个: var a =docunment ...