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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
Angular中$compile源码分析
Jan 28 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
vue-dialog的弹出层组件
May 25 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 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
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
python简单实现获取当前时间
2016/08/27 Python
Python中functools模块函数解析
2017/03/12 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
python字典的常用方法总结
2019/07/31 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
安全责任书范文
2014/03/12 职场文书
青春演讲稿范文
2014/05/08 职场文书
领导欢迎词范文
2015/01/26 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书