zoukankan      html  css  js  c++  java
  • jquery attr()方法

    在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中,用一个attr()就可以全部搞定了,赞一个先 ^^

    jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式。

    1. attr(属性名       //获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined )

     

    2. attr(属性名, 属性值)   //设置属性的值 (为所有匹配的元素设置一个属性值。

    3. attr(属性名,函数值    //设置属性的函数值  (为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。

    4.attr(properties)    //给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)


    html代码结构:

    <p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
    <ul>
       <li title="苹果汁">苹果</li>
       <li title="橘子汁" value="123">橘子</li>
       <li title="菠萝汁">菠萝</li>
    </ul>

    1.attr(name)//获取属性的值

    1.1 使用attr(name)获取title值:

    <script>
    alert($("ul li:eq(1)").attr("title"));
    </script>

    结果:橘子汁

     

    1.2 使用attr(name)获取value值:

    <script>
    alert($("ul li:eq(1)").attr("value"));
    </script>

    结果:123

    2. attr(name,value)   //设置属性的值

    2.1 使用attr(name,value)修改title值为:不吃橘子

    <script>
    $("ul li:eq(1)").attr("title","不吃橘子");
    alert($("ul li:eq(1)").attr("title"));
    </script>

    结果:不吃橘子

    3. attr(name,fn)  //设置属性的函数值

    3.1 把value属性的值设置设给title属性。

    <script>
    $("ul li:eq(1)").attr("title",function(){ return this.value});
    alert($("ul li:eq(1)").attr("title"));
    </script>

    结果:123

    4.attr(properties)  //将一个“名/值”形式的对象设置为所有匹配元素的属性

    4.1 获取<ul>里第2个<li>设置title和value属性。

    <script>
    $("ul li:eq(1)").attr({title:"不喝橘子汁",value:"不是123"});
    alert($("ul li:eq(1)").attr("title"));
    alert($("ul li:eq(1)").attr("value"));
    </script>

    结果:不喝橘子汁  不是123

    4.2 获取<ul>里第2个<li>设置class。

    <script>
    $("ul li:eq(1)").attr({className:"lili"});
    </script>

    结果:第二个li的html:<li class="lili" title="橘子汁" value="123">橘子</li>

    4.3 获取<ul>里第2个<li>设置id。

    <script>
    $("ul li:eq(1)").attr({id:"lili"});
    </script>

    结果:第二个li的html:<li id="lili" title="橘子汁" value="123">橘子</li>

    4.4 获取<ul>里第2个<li>设置style。

    <script>
    $("ul li:eq(1)").attr({style:"color:red"});
    </script>

    那么怎么删除属性呢?

    <script>
    $("ul li:eq(1)").removeAttr ("title");
    </script>

    就这么简单, attr 其实就是原生js中 getAttribute 的简化实现removeAttr 就是 removeAttribute 的简写了。

  • 相关阅读:
    PHP 开发 APP 接口 学习笔记与总结
    Java实现 LeetCode 43 字符串相乘
    Java实现 LeetCode 43 字符串相乘
    Java实现 LeetCode 43 字符串相乘
    Java实现 LeetCode 42 接雨水
    Java实现 LeetCode 42 接雨水
    Java实现 LeetCode 42 接雨水
    Java实现 LeetCode 41 缺失的第一个正数
    Java实现 LeetCode 41 缺失的第一个正数
    Java实现 LeetCode 41 缺失的第一个正数
  • 原文地址:https://www.cnblogs.com/meowcool/p/7278338.html
Copyright © 2011-2022 走看看