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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
Python自动重试HTTP连接装饰器
2015/04/28 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python 忽略warning的输出方法
2018/10/18 Python
Django REST framework内置路由用法
2019/07/26 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
部门年终奖分配方案
2014/05/07 职场文书
师德师风自查总结
2014/10/14 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
SQL 聚合、分组和排序
2021/11/11 MySQL
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers