本文实例讲述了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. rose中设置组合

    1.在工具栏选择 "association" (关联).2.编辑role B 属性 open specital , role B detail ,multiplic(重数) 为1, ...

  2. Backbone事件模块源码分析

    事件模块Backbone.Events在Backbone中占有十分重要的位置,其他模块Model,Collection,View所有事件模块都依赖它.通过继承Events的方法来实现事件的管理,可以说 ...

  3. 【C语言入门教程】4.3 多维数组

    多维数组是指拥有多组小标的数组,维数的限制有具体编译器决定.多维数组的一般声明形式为: 数据类型 数组名[长度1][长度2]......[长度n]; 数组的总长度等于每组下标长度的乘积.多维数组使用连 ...

  4. 安卓自动化测试（2）Robotium环境搭建与新手入门教程

    Robotium环境搭建与新手入门教程 准备工具:Robotium资料下载 知识准备: java基础知识,如基本的数据结构.语法结构.类.继承等 对Android系统较为熟悉,了解四大组件,会编写简单 ...

  5. json不转化值是null的字段

    今天写东西,发现JSONObject.fromObject(),方法,会把value是null的字段,转为0或"",就自己写了一个方法,如果value是null就不转换 packa ...

  6. struts2-(2)HelloWorld

    1.环境配置 1).进入http://struts.apache.org/download.cgi#struts23241 下载 struts官方源码 2).解压,进入apps/struts2-bla ...

  7. 校友聊NABCD

    特点之一     界面简洁 N:软件的界面是软件成功的必要条件,界面简洁,用户使用方便,就会吸引用户. A:界面可用多种做法做,暂定用C# B:简洁的界面,用户易于理解各项功能,方便使用. C:没有其 ...

  8. centos7 静态ip设置

    TYPE=Ethernet BOOTPROTO=static DEFROUTE=yes IPV4_FAILURE_FATAL=no IPV6INIT=yes IPV6_AUTOCONF=yes IPV ...

  9. 客户端安全-csrf

    1.需求 理解并掌握CSRF攻击和防御 2.csrf的产生 盗个图说明(http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html) B伪 ...

  10. [codeforces 339]D. Xenia and Bit Operations

    [codeforces 339]D. Xenia and Bit Operations 试题描述 Xenia the beginner programmer has a sequence a, con ...