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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
详解vue-router 命名路由和命名视图
Jun 01 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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
WordPress自定义时间显示格式
2015/03/27 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
Python中的变量和作用域详解
2016/07/13 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
基于Django用户认证系统详解
2018/02/21 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
深入了解Python enumerate和zip
2020/07/16 Python
Python中bisect的用法及示例详解
2020/07/20 Python
一个精品风格的世界:Atterley
2019/05/01 全球购物
《要下雨了》教学反思
2014/02/17 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
体育个人工作总结
2015/02/09 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android