jQuery学习之------对标签属性的操作

jQuery学习之------标签的属性

<a href=””>链接</a>此处的href就是该a标签带有的属性

在js中对标签的属性的操作方法有

1.1getAttribute()方法 ----获取元素的属性

例子：

<a href="www.soulsjie.com" id="jie">jie</a>

<script>

var aa=document.getElementById("jie").getAttribute("href");

//获取id为jie的元素的href属性的值赋值给变量aa，之后将aa打印

document.write(aa);

</script>

1.2setAttribute()方法----设置元素的属性

　　例子:

<a href="" id="jie">jie</a>
     <script>
         document.getElementById("jie").setAttribute("href","https://soulsjie.com");
// 给元素设置属性值

</script>

1.3removeAttribute()方法---移除元素的属性

<a href="" id="jie">jie</a>
     <script>
         document.getElementById("jie").removeAttribute("href");

//移除元素的属性 
     </script>

在jQuery中attr()与removeAttr()可以对元素的属性进行操作，并解决兼容问题

attr()有4个表达式

attr(传入属性名)：获取属性的值

attr(属性名, 属性值)：设置属性的值

<script type="text/javascript">

　　//获取最后一个input的value属性值
      var ss=$("input :last").attr('value');
        //给第一个input的value属性赋新的值
        $("input :first").attr('value','我是新的内容')
</script>

attr(属性名,函数值)：设置属性的函数值

attr(属性名,函数值)

<script type="text/javascript">
        //找到第三个input，通过使用一个函数来设置属性
        $("input:eq(2)").attr('value',function(){
            return 1+1;
        })
    </script>

attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

<script type="text/javascript">

//找到第三个input，同时给元素设置多个属性
        $("input:eq(2)").attr({type: "button",value: "jianhua"})
    </script>

removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

<script type="text/javascript">
        //找到第四个input，通过使用removeAttr删除属性
        $("input:eq(3)").removeAttr('value')
    </script>