jQuery HTML代碼/文本

tml([val|fn]) 返回值:String

取得第一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔。

在一個 HTML 文檔中, 我們可以使用 .html() 方法來獲取任意一個元素的內容。

如果選擇器匹配多于一個的元素，那么只有第一個匹配元素的 HTML 內容會被獲取。

function(index, html) Function

此函數返回一個HTML字符串。接受兩個參數，index為元素在集合中的索引位置，html為原先的HTML值。

返回p元素的內容。

jQuery 代碼:

$('p').html();

設置所有 p 元素的內容

jQuery 代碼:

$("p").html("Hello <b>world</b>!");

使用函數來設置所有匹配元素的內容。

jQuery 代碼:

$("p").html(function(index,n){
    return "這個 p 元素的 index 是：" + n;
});

text([val|fn]) 返回值:String

val String 用于設定HTML內容的值

function(index, html) Function 此函數返回一個HTML字符串。接受兩個參數，index為元素在集合中的索引位置，html為原先的HTML值。

返回p元素的文本內容。

jQuery 代碼:

$('p').text();

設置所有 p 元素的文本內容

jQuery 代碼:

$("p").text("Hello world!");

使用函數來設置所有匹配元素的文本內容。

jQuery 代碼:

$("p").text(function(index,n){
    return "這個 p 元素的 index 是：" + n;
});
$("#test").html();

意思是指：獲取ID為test的元素內的html代碼。其中html()是jQuery里的方法

這段代碼等同于用DOM實現代碼：

document.getElementById("test").innerHTML;

直接獲取、編輯內容

在jQuery中，主要是通過html()和text()兩種方法來獲取和編輯頁面內容的。其中html()相當于獲取節點的innerHTML屬性，

添加參數html(text)時,則為設置innerHTML;而text()則用來獲取元素的純文本，text(content)為設置純文本。

實例1:

jQuery代碼:

$(function(){
    var sString = $("p:first").text(); //獲取純文本
    $("p:last").html(sString);
});

HTML代碼:

<p><b>文本</b>段 落<em>示</em>例</p>
<p></p>

實例2:

jQuery代碼:

$(function(){
    $("p").click(function(){
        var sHtmlStr = $(this).html(); //獲取innerHTML
        $(this).text(sHtmlStr); //將代碼做為純文本傳入
    });
});

HTML代碼:

文本段落示例

實例3：獲取選擇框的文本

$("#id").find("option:selected").text(); //獲取Select選擇的text文本
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$function(){
    $('#OK').bind('click', function () {
    alert($("#id").find("option:selected").text());
    });
}
</script>
</head>
<body>
<select id="select">
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
</select>
<button id="OK">
獲取為本</button>
</body>
</html>

$().html(); //獲得節點包含的信息

$().html(信息); //設置節點包含的內容

$().text(); //獲得節點包含的"文本字符串信息"內容

$().text(信息); //設置節點包含的內容(有html標簽就把"><"符號變為符號實體)

注意: DOM操作必須保住DOM節點必須存在, 當然也包括使用css樣式display:none隱藏的DOM節點, 否則會導致js語法錯誤;

過 jQuery，可以很容易地添加新元素/內容。

添加新的 HTML 內容

我們將學習用于添加新內容的四個 jQuery 方法：

append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之后插入內容
before() - 在被選元素之前插入內容

jQuery append() 方法

jQuery append() 方法在被選元素的結尾插入內容。

實例

$("p").append("追加文本");

jQuery prepend() 方法

jQuery prepend() 方法在被選元素的開頭插入內容。

實例

$("p").prepend("在開頭追加文本");

通過 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我們只在被選元素的開頭/結尾插入文本/HTML。

不過，append() 和 prepend() 方法能夠通過參數接收無限數量的新元素。可以通過 jQuery 來生成文本/HTML（就像上面的例子那樣），或者通過 JavaScript 代碼和 DOM 元素。

在下面的例子中，我們創建若干個新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）：

實例

functionappendText(){vartxt1="文本。"; // 使用 HTML 標簽創建文本vartxt2=$("").text("文本。"); // 使用 jQuery 創建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}

jQuery after() 和 before() 方法

jQuery after() 方法在被選元素之后插入內容。

jQuery before() 方法在被選元素之前插入內容。

實例

$("img").after("在后面添加文本"); $("img").before("在前面添加文本");

通過 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能夠通過參數接收無限數量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建新元素。

在下面的例子中，我們創建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）：

實例

functionafterText(){vartxt1="I "; // 使用 HTML 創建元素vartxt2=$("").text("love "); // 使用 jQuery 創建元素vartxt3=document.createElement("big"); // 使用 DOM 創建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在圖片后添加文本}

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

Query 中包含更改和操作 HTML 元素和屬性的強大方法。我們可以通過這些方法來獲取 HTML 元素中的文本內容、元素內容（例如HTML標簽）、屬性值等。

text()方法

text() 方法可以用于設置或獲取所選元素的文本內容。

示例：

例如我們獲取下列 標簽中的文本內容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').text();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，歡迎來到俠課島!</p>
  <div>
    <p>希望俠課島中有適合你的編程課程。</p>
  </div>
</body>
</html>

在瀏覽器中演示效果：

除了獲取文本內容，text() 還可以用于設置文本內容，我們可以來看一下。

示例：

例如通過 text() 將 .content 的文本內容設置為 hello, xkd!：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('.content').text("hello, xkd!");
    });
  });
</script>
</head>
<body>
  <p class="content">你好，歡迎來到俠課島!</p>
  <p><button>點擊按鈕</button></p>
</body>
</html>

在瀏覽器中演示效果：

html()方法

html() 方法用于設置或返回所選元素的內容（包括HTML標記）。

示例：

通過 html() 方法獲取 p 元素的內容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').html();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，歡迎來到俠課島!</p>
</body>
</html>

在瀏覽器中演示效果：

除此之外，我們還可以使用 html() 方法來設置指定元素的內容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('.hello').html('你好，歡迎來到俠課島!');
  });
</script>
</head>
<body>
  <p>向下面的p標簽中添加文本內容：</p>
  <p class="hello"></p>
</body>
</html>

在瀏覽器中演示效果：

val()方法

val() 用于設置或返回表單字段的值。該方法大多時候用于 input 元素。

示例：

例如獲取輸入框 input 中的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      alert($('input').val());
    });
  });
</script>
</head>
<body>
  文本輸入框：<input type="text" name="name" value="summer" />
  <p>
    <button>獲取輸入框的值</button>
  </p>
</body>
</html>

在瀏覽器中演示效果：

如果要使用 val() 方法設置 value 的值，我們可以像下面這樣做：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('input').val('summer')
    });
  });
</script>
</head>
<body>
  文本輸入框：<input type="text" name="name" value="" />
  <p>
    <button>獲取輸入框的值</button>
  </p>
</body>
</html>

在瀏覽器中演示效果：

attr()方法

attr() 方法用于設置或返回被選元素的屬性值。

示例：

例如下面這個例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    alert($('div').attr("class"));
  });
</script>
</head>
<body>
  <div class="xkd">獲取class屬性的值</div>
</body>
</html>

在瀏覽器中演示效果：

attr() 方法除了獲取元素的屬性值，還可以設置元素的屬性值，我們來看一下。

示例：

將下面 <div> 標簽中的 class 屬性的值設置為 summer：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('div').attr("class", "summer")
  });
</script>
</head>
<body>
  <div>設置class屬性的值</div>
</body>
</html>

在瀏覽器中演示效果：

鏈接：https://www.9xkd.com/

在線咨詢

上一篇：HTML5 新增的標簽
下一篇：html用什么開發