text(),val()和html()區別是什麼

antzone發表於2017-04-18
HTML

這三個方法的應用當然是非常基礎的，對於有點經驗的前端人員都不是問題。

本章節主要面向初學者，也許他們對三個方法的區別還不是太清楚，下面就通過程式碼例項做一下介紹。

通常比較正規的庫方法或者變數的命名都是非常合理的，基本能夠做到見名達意，當然jQuery也不例外。

一.text()和html():

text翻譯過來具有"文字"的意思。

此方法的作用是獲取或者設定元素的文字內容。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function () {
  var str = "<b>螞蟻部落</b>";
  $("div").text(str);
})
</script>
</head>
<body>
<div></div>
</body>
</html>

上面的程式碼設定了div的文字內容，也就是說text()的引數都會被視為普通文字處理。

html()用來設定或者獲取元素的html內容，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function () {
  var str = "<b>螞蟻部落</b>";
  $("div").html(str);
})
</script>
</head>
<body>
<div></div>
</body>
</html>

html()方法會將引數視作html程式碼，那麼就會被瀏覽器解析；上面的程式碼文字就會呈現粗體。

二.val()方法:

此方法就比較簡單了，針對表具有value屬性的表單元素進行操作，用來設定或者獲取表單元素的value屬性值。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function () {
  var str = "螞蟻部落";
  $("input").val(str);
})
</script>
</head>
<body>
<input type="text">
</body>
</html>

相關文章