15天学会jQuery编程与实战（视频教学版） （Web前端技术丛书）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.2 获取或设置元素的属性

获取和设置属性使用jQuery的attr方法，而移除属性使用removeAttr方法。获取元素属性的attr方法的语法如下：

$(selector).attr(attribute)

其中，selector是jQuery的选择器，attr中的参数attribute是指定要获取的元素的属性名称。举个简单的例子，要想获取图像的地址，可以使用如下语句：

$("img").attr("src");

【示例3-2】get_set_attributes.html

        01    <body>
        02    <ul id="nav">
        03    <li><a href="http://www.xxx.com/companyinfo" id="company_info" title="
    介绍公司的相关资讯04  ">
        05   公司信息</a></li>
        06    <li><a href="http://www.xxx.com/productinfo" id="product_info" title="
    公司的产品信息">
        07   产品简介</a></li>
        08    <li><a href="http://www.xxx.com/companyculture" id="culture_info"
    title="公司的文化信息">
        09   公司文化</a></li>
        10   <li><a href="http://www.xxx.com/contactus" id="contactus" title="联系方式
    ">联系我们</a>
        11    </li></ul>
        12    <div id="content"></div>
        13   <! --属性信息显示如下-->
        14    <div id="attr_info">
        15   <input id="btn_getAttr" type="button" value="显示属性信息">
        16    </div>
        17    </body>

在这里构建了一个菜单，用作网站的导航栏。id为btn_getattr的按钮将获取页面上DOM的不同属性值，代码如下：

        <script type="text/javascript">
          $(document).ready(function(e) {
              $("#btn_getAttr").click(function(e) {
            var str="<br\>"+$("#company_info").attr("title");
                                                  //显示id为company_info的title属性值
            str+="<br\>"+$("#product_info").attr("href");
                                                  //显示id为product_info的href属性值
            str+="<br\>"+$("#culture_info").attr("id");
                                                  //显示id为culture_info的id属性值
            str+="<br\>"+$("#btn_getAttr").attr("value");
                                                  //显示id为btn_getAttr的value属性值
              $("#attr_info").append(str);        //在div中显示属性的值
            });
          });
        </script>

在示例代码中，使用attr分别获取4个HTML元素的属性值，并保存到str字符串中。通过运行可以看到，不同属性值已经成功显示到了页面上。

设置和获取的方法是一样的。下面为上述案例添加一个按钮，在jQuery的页加载事件中通过如下代码设置DOM元素的属性：

        $("#btn_setAttr").click(function(e) {
              $("company_info").attr("title", "公司的发展历程和发展经验"); //设置title属性
            $("#product_info").attr("href", "http://www.microsoft.com");
        //设置href属性
              $("#culture_info").attr("id", "btn_culture_info");       //设置id属性
              $("#contactus").attr("title", "欢迎联系我们来获取更多信息");
                                                              //设置联系人的title属性
            });

可以看到，使用attr设置属性是使用“属性名称：属性值”匹配的语句，attr可以同时设置两个以上的属性值，代码如下：

            //同时设置两个属性的值
           $("#company_info").attr({
            "href":"http://www.microsoft.com/",
            "title":"欢迎进入微软公司网站"
           });

可以看到，通过属性名/值对的方式，示例同时为href和title两个属性设置了属性值。本示例效果如图3.3所示。

图3.3 获取元素的属性值

上一章目录下一章