jQuery中attr()方法用法实例


Posted in Javascript onJanuary 05, 2015

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

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

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

$(selector).attr(name)

参数列表:

参数 描述
name 定义要获取其值的属性名称。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<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="https://3water.com/" />

<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="https://3water.com/" />

<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="https://3water.com/" />

<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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
jQuery实现自定义下拉列表
Jan 05 #Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 #Javascript
jQuery圆形统计图开发实例
Jan 04 #Javascript
jQuery中:selected选择器用法实例
Jan 04 #Javascript
jQuery中:checked选择器用法实例
Jan 04 #Javascript
jQuery中:disabled选择器用法实例
Jan 04 #Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 #Javascript
You might like
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
php简单统计在线人数的方法
2016/05/10 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
详解python进行mp3格式判断
2016/12/23 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
详解python 内存优化
2020/08/17 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
Java程序员面试90题
2013/10/19 面试题
机械工程师的岗位职责
2013/11/17 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
搞笑婚前保证书
2015/02/28 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
python字符串的多行输出的实例详解
2021/06/08 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android