jQuery使用之标记元素属性用法实例

2020-05-23 06:05:30易采站长站整理

<div>
    <p id=”001″ title=”isaac,hobby”>第一段</p>
    <p id=”002″ title=”isaac,hobby”>第二段</p>
    <p id=”003″>第二段</p>
    <p id=”004″>第二段</p>
    <p id=”005″>第二段</p>
    <p id=”006″>第二段</p>
    <p id=”007″>第二段</p>
    <span id=”display”></span>
</div>

如果,想获取第二个p的title属性值,则可以通过位置选择器来完成。
$(function() {
 var sTitle = $(“p:eq(1)”).attr(“title”);//获取第2个p元素的title属性值
 $(“#display”).text(sTitle);
});
3.设置属性的值。attr(name,value)

attr()方法除了可以获取元素的值外,还可以设置属性的值,通用 的表达式为
attr(name,value)
例如:下面代码将使页面的超链接都在新窗口打开。
<script type=”text/javascript”>
    $(function() {
    $(“a[href*=http]”).attr(“target”,”_blank”);
    });
</script>
例子:
<script type=”text/javascript”>
    function DisableBack() {
 $(“button:gt(0)”).attr(“disabled”, “disabled”);
    }
</script>
<div>
    <button onclick=”DisableBack()”>第一个Button</button> 
    <button>第二个Button</button> 
    <button>第三个Button</button> 
</div>

通过位置选择器,当单击第一个按钮时,后面两个按钮同时被禁用。

很多时候,我们希望属性的值能根据不同的元素有规律的变化。这个时候我们可以使用attr(name,fn),第二个参数为一个函数。该函数接受一个参数,为元素的序号,返回值为字符串。
<script type=”text/javascript”>
    $(function() {
 $(“div”).attr(“id”, function(index) {
     //将id设置为序号相关的参数
     return “div-id” + index;
 }).each(function() {
     //找到每一项的span标记
     $(this).find(“span”).html(“(id='” + this.id + “‘)”);
 });
    });
</script>
<div>第0项 <span></span>