本文实例讲述了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. 一个漂亮的php验证码类(分享)

    直接上代码: 复制代码 代码如下: //验证码类class ValidateCode { private $charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRS ...

  2. VTK初学一，e_Triangle_CellArray三角形的另一种方法绘制

    #ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE_INIT(vtkRend ...

  3. windows系统添加删除用户命令!

    参考:net   help   usernet   help   group Net   user添加或修改用户帐户或者显示用户帐户信息. 语法net   user   [UserName   [Pa ...

  4. 2013区域赛长沙赛区现场赛 K - Pocket Cube

    K - Pocket Cube Time Limit:10000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Su ...

  5. CodeForces 615B Longtail Hedgehog

    题目: http://codeforces.com/problemset/problem/615/B 题意:题目描述很复杂,但实际上很简单.大意就是连续的几个点组成尾巴,要求尾巴的长度乘以尾巴终点的分 ...

  6. webpack 教程 那些事儿01-webpack是什么

    文章目录 1. 为什么引入webpack? 2. webpack到底是什么? 3. webpack的工作流程理念 4. webpack的使用 4.1. install webpack 5. 分享源码d ...

  7. HDU 5122 K.Bro Sorting（2014北京区域赛现场赛K题 模拟）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5122 解题报告:定义一种排序算法,每一轮可以随机找一个数,把这个数与后面的比这个数小的交换,一直往后判 ...

  8. python 字典 注意点

    dict()构造函数直接从键-值对序列创建字典: >>> >>> dict([('sape', 4139), ('guido', 4127), ('jack', 4 ...

  9. python解释器快捷键

    13. 交互式输入的编辑和历史记录 某些版本的 Python 解释器支持编辑当前的输入行和历史记录,类似于在 Korn shell 和 GNU Bash shell 中看到的功能.这是使用GNU Re ...

  10. [转载]JavaEE学习篇之——JQuery技术详解

    原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...