获取input标签的所有属性
1.用jquery
$("input[name='btnAdd']").attr("value")
获取value属性值,其它属性换attr的参数就OK
例1:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="box">
<span>点击按钮获取文本框的name属性值:</span><br>
<div class="content">
<input type="text" name="test" value="这个文本框的name属性值为test">
</div>
<input type="button" class="btn" value="获取文本框name值">
</div>
<script>
$(function(){
$("input:button").click(function() {
alert($("input:text").attr("name"));
});
})
</script>
</body>
</html>
例2:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="testDivID" name="testDivName" value="divTagValue" defMyTag="Lionbule">1</div>
<script>
(function(){
var id = document.getElementById("testDivID").attributes["id"].value;
var name = document.getElementById("testDivID").attributes["name"].value;
var value = document.getElementById("testDivID").attributes["value"].value;
var myTag = document.getElementById("testDivID").attributes["defMyTag"].value;
alert(id +" "+ name +" "+value+" "+myTag);
})();
</script>
</body>
</html>
在IE8、Firefox3.6、Chrome6.0下测试通过。换句话说,用上述获取标签属性值的方式通用、可靠。
但在实验过程中出现一个问题。如果div容器的内容为空或空格,则只有chrome能正常执行,IE、firefox均报出“document.getElementById("testDivID") is null.”。所以我在例子中特意写了个1,无奈而为之。
获取html中任意标签的属性值均可采用如下方式:
document.getElementById("xxx").attributes["***"].value;
------------------------------------------------------------------------------------------------------------------------
2.通过点来获取:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="form1" name="form1">
<input name="n1" type="text" />
<input name="n3" type="text" />
<input name="n4" type="text" />
</form>
<script>
window.onload = function(){
var inputs = document.form1.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function(){
alert(this.name);
};
}
};
</script>
</body>
</html>
例:
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<input type="button" onclick="showTable('mailTable');" value="遍历table"/>
<input type="button" onclick="showTd('aa');" value="取得td的index"/>
<table id="mailTable">
<tr>
<td name="god" id="aa"><input name="input1" value="th00" hidden="343434" ></td>
<td id="ab">wo</td>
</tr>
<tr >
<td name="god" id="ba"><input name="input3" hidden="aaa" ></td>
<td name="god" id="bb"><input name="input4" hidden="bbb" ></td>
</tr>
<tr>
<td id="ca"><input name="input5" value="th20"></td>
<td id="cb"><input name="input6" value="th21"></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
function showTable(id){
var tb=document.getElementById(id);
var rows=tb.rows;
for(var i=0;i<rows.length;i++){
var cells=rows[i].cells;
for(var j=0;j<cells.length;j++){
alert("获得的$(cells[j]).attr('name'):"+$(cells[j]).attr("name"));
if ($(cells[j]).attr("name")=="god"){
alert("name=" +cells[j].childNodes[0].name +" value="+ cells[j].childNodes[0].value + " hidden=" +cells[j].childNodes[0].hidden ); //.hidden返回的是true/false
}
}
}
}
function showTd(id){
var td=document.getElementById(id);
var cell=td.parentElement;
var cells=cell.cells;
alert("cell.cells:"+cell.cells+" ,cell:"+cell);
alert("cells[0]:"+cells[0]+" ,$(cells[0]).attr('name'):"+$(cells[0]).attr('name'));
alert("cells[0].childNodes[0].name:"+cells[0].childNodes[0].name);
alert(cells[0].cellIndex);
}
//<input>的name属性可以通过.name来获取,而<td>的那么属性不能,但可以通过attr("name")来获取
</SCRIPT>
</body>
</html>
获取input标签的所有属性的更多相关文章
- 有趣的js获取input标签中光标的索引
先看动图如下,我们就可以很清楚的知道获取input标签中光标的索引的意思了. 由于IE支持document.selection,Firefox,Chrome,Safari以及Opera都有select ...
- 如何获取Input标签自定义属性的值?
HTML代码: <input type="hidden" value="${Name?if_exists}" id='ID' busCode = &quo ...
- react 获取input标签的输入值
参考:https://segmentfault.com/a/1190000012404114 两种方法,受控组件和非受控组件. 推荐使用受控组件,即通过this.state获取,因为其符合react规 ...
- 关于获取input标签属性的获取以及更改,此处用到的是readonly属性
一开始,我使用的是Jquery框架中的$.("#input").readOnly,发现取出的值为undefined,不知道是不是jQuery中不支持获取标签属性的函数, 然后就使用 ...
- 获取input标签中file的内容
1.直接获取文件中的内容: <form id="form" method="post" enctype="multipart/form-data ...
- javascript笔记——js获取input标签中光标的索引
出处:http://www.cnblogs.com/MrZouJian/p/5850553.html function getTxt1CursorPosition(){ var oTxt1 = doc ...
- 获取input标签的值
取文本框值 AfterTiltle: $("[name='AfterTiltle']").val(), 取下拉列表值 AfterType: $("[name='After ...
- 如何用input标签上传多个图片并回显
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file ...
- 获取input type=file 的文件内容(纯文本)
一.获取input type=file 的文件内容(纯文本) 1.需求一 通过点击其他事件,来触发 文件选择框(限定格式为 .c 文件),而不是手动鼠标点击触发. [思路:] step1:将 inpu ...
随机推荐
- 删除浏览器浏览器删除cookie方法
上班之余抽点时光出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下删除浏览器 文章目录导航 适用范围及演示工具 什么是cookie? cookie有什么作用? ie6/ie7/ie8 ...
- 在Linux下安装C/C++开发工具包的最佳方式
假设你使用的是Fedora, Red Hat, CentOS, 或者 ScientificLinux 系统,使用以下的命令安装GNU的C/C++开发包和编译器. # yum groupinstall ...
- ABAP 常用系统变量
SY-ABCDE 常量,A-Z字母表SY-BATCH 后台的程序运行SY-COLNO:当前选定列的列号SY-CPAGE 列表的当前显示页SY-CUCOL 屏幕,PAI 的水平光标位置SY-CUROW: ...
- C栈stack
栈是一种 特殊的线性表 栈仅能在线性表的一端进行操作 栈顶(Top):允许操作的一端 栈底(Bottom):不允许操作的一端 Stack的常用操作 创建栈 销毁栈 清空栈 进栈 出栈 获取栈顶元素 ...
- STL——迭代器的概念
迭代器是一种抽象的设计概念,现实程序语言中并没有直接对应于这个概念的实物. 1 迭代器设计思维——STL关键所在 不论是泛型思维或STL的实际运用,迭代器都扮演这重要的角色.STL的中心思想在于:将数 ...
- 认识CoreData-多线程
CoreData使用相关的技术点已经讲差不多了,我所掌握的也就这么多了.... 在本篇文章中主要讲CoreData的多线程,其中会包括并发队列类型.线程安全等技术点.我对多线程的理解可能不是太透彻,文 ...
- 有效范围为request的bean
Car.java类 package tom.jiafei; public class Car { String carnumber; String name; String date; public ...
- jemalloc源码结构分析(二):CPU字节对齐算法
在调用arena_malloc_small过程中,要根据申请内存大小,进行对齐计算,然后分配一个整块儿.算法如下: 1)定义一个SIZE_CLASSES宏,它主要用于生成后面两个表,small_siz ...
- Windows2012中安装Nginx并创建为Windows服务
安装Nginx 下载windows版nginx (http://nginx.org/download/nginx-1.10.0.zip),之后解压到需要放置的位置(D:\xampp\nginx) 将N ...
- Python 基础【第五篇】元组和列表
一 .Python之列表: 其实所谓的列表我个人感觉和shell 中的数组是一样的(只是个人见解哦),列表其实说白了就是元素的组合: 格式: Name = [a,b,c,d] 下标: 每一个列表中的元 ...