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中Array 对象相关的几个方法
Dec 22 Javascript
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 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 常用字符串函数总结
2008/03/15 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
自制PHP框架之设计模式
2017/05/07 PHP
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
学习python类方法与对象方法
2016/03/15 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Python3解释器知识点总结
2019/02/19 Python
简单了解python中的与或非运算
2019/09/18 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
什么是python的列表推导式
2020/05/26 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
python操作链表的示例代码
2020/09/27 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
网上卖盒饭创业计划书
2014/01/26 职场文书
入党自我评价范文
2014/02/02 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
四风之害观后感
2015/06/09 职场文书
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers