使用jQuery获取HTML元素属性-优快云博客

本文介绍了一种利用jQuery库来获取HTML页面中指定元素属性的方法。通过一个简单的实例展示了如何提取不同链接的属性信息，并将这些信息动态地展示在网页上。

html：

<!DOCTYPE >
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "微软雅黑", "arial", " sans-serif";
        }
    </style>
    <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#btn_getAttr").click(function () {
var str = "<br\>" + $("#company_info").attr("title");
str += "<br\>" + $("#product_info").attr("href");
str += "<br\>" + $("#culture_info").attr("id");
str += "<br\>" + $("#btn_getAttr").attr("value");
                $("#attr_info").append(str);
            })
        })
    </script>

</head>

<body>
<ul>
    <li><a href="" id="company_info" title="介绍公司的相关资讯">公司信息</a></li>
    <li><a href="https://www.baidu.com/" id="product_info" title="介绍公司的相关资讯">产品简介</a></li>
    <li><a href="" id="culture_info" title="介绍公司的相关资讯">公司文化</a></li>
    <li><a href="" id="contactus" title="介绍公司的相关资讯">联系我们</a></li>
</ul>


<div id="attr_info" style="border: 1px red solid;">
    <input id="btn_getAttr" type="button" value="显示属性信息"/>
</div>
</body>

</html>