Jquery attr()方法 属性赋值和属性获取详解


Posted in Javascript onApril 15, 2016

jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式。

1.  attr( 属性名 )        //获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined )

2.  attr( 属性名, 属性值 )    //设置属性的值 (为所有匹配的元素设置一个属性值。)

3.  attr( 属性名 , 函数值 )      //设置属性的函数值  (为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。)

4. attr(properties)      //给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)

示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery中attr()方法</title>

<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>

<style>

p{color:red}

li{color:blue;}

.lili{font-weight:bold;color:red;}

#lili{font-weight:bold;color:red;}

</style>

</head>

<body>

<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>

<ul>

<li title="苹果汁">苹果</li>

<li title="橘子汁" alt="123">橘子</li>

<li title="菠萝汁">菠萝</li>

</ul>

<script>

...

</script>

</body>

<html>

1.attr(name)//获取属性的值

1.1使用attr(name)获取title值:

<script>

alert($("ul li:eq(1)").attr("title"));

</script>

结果:   显示 橘子汁

1.2使用attr(name)获取alt值:

<script>

alert($("ul li:eq(1)").attr("alt"));

</script>

结果:

显示123

2. attr(name,value)   //设置属性的值

2.1使用attr(name,value)修改title值为:不吃橘子

<script>

$("ul li:eq(1)").attr("title","不吃橘子");

alert($("ul li:eq(1)").attr("title"));

</script>

结果:

显示不吃橘子

3. attr(name,fn)  //设置属性的函数值

3.1把alt属性的值设置为title属性的值。

<script>

$("ul li:eq(1)").attr("title",function(){ return this.alt});

alert($("ul li:eq(1)").attr("title"));

</script>

结果:

显示123

4.attr(properties)  //将一个“名/值”形式的对象设置为所有匹配元素的属性

4.1获取<ul>里第2个<li>设置title和alt属性。

<script>

$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});

alert($("ul li:eq(1)").attr("title"));

alert($("ul li:eq(1)").attr("alt"));

</script>

结果:

显示2个,不喝橘子汁   不是123

4.2获取<ul>里第2个<li>设置class。

<script>

$("ul li:eq(1)").attr({className:"lili"});

</script>

结果:

<li title="苹果汁">苹果</li>

<li class="lili" alt="123" title="橘子汁">橘子</li>

<li title="菠萝汁">菠萝</li>

4.3获取<ul>里第2个<li>设置id。

<script>

$("ul li:eq(1)").attr({id:"lili"});

</script>

结果:

<li title="苹果汁">苹果</li>

<li class="lili" alt="123" title="橘子汁">橘子</li>

<li title="菠萝汁">菠萝</li>

4.4获取<ul>里第2个<li>设置style。

<script>

$("ul li:eq(1)").attr({style:"color:red"});

</script>

结果:

<li title="苹果汁">苹果</li>

<li class="lili" alt="123" title="橘子汁" style="color:red">橘子</li>

<li title="菠萝汁">菠萝</li>

在 li中添加alt是错误的,它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。在这里为了很详细说明attr()方法,没有合适的属性,所有用了alt进行举例,只供学习参考attr()方法用法。

在此说明下alt和tite的区别。

alt:这是用以描述图形的文字,当图片无法显示时,这些文字会替代图片而被显示。当鼠标移至图片上该些文字亦会显示。

title:是鼠标放上去之后,会显示出来的文字。

那么怎么删除属性呢?

jquery中删除属性的关键词是: removeAttr 注意A是大写的. 看看怎么用的:

同样是用法一中的html代码, 我想删掉li的title属性, 那么就这样:

<script>

$("ul li:eq(1)").removeAttr("title");

</script>

 就这么简单, attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了。

那么是否有跟attr()相似的属性呢?

jquery中val()与之类似,

$(this).val();获取某个元素节点的value值,相当于$(this).attr("value");

$(this).val(value);设置某个元素节点的value值,相当于$(this).attr("value",value);

以上这篇Jquery attr()方法 属性赋值和属性获取详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript代码复用模式实例分析
Dec 02 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
js实现上传图片到服务器
Apr 11 Javascript
浅谈react useEffect闭包的坑
Jun 08 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 #Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 #Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 #Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 #Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 #Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 #Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 #Javascript
You might like
桌面中心(四)数据显示
2006/10/09 PHP
PHP页面间传递参数实例代码
2008/06/05 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
一行代码告别document.getElementById
2012/06/01 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
python实现根据文件格式分类
2019/10/31 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Django celery异步任务实现代码示例
2020/11/26 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
九年级体育教学反思
2014/01/23 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
单位授权委托书范本
2014/09/26 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
旷工辞退通知书
2015/04/17 职场文书
庆七一晚会主持词
2015/06/30 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL