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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
JavaScript中return false的用法
Mar 12 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
vue的路由映射问题及解决方案
Oct 14 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
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
mouse_on_title.js
2006/08/25 Javascript
关于Javascript 的 prototype问题。
2007/01/03 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
Augularjs-起步详解
2016/07/08 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python 接口返回的json字符串实例
2018/03/27 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
python Tensor和Array对比分析
2020/01/08 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
职专应届生求职信
2013/11/16 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Redis Cluster集群动态扩容的实现
2021/07/15 Redis