DIV CSS 佈局教程網

4.2 內容操作
編輯:jQuery基礎知識     

在jQuery中,關於元素內容操作共有2組方法:

  • (1)html()和text();
  • (2)val();

其中html()和text()用於操作普通標簽,而val()用於操作表單標簽。

一、html()和text()

1、html()方法

在jQuery中,我們可以用html()方法來獲取和設置某個元素中的“HTML內容”。

語法:

 
$().html()              //獲取HTML內容
$().html("HTML內容");   //設置HTML內容

說明:

html()方法跟JavaScript中的innerHTML是一樣的效果,只不過html()是jQuery的實現方式,innerHTML是JavaScript的實現方式。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //使用html()獲取HTML內容
                var a = $("#p1").html();
                alert(a);
            });
            $("#btn2").click(function () {
                //使用html()設置HTML內容
                $("#p2").html("<strong>jQuery入門教程</strong>");
            })
        })
    </script>
</head>
<body>
    <p id="p1"><strong> 學習網</strong></p>
    <p id="p2"> 學習網</p>
    <hr />
    獲取p1的值:<input type="button" id="btn1" value="獲取"/><br />
    設置p2的值:<input type="button" id="btn2" value="設置"/>
</body>
</html>

在浏覽器預覽效果如下:

分析:

html()方法不僅可以用於獲取元素的HTML內容,也可以用於設置元素的HTML內容。

2、text()方法

在jQuery中,我們可以使用text()方法來獲取和設置某個元素的“文本內容”。

語法:

 
$().text()             //獲取文本內容
$().text("文本內容")   //設置文本內容

說明:

text()方法跟JavaScript中的innerText是一樣的效果,只不過text()是jQuery的實現方式,innerText是JavaScript的實現方式。

此外還需要注意一點,JavaScript中的innerText屬性並不能在Firefox浏覽器下運行,而jQuery的text()方法支持所有的浏覽器。這也體現了jQuery完美的兼容性。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //使用html()獲取文本內容
                var a = $("#p1").text();
                alert(a);
            });
            $("#btn2").click(function () {
                //使用html()設置文本內容
                $("#p2").text("<strong>jQuery入門教程</strong>");
            })
        })
    </script>
</head>
<body>
    <p id="p1"><strong> 學習網</strong></p>
    <p id="p2"> 學習網</p>
    <hr />
    獲取p1的值:<input type="button" id="btn1" value="獲取"/><br />
    設置p2的值:<input type="button" id="btn2" value="設置"/>
</body>
</html>

在浏覽器預覽效果如下:

分析:

大家將這個例子的測試結果,跟上面html()方法的例子對比一下,好好理解一下html()方法和text()方法的區別。

關於html()和text()兩個屬性的區別,我們用一個表格很能很清晰看出來了:

html()和text()屬性返回值的區別 HTML代碼 html()返回值 text()返回值 <div> 學習網</div> " 學習網" " 學習網" <div><b> 學習網</b></div> "<b> 學習網</b>" " 學習網" <div><b></b></div> "<b></b>" ""(空字符串)

二、val()

表單元素不像普通元素,它們的值都是通過表單元素的value屬性來傳遞的。因此我們不能使用html()和text()這兩種方法來獲取元素的內容(值)。

在jQuery中,我們可以使用val()來獲取或設置“表單元素”的值。

語法:

 
$().val()                  //獲取表單元素
$().val("表單元素的值")    //設置表單元素

舉例1:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //使用val()獲取表單元素的值
                var a = $("#txt1").val();
                alert(a);
            });
            $("#btn2").click(function () {
                //使用val()設置表單元素的值
                $("#txt2").val("jQuery入門教程");
            })
        })
    </script>
</head>
<body>
    <input id="txt1" type="text" value=" 學習網"/><br />
    <input id="txt2" type="text"/><br />
    獲取第1個文本框的值:<input id="btn1" type="button" value="獲取" /><br />
    設置第2個文本框的值:<input id="btn2" type="button" value="設置" />
</body>
</html>

在浏覽器預覽效果如下:

分析:

val()不僅可以用來獲取表單元素的值,也可以用來設置表單元素的值。

舉例2:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var a = $("#lvye").html();
            var b = $("#lvye").text();
            $("#txt1").val(a);
            $("#txt2").val(b);
        })
    </script>
</head>
<body>
    <div id="lvye"><strong> 學習網</strong></div>
    innerHTML內容是:<input id="txt1" type="text"/><br/>
    innerText內容是:<input id="txt2" type="text"/>
</body>
</html>

在浏覽器預覽效果如下:

分析:

對於普通元素,我們可以使用html()和text()來獲取元素的內容或者值。但是對於表單元素來說,想要“獲取”或者“設置”元素的值,就必須用val()方法。

對於html()、text()、val()這3個方法都可以實現同時實現2點:(1)獲取值;(2)設置值,而且形式是一樣的,大家對比記憶一下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved