• 获取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>

  • 相关阅读:
    【LeetCode 41】缺失的第一个正数
    【LeetCode 38】报数
    Scrum立会报告+燃尽图 04
    Scrum立会报告+燃尽图 03
    Scrum立会报告+燃尽图 02
    20191017-2 alpha week 2/2 Scrum立会报告+燃尽图 01
    作业要求20191010-9 alpha week 1/2 Scrum立会报告+燃尽图 07
    20191010-8 alpha week 1/2 Scrum立会报告+燃尽图 06
    Alpha阶段贡献分配规则
    选题 Scrum立会报告+燃尽图 05
  • 原文地址:https://www.cnblogs.com/uman/p/5622290.html
Copyright © 2020-2023  润新知