本文实例讲述了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. 梳理javascript原型整体思路

    相信很多对javascript原型初步了解的人都知道prototype,constructor,__proto__这些名词,也在一定程度上可以使用这些对象.属性.甚至知道在构造函数的原型上定义方法供实 ...

  2. Mastering Web Application Development with AngularJS 读书笔记-前记

    学习AngularJS的笔记,这个是英文版的,有些地方翻译的很随意,做的笔记不是很详细,用来自勉.觉得写下来要比看能理解的更深入点.有理解不对的地方还请前辈们纠正! 一.关于<Mastering ...

  3. PHP 数组的遍历的几种方式（以及foreach与for/while+each效率的比较）

    * 使用foreach遍历数组时要注意的问题: * 1.foreach在遍历之前会自动重置指针使用其指向第一个元素,所以foreach可以多次遍历 * 2.foreach遍历完成之后,指针是没有指向数 ...

  4. 关于COOKIE学习的一二

    index.php <?php setcookie("name","dalisng",time()+3600); setcookie("addr ...

  5. 【C语言入门教程】2.9 小结

    本章介绍 C 语言的基本组成部分,数据类型.运算符 和 表达式 构成了 C 语言的语法,熟悉和掌握这些信息是学习 C 语言的必经之路.C 语言具备严谨的语法结构,任何细微的差错可导致程序无法通过编译, ...

  6. 给Storyboard设置初始页面（Initial Controller）

    原文:https://developer.apple.com/library/ios/recipes/xcode_help-IB_storyboard/Chapters/SetInitialContr ...

  7. C++ 错误总结

    1.出现不完全的类型‘class CJdThread’的非法使用或前向声明 src/../include/ComCommon.h:37:27: 错误:对不完全的类型‘class CJdThread’的 ...

  8. ubutu安装搜狗

    1.下载deb文件 下载32位 wget "http://pinyin.sogou.com/linux/download.php?f=linux&bit=32" -O &q ...

  9. springmvc之默认错误页面跳转

    在做一个项目的时候,为了界面美观及用户体验,我们往往会设计自己的错误跳转页面,而不是直接展示给用户一堆错误码,为此我们需要配置自己的错误跳转页面. 1.项目结构 2.web.xml <!DOCT ...

  10. APPCAN MAS接口之AJAX

    1.打开APPCAN IDE,文件→新建→MAS服务 2.新建MAS项目 3.新建MAS接口,访问地址http://mobile.163.com/special/chuangye/ 4.修改if_cy ...