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支持带x身份证号码验证函数
Aug 10 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
Vue仿Bibibili首页的问题
Jan 21 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
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
javascript之函数直接量(function(){})()
2007/06/29 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
javascript求日期差的方法
2016/03/02 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
jquery添加div实现消息聊天框
2020/02/08 jQuery
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
十条建议帮你提高Python编程效率
2016/02/16 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
《假如》教学反思
2014/04/17 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
自主招生专家推荐信
2015/03/26 职场文书