jquery 获取自定义属性(attr和prop)的实现代码


Posted in Javascript onJune 27, 2012

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>

结果:
jquery 获取自定义属性(attr和prop)的实现代码
1.2使用attr(name)获取alt值:
<script> 
alert($("ul li:eq(1)").attr("alt")); 
</script>

结果:
jquery 获取自定义属性(attr和prop)的实现代码
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>

结果:
jquery 获取自定义属性(attr和prop)的实现代码
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>

结果:
jquery 获取自定义属性(attr和prop)的实现代码
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>

结果:
jquery 获取自定义属性(attr和prop)的实现代码jquery 获取自定义属性(attr和prop)的实现代码
4.2获取<ul>里第2个<li>设置class。
<script> 
$("ul li:eq(1)").attr({className:"lili"}); 
</script>

结果:
jquery 获取自定义属性(attr和prop)的实现代码
4.3获取<ul>里第2个<li>设置id。
<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

结果:jquery 获取自定义属性(attr和prop)的实现代码

4.4获取<ul>里第2个<li>设置style。
<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

结果:jquery 获取自定义属性(attr和prop)的实现代码

在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);

Javascript 相关文章推荐
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
javascript 用函数实现继承详解
May 28 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
Vue实现简单的跑马灯
May 25 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 #Javascript
跨浏览器的事件对象介绍
Jun 27 #Javascript
UI Events 用户界面事件
Jun 27 #Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 #Javascript
浅谈Javascript事件模拟
Jun 27 #Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 #Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 #Javascript
You might like
php过滤敏感词的示例
2014/03/31 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
vue-axios使用详解
2017/05/10 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python爬虫实例详解
2018/06/19 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
大学生实习证明范本
2014/01/15 职场文书
技能竞赛活动方案
2014/02/21 职场文书
跳槽求职信范文
2014/05/26 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
python基础之错误和异常处理
2021/10/24 Python
Python实现视频中添加音频工具详解
2021/12/06 Python
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python