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 相关文章推荐
jquery构造器的实现代码小结
May 16 Javascript
UI Events 用户界面事件
Jun 27 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
javascript回调函数详解
Feb 06 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
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
PHP中路径问题的解决方案
2006/10/09 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
python 中split 和 strip的实例详解
2017/07/12 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
django列表筛选功能的实现代码
2020/03/27 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
校园安全标语
2014/06/07 职场文书
查摆剖析材料范文
2014/09/30 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
导游词之上海豫园
2019/10/24 职场文书