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 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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 stripslashes和addslashes的区别
2014/02/03 PHP
php数组转成json格式的方法
2015/03/09 PHP
修改发贴的编辑功能
2007/03/07 Javascript
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
常用jQuery代码分享
2015/07/14 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
vue做网页开场视频的实例代码
2017/10/20 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
apache部署python程序出现503错误的解决方法
2017/07/24 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python 重命名轴索引的方法
2018/11/10 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
python修改文件内容的3种方法详解
2019/11/15 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
华为的Java面试题
2014/03/07 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
工程承包协议书
2014/04/22 职场文书
党支部对照检查材料
2014/08/25 职场文书
经济纠纷起诉状
2015/05/20 职场文书
小学毕业感言200字
2015/07/30 职场文书
高一化学教学反思
2016/02/22 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript