jquery获取自定义属性(attr和prop)实例介绍


Posted in Javascript onApril 21, 2013

$("form").attr("check"); $("form").prop("check"); 两种都可以,不过新版jquery推荐第二种,两个在其他方面都差不多,我发现的唯一不同就是在checkbox上的时候,需要用prop,不然IE浏览器会不兼容

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<scripttype="text/javascript"src="/js/jq1.3.2.js"></script> 
</head> 
<body> 
<divlang="rrery"> </div> 
<divdata-url="rrery"> </div> 
<divdata-url="rrrrrrrrrrrrrrttttttttttttttttttttttgggggggggggggggggggggg"> </div> 
<divdata-url="rrrrrrrrrrrrrrrrrrrrrrrrrrttttttttttttttttt777777777777777777777777777777777778888888888455rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrtttttttttttttttttttttttttttt777777777777777777777777777777777778888888888888"> </div> 
</body> 
</html> 
<script> 
// var J = $("div[lang]").get(); 
// alert($("[data-url]:eq(2)").attr("data-url")); 
$("[data-url]").each(function () { 
alert($(this).attr("data-url")); }); 
// $("[data-url]").each(function () { 
// alert($(this).prop("data-url")); // }); 
</script>

附:jquery attr()方法jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式。

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和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
易被忽视的js事件问题总结
May 14 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
svg动画之动态描边效果
Feb 22 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
js和jquery对dom节点的操作(创建/追加)
Apr 21 #Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 #Javascript
jQuery获取注册信息并提示实现代码
Apr 21 #Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 #Javascript
jQuery模拟超链接点击效果代码
Apr 21 #Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 #Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 #Javascript
You might like
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP 编程安全性小结
2010/01/08 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
小程序实现分类页
2019/07/12 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
python简单实例训练(21~30)
2017/11/15 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
暑假学习心得体会
2014/09/02 职场文书
原告代理词范文
2015/05/25 职场文书
靠谱准确的求职信
2019/04/02 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
如何用python反转图片,视频
2021/04/24 Python
Python图片处理之图片裁剪教程
2021/05/27 Python