Misswangdapao 2016-07-16
我们可以设置html标签的自定义属性,例如:
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript" src="common_util.js"></script> <title>自定义属性</title> <script type="text/javascript"> $(function (event) { $('#firstLi').attr('title','这是title').attr('abc','062'); }) var getLiValue=function (event) { var source=event.target; $(source).parent().append('<div>'+$('#firstLi').attr('abc')+'</div>') } </script> </head> <body> <ul> <li id="firstLi" >畅捷通信息技术股份有限公司安保部</li> <li></li> </ul> <div> <div onclick="getLiValue(event)" >获取li的abc属性</div> </div> </body> </html>
我设置了li标签的自定义属性,名称是"abc"(见上例),理论上,我可以设置任意名称的自定义属性,我想叫什么名字就叫什么名字.
自定义属性是相对于内置属性来说的,
内置属性比如 class,style,title等
如何设置自定义属性呢?
使用jQuery有两种方式:
(a)使用attr方法
$('#firstLi').attr('title','这是title').attr('abc','062');
attr有两个参数,第一个参数表示自定义属性名称,第二个参数表示要设置的自定义属性值
(b)使用data方法
设置值:
$('#firstLi').data('id','888');
但是注意一点:使用data设置自定义属性值,在html代码中是看不到的.
使用原生js方法设置自定义属性
/*** * set custom attribute * @param htmlNode22 * @param attr22 * @param attrValue */ com.whuang.hsj.setCustomAttr=function(htmlNode22,attr22,attrValue) { if('length' in htmlNode22){ htmlNode22=htmlNode22[0]; } if(htmlNode22.setAttribute===undefined) { htmlNode22.attributes[attr22].nodeValue = attrValue; }else{ htmlNode22.setAttribute(attr22,attrValue); // 设置自定义属性的值 } };
获取自定义属性值:
/*** * get custom attribute * is same as jquery attr().eg:var inputId=$(this).attr('targetTF'); * @param htmlNode22 * @param attr * @returns {*} */ com.whuang.hsj.getCustomAttr=function(htmlNode22,attr) { if('length' in htmlNode22){//jquery 对象 htmlNode22=htmlNode22[0]; } var hospitalId=htmlNode22[attr]; if(hospitalId==undefined||hospitalId==null){ hospitalId=htmlNode22.getAttribute(attr); } if(hospitalId==undefined||hospitalId==null){ if(htmlNode22.attributes){ hospitalId=htmlNode22.attributes[attr].nodeValue; } } return hospitalId; };
下面着重介绍一个设置自定义属性的坑
ul 中的li定义的value会自动转换为int.数值,ie 浏览器下大于int最大值,显示int最大值,其他浏览器显示为0.而且无论你定义什么值,都会转int.默认为1,例如value=中文。所以如果你想要实现正确取值,就需要换一个li属性例如自定义属性time.或者改一种实现标签元素,例如div.都可以
参考:
http://blog.csdn.net/hw1287789687/article/details/51426825(
)