首页 > web前端 > js教程 > 正文

Jquery attr()方法 属性赋值和属性获取详解_jquery

WBOY
发布: 2016-05-16 15:05:19
原创
2567 人浏览过

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

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

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

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

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

示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery中attr()方法</title>

<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>

<style>

p{color:red}

li{color:blue;}

.lili{font-weight:bold;color:red;}

#lili{font-weight:bold;color:red;}

</style>

</head>

<body>

<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>

<ul>

<li title="苹果汁">苹果</li>

<li title="橘子汁" alt="123">橘子</li>

<li title="菠萝汁">菠萝</li>

</ul>

<script>

...

</script>

</body>

<html>
登录后复制

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

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

<script>

alert($("ul li:eq(1)").attr("title"));

</script>
登录后复制

结果:   显示 橘子汁

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

<script>

alert($("ul li:eq(1)").attr("alt"));

</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把alt属性的值设置为title属性的值。

<script>

$("ul li:eq(1)").attr("title",function(){ return this.alt});

alert($("ul li:eq(1)").attr("title"));

</script>
登录后复制

结果:

显示123

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

4.1获取

    里第2个
  • 设置title和alt属性。

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

    结果:

    显示2个,不喝橘子汁   不是123

    4.2获取

      里第2个
    • 设置class。

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

      结果:

    • 苹果
    • 橘子
    • 菠萝
    • 4.3获取

        里第2个
      • 设置id。

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

        结果:

      • 苹果
      • 橘子
      • 菠萝
      • 4.4获取

          里第2个
        • 设置style。

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

          结果:

        • 苹果
        • 橘子
        • 菠萝
        • 在 li中添加alt是错误的,它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。在这里为了很详细说明attr()方法,没有合适的属性,所有用了alt进行举例,只供学习参考attr()方法用法。

          在此说明下alt和tite的区别。

          alt:这是用以描述图形的文字,当图片无法显示时,这些文字会替代图片而被显示。当鼠标移至图片上该些文字亦会显示。

          title:是鼠标放上去之后,会显示出来的文字。

          那么怎么删除属性呢?

          jquery中删除属性的关键词是: removeAttr 注意A是大写的. 看看怎么用的:

          同样是用法一中的html代码, 我想删掉li的title属性, 那么就这样:

          <script>
          
          $("ul li:eq(1)").removeAttr("title");
          
          </script>
          
          登录后复制

          So einfach ist das: Attr ist eigentlich eine vereinfachte Implementierung von getAttribute in nativem JS und RemoveAttr ist die Abkürzung für RemoveAttribute.

          Gibt es also ein ähnliches Attribut wie attr()?

          val() in jquery ist ähnlich,

          $(this).val(); Ruft den Wert eines Elementknotens ab, äquivalent zu $(this).attr("value");

          $(this).val(value); Setzt den Wert eines Elementknotens, äquivalent zu $(this).attr("value",value);

          Die obige detaillierte Erläuterung der Attributzuweisung und Attributerfassung der Jquery attr()-Methode ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass Sie Script Home unterstützen.

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!