zoukankan      html  css  js  c++  java
  • jQuery捕获-获取DOM元素内容和属性

    一、获取内容

      1.text()-设置或返回所选元素的文本内容

      2.html()-设置或返回所选元素的内容(包括HTML标记)

      3.val()-设置或 返回表单字段的值

     1 $(document).ready(function(){
     2   $("#btn1").click(function(){
     3     alert("Text: " + $("#test").text());
     4   });
     5   $("#btn2").click(function(){
     6     alert("HTML: " + $("#test").html());
     7   });
     8     $("#btn3").click(function(){
     9     alert("值为: " + $("#test").val());
    10   });
    11 });
    12 </script>
    13 </head>
    14 
    15 <body>
    16 <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
    17 <p>名称: <input type="text" id="test" value="val测试值"></p>
    18 <button id="btn3">val显示值</button>
    19 <button id="btn1">显示文本</button>
    20 <button id="btn2">显示 HTML</button> 

        第一个按钮显示:val测试值

      第二个按钮显示:这是段落中的粗体文本

      第三个按钮显示:这是段落中的 <b>粗体</b> 文本

      上面的三个 jQuery 方法:text()、html() 以及 val(),如果向里面传递一个值,则是表示把被选元素的值设置为传进去的参数。

      上面的三个 jQuery 方法:text()、html() 以及 val(),可以传递一个回调函数。回调函数有两个参数:1.被选元素列表中当前元素的下标,2.原始(旧的)值。然后函数返回你经过处理的字符串。

    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("#test1").text(function(i,origText){
            //i是被选元素当前元素的下标,origText是原始的文本值
          return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
        });
      });
    
      $("#btn2").click(function(){
        $("#test2").html(function(i,origText){
          return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
        });
      });
    
    });
    </script>
    </head>
    
    <body>
    <p id="test1">旧段落1。</p>
    <p id="test2">旧段落2。</p>
    <button id="btn1">显示 新/旧 文本</button>
    <button id="btn2">显示 新/旧 HTML</button>
    </body>

      4.获取属性 - attr()

      

    <script>
    $(document).ready(function(){
      $("button").click(function(){
        alert($("#runoob").attr("href"));
      });
    });
    </script>
    
    <p><a href="www.baidu.com" id="runoob">菜鸟教程</a></p>
    <button>显示 href 属性的值</button>

      按钮显示:www.baidu.com

      同样的,attr()也可以传进去参数设置值。但是与text()它们三个不同的是,attr()需要传递两个参数,第一个参数为要设置的属性名,第二个参数为要设置的值。

      attr也是可以传递一个回调函数的,在attr()的第二个参数位传递一个回调函数。第一个参数为要设置的属性名,第二个参数为要设置的值。

     $("#runoob").attr({
          "href" : "http://www.baidu.com",
          "title" : "attr使用"
        });
  • 相关阅读:
    23种设计模式(1)
    设计模式六大原则
    关于设计模式
    《代码整洁之道》整理
    MySQL 查询优化
    互联网流量下的分层实验平台是咋做的
    机器学习web服务化实战:一次吐血的服务化之路
    RabbitMQ和Kafka到底怎么选(二)?
    RabbitMQ和Kafka到底怎么选?
    基于海量词库的单词拼写检查、推荐到底是咋做的?
  • 原文地址:https://www.cnblogs.com/mwxz/p/13596679.html
Copyright © 2011-2022 走看看