jQuery来了--text(),html()，val()，attr()，捕获内容/属性，设置内容/属性，回调函数

捕获

获得内容–text(),html()和val()

三个用于DOM操作的jQuery方法：

• text()：设置或返回所选元素的文本内容
• html()：设置或返回所选元素的内容（包括HTML标记）
• val()：设置或返回表单字段的值

例1.
通过text()和html()方法获得内容：

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>

例2.
通过val()方法获得输入字段的值：

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});
</script>

<p>名称: <input type="text" id="test" value="菜鸟教程"</p>
<button>显示值</button>

获取属性–attr()

作用：用于获取属性值

例.
如何获得链接中href属性的值：

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
</script>

<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>

设置

设置内容–text(),html()和val()

• text()：设置或返回所选元素的文本内容
• html()：设置或返回所选元素的内容（包括HTML标记）
• val()：设置或返回表单字段的值

例.

<script>
   $(document).ready(function(){
      $("#btn1").click(function(){
         $("#test1").text("Hello Nico");
      });
      $("#btn2").click(function(){
         $("#test2").html("<h1>Hello Nico</h1>");
      });
      $("#btn3").click(function(){
         $("#test3").val("Haha");
      });
   });
</script>

<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>

text()、html() 和 val() 的回调函数

回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串

例.

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(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>

<p id="test1">gg</p>
<p id="test2">hh</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>

设置属性 - attr()

作用：设置/改变属性值

例.

<script>
$(document).ready(function(){
  $("button").click(function(){
     $("#th").attr("name"," Nico");
      alert($("#th").attr("name"));
  });
});
</script>

<p><a href="#" id="th" name="hh">Hello</a></p>
<button>修改 href 值</button>

attr() 方法也允许您同时设置多个属性

例.
设置多个属性：

<script>
 $(document).ready(function(){
     $("button").click(function(){
        $("#ha").attr({
        "name":"Nico",    //修改属性name
        "title":"qq"      //设置属性title
        });
     $("#ha").text($("#ha").attr("title"));// 通过修改的 title 值来修改链接名称
     });
  });
</script>

<p><a href="#" id="ha">Hello Nico</a></p>
<button>change</button>

attr() 的回调函数

例.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#ha").attr("href", function(i, origValue){
            return origValue + "/ditu";
            /*或return "http://www.sohu.com";*/
        });
        /*$("#ha").attr("href","http://www.baidu.com");*/
    });
});
</script>

<p><a href="http://www.baidu.com" id="ha">Hello Nico</a></p>

<button>修改 href 值</button>