jQuery 入门教程(12): HTML Get

古城微笑少年丶 2023-10-16 19:04 19阅读 0赞

jQuery库包含了很多用来改变和操作HTML元素及其属性的方法。  
其中一个非常重要的部分就是jQuery可以用来操作DOM。  
本篇介绍使用jQuery来取得DOM节点元素的值或属性。  
其中三个简单而有用的方法如下：

*  text() – 设置或取得指定元素的文本内容。
 *  html() – 设置或取得指定元素的内容（包括HTML标记）
 *  val() – 设置或取得表单某个输入域的值。

例如，下面代码使用html()和text()方法取得HTML元素的内容：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("\#btn1").click(function()\{
2.  alert("Text: " \+ $("\#test").text());
3.  \});
4.  $("\#btn2").click(function()\{
5.  alert("HTML: " \+ $("\#test").html());
6.  \});

$("#btn1").click(function(){
      alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function(){
      alert("HTML: " + $("#test").html());
    });

下面的代码取得Form中Input 的内容：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("\#btn1").click(function()\{
2.  alert("Value: " \+ $("\#test").val());
3.  \});

$("#btn1").click(function(){
      alert("Value: " + $("#test").val());
    });

除了上面的方法外，attr()方法用来取得某个元素的属性：  
下面代码用来取得链接的href属性：

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="utf-8">
5.  <title>JQuery Demo</title>
6.  <script src="scripts/jquery-1.9.1.js"></script>
7.  </script>
8.  <script>
9.  $(document).ready(function () \{
10. $("button").click(function () \{
11. alert($("\#guidebee").attr("href"));
12. \});
13. \});
14. </script>
15. </head>
16. 
17. <body>
18. <p><a
19. href="http://www.imobilebbs.com"
20. id="guidebee">
21. imobilebbs.com
22. </a></p>
23. <button>Show href Value</button>
24. </body>
25. </html>

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JQuery Demo</title>
    <script src="scripts/jquery-1.9.1.js"></script>
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                alert($("#guidebee").attr("href"));
            });
        });
    </script>
    </head>
    
    <body>
    <p><a
        href="http://www.imobilebbs.com"
        id="guidebee">
        imobilebbs.com
       </a></p>
    <button>Show href Value</button>
    </body>
    </html>

[![20130308001][]][20130308001]

[view plain]: http://blog.csdn.net/mapdigit/article/details/8661884#
[20130308001]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2013/03/20130308001.png