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 相关文章推荐
JavaScript类和继承 prototype属性
Sep 03 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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/12/08 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Numpy的简单用法小结
2019/08/28 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
三星美国官网:Samsung美国
2017/02/06 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
安全标语口号
2014/06/09 职场文书
采购员岗位职责范本
2015/04/07 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript