attr() 使用方法

定义和用法

attr() 方法设置或返回被选元素的属性值。根据选择 attr()方法 不同的参数，工作方式也会有点差异。

 

返回属性值-返回被选元素的属性值。

　　语法

$(selector).attr(attribute)

 

参数

描述

selector

被选元素

attribute

规定要获取被选元素(selector)的属性

 

例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>learning notes</title>
    <script src="js/jquery.min.js"></script>
</head>
<style>
    body {
        color: #FFF;
    }
</style>

<body>
    <a href="http://www.xxx.com/">xxx</a> 
    <button type="button">attr</button>
    <script> 
    $(function(){ 
    $('button').click(function(){
            alert($("a").attr("href"));
        });
    });
</script>
</body>

</html>

a元素为被选元素，被选属性为  href 属性，所以最终输出为a元素的 href 属性

设置属性/值-设置被选元素的属性和值。

语法

$(selector).attr(attribute,value)

 

参数

描述

attribute

规定被选元素(selector)属性的名称

value

规定被选元素(selector)属性的值

 

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learning notes</title>
    <script src="js/jquery.min.js"></script>
</head>
<style>
    body{
        color: #FFF;
    }  
</style>
<body>
   <a href="http://www.cnblogs.com/">博客园</a>
   <button type="button">attr</button>
<script> 
    $(function(){ 
    $('button').click(function(){
      $("a").attr("href","javascript:void(0)");
      alert("A标签href属性已经改变")
        });
    });
</script>
</body>

</html>

a元素 为被选元素，被选属性为  href 属性，点击按钮，a元素 执行  attr()  方法，将 a元素 得  href  属性改为 

 

 使用函数来设置属性/值-设置被选元素的属性和值。

　　语法

$(selector).attr(attribute,function(index,oldvalue))

 

参数

描述

attribute

规定被选元素(selector)属性的名称

function(index,oldvalue)

规定返回属性值的函数。

该函数可接收并使用选择器的 index 值和当前属性值。

 

例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>learning notes</title>
    <script src="js/jquery.min.js"></script>
</head>
<style>
    body {
        color: #FFF;
    }
    img{
        box-shadow: 0 0 2px #7ca02a;
    }
</style>

<body>
    <button type="button">attr</button>
    <br />    
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" alt="">
    <br />
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" alt="">
    <script> 
    $(function(){ 
    $('button').click(function(){
        $("img").attr("width",function(i,o){
            return o - (i+10);
            });
        });
    });
</script>
</body>

</html>

img元素 为被选元素，被选属性为  width  ，点击按钮，获取 img元素 得  width  的值，然后通过函数获取 img元素得  index  值 和  oldvalue

注：被选元素中需设置属性才能进行修改，例子中的 img元素，需包含了  width  属性 ， attr()

 

设置多个属性/值对-为被选元素设置一个以上的属性和值。

　　语法

 

$(selector).attr({attribute:value, attribute:value ...})

 

参数

描述

attribute:value

规定一个或多个属性/值对。

 

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learning notes</title>
    <script src="js/jquery.min.js"></script>
</head>
<style>
    body{
        color: #FFF;
    }
    img{
        box-shadow: 0 0 2px #7ca02a;
    }
</style>
<body>
    <button type="button">attr</button>
    <br />
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" height="129" alt="">
<script> 
    $(function(){ 
    $('button').click(function(){
      $("img").attr({width:"100",height:"100"});
        });
    });
</script>
</body>

</html>

注：一次规定多个属性时，需要添加  {}  括号。如: attr({width:"100",height:"100"})

以上是  attr()

未完待续！