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与FireFox中的childNodes区别
Oct 20 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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设置session(过期、失效、有效期)
2015/11/12 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
Angular通过指令动态添加组件问题
2018/07/09 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Django与JS交互的示例代码
2017/08/23 Python
Python Flask基础教程示例代码
2018/02/07 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
网络安全方面的面试题
2016/01/07 面试题
StringBuilder和String的区别
2015/05/18 面试题
宣传标语大全
2014/07/01 职场文书
北京英语导游词
2015/02/12 职场文书
体检通知范文
2015/04/21 职场文书
关于做家务的心得体会
2016/01/23 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
Nginx跨域问题解析与解决
2022/08/05 Servers