我们可以设置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.都可以
参考:
html li标签设置value诡异的问题
http://hw1287789687.iteye.com/blog/2261455
http://blog.csdn.net/hw1287789687/article/details/51426825(
IE8 兼容性问题
)
相关推荐
假设我们需要处理一段包含多个 `<li>` 元素的 HTML 代码，并希望为每个 `<li>` 设置一个自定义属性来控制其内容的最大长度，可以按照以下步骤实现： 1. **HTML 代码**：为每个 `<li>` 添加 `data-textlength` 属性...
本教程将聚焦于如何使用jQuery给HTML标签添加自定义属性，这在增强网页元素功能和实现特定逻辑时十分有用。 首先，让我们了解一下自定义属性。在HTML5中，允许开发者为元素添加非标准的属性，这些属性通常以"data-...
HTML5如何添加自定义标签属性(data-自定义属性).zip
### option自定义属性的作用及其应用 #### 一、引言 HTML 作为构建网页的基础语言之一，提供了多种标签用于创建动态且丰富的...同时，自定义属性的概念也可以推广到其他 HTML 标签中，进一步拓展了 HTML 的应用范围。
自定义属性是开发者为了满足特定需求而在HTML标签上添加的非标准属性。例如，在提供的代码片段中，`<img>`标签包含了多个自定义属性，如`msrc`, `infoType`, `id`, `moduleId`, `chsDesc`, `engDesc`, `chsName`, `...
4. **实现`doEndTag()`方法**：这个方法在标签结束时调用，用于完成标签的任何清理工作，如关闭开始标签时打开的HTML标签。 5. **编写TLD文件**：TLD（Tag Library Descriptor）文件描述了标签库中的所有标签，包括...
在JavaServer Pages (JSP)技术中，自定义标签是扩展JSP功能的重要方式，它允许开发者创建可重用的组件，类似于HTML标签但具备更强大的功能。自定义标签可以包含复杂的业务逻辑，并且可以通过XML样式的语法进行调用，...
JSP标签是JSP中的一个重要组成部分，它们类似于HTML标签，但提供了更丰富的功能和灵活性。JSP标签可以分为三种类型：动作标签（）、简单标签（）和自定义标签（）。自定义标签是开发者根据需求创建的，可以封装复杂...
HTML标签属性可以分为两大类：通用属性和自定义属性。通用属性是所有HTML标签都拥有的属性，如id、class、style、title等。自定义属性是指开发者可以根据需要添加的属性，使用data-*的方式命名。 2.1 HTML标签属性 ...
自定义标签遵循驼峰式命名规则，如`<my-component>`，并应避免使用保留关键字或已有的HTML标签名。 1. **定义自定义标签**：在HTML文档中，可以直接使用`<custom-tag>`形式创建新的标签。但需要注意的是，为了让...
自定义标签可以看作是HTML标签的扩展，它们遵循特定的格式，并且能够嵌入Java代码。这种分离程序逻辑和表示逻辑的方式有助于团队协作，使得设计师专注于页面布局，而开发者专注于业务逻辑。 自定义标签的使用通常...
在模板文件中，你可以像使用普通HTML标签一样使用自定义标签： ``` 张三" age="25"> ``` ThinkPHP会自动将这些自定义标签转换为你在`parse()`方法中处理后的结果。 6. **注册自定义标签** 最后，你需要在配置...
JSP自定义标签提供了类似HTML标签的语法结构，通过自定义标签，开发者可以封装复杂的Java代码，使得页面更加简洁易读。简单标签机制无需提供标签体，仅通过标签属性传递参数。 1.2 使用标签文件 除了简单的标签机制...
首先，HTML标签中的自定义属性是开发者为了存储特定信息而在标准HTML属性之外添加的属性。例如，对于一个列表项`<li>`，我们可能会添加如`sortid`、`name`等属性来标识或分类列表项。 遍历标签中的自定义属性，我们...
在JSP中，自定义标签是通过TLD（Tag Library Descriptor）文件定义的，它允许开发者创建类似于HTML标签的自定义组件。这些标签可以封装Java代码，提供更清晰、更易于维护的视图层。自定义标签的实现通常包括两个部分...
在jQuery的attr与prop提到过在IE9之前版本中如果使用...使用data-*可以解决自定义属性混乱无管理的现状。 读写方式 data-*有两种设置方式，可以直接在HTML元素标签上书写 Click Here 其中的data-age就是一种自定
例如，假设我们有一个a标签，我们希望存储一个特定的标识符在该标签上，我们可以添加一个如下所示的自定义属性： ```html (this)">点击我 ``` 在这里，`data-ownattr`就是一个自定义属性，其值为"value"。 在传统...
自定义标签是JSP的一种扩展，允许开发者创建自己的HTML标签，这些标签可以封装复杂的业务逻辑，使得视图层更加简洁。在Struts2中，自定义标签通常由Action类和结果页面共同完成，提供了一种声明式编程的方式，降低了...
自定义标签是JSP中的一种高级特性，它允许开发者创建类似于HTML标签的自定义组件。这种组件可以封装复杂的业务逻辑或视图展示，提供了一种更面向对象的方式来编写JSP页面。 1. **创建自定义标签** - 定义Tag接口：...
Java自定义标签是JSP技术中的一个重要特性，允许开发者创建可重用的自定义组件，这些组件可以像HTML标签一样在JSP页面中使用，增强了代码的可读性和可维护性。在Java中，自定义标签是通过实现特定的接口或继承已有的...