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 相关文章推荐
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
jquery中radio checked问题
Mar 16 Javascript
require.js的用法详解
Oct 20 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
js date 格式化
Feb 15 Javascript
Vue实现选择城市功能
May 27 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
JS快速实现简单计算器
Apr 08 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系统流量分析的程序
2006/10/09 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
php实现分页显示
2015/11/03 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
javascript中怎么做对象的类型判断
2013/11/11 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
原生js实现日历效果
2020/03/02 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
python实现windows下文件备份脚本
2018/05/27 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
python中pyplot基础图标函数整理
2020/11/10 Python
python 如何对logging日志封装
2020/12/02 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
Html5 localStorage入门教程
2018/04/26 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
学校消防演习方案
2014/02/19 职场文书
初三学习决心书
2014/03/11 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
培训讲师开场白
2015/06/01 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python