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 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
实战node静态文件服务器的示例代码
Mar 08 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
js实现碰撞检测
Jan 29 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
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
深入php多态的实现详解
2013/06/09 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
Use Word to Search for Files
2007/06/15 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python入门篇之面向对象
2014/10/20 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
使用python生成目录树
2018/03/29 Python
python线程池threadpool实现篇
2018/04/27 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
python实现飞船大战
2020/04/24 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
员工自我鉴定
2013/10/09 职场文书
音乐专业自荐信
2014/02/07 职场文书
教研处工作方案
2014/05/26 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
教师党员个人整改措施
2014/10/27 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
Python+Appium新手教程
2021/04/17 Python
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
python神经网络ResNet50模型
2022/05/06 Python