jQuery中的text()、html()和val()以及javascript中的innerText、innerHTML和value

冷不防 2022-06-11 02:43 218阅读 0赞

\*[jQuery][]中设置或者获取所选内容的值：  
text();设置或者获取所选元素的文本内容；

html();设置或者获取所选元素的内容（包括html标记）；

val();设置或者获取表单字段的值（前提是表单设置了value属性）；

(text()和html()的区别是：前者是处理的文本内容，只能写文本如果写了上面的标记则会以文本形式输出；后者可以解析文本中的html标记，就是你可以添加像<a></a>、<p></p>等标记，最后会解析为其效果。  
)

\*[JavaScript][]中设置或者获取所选内容的值

同理innerText、innerHTML和value，

innerText和innerHTML都是将字符串放入hmtl标签中的一个函数  
但是innerHTMl他可以解析hmtl标记  
例如 你放入一个<a>[斯蒂芬][Link 1]</a>  如果在DIV中它里面就会出现一个带下划线的a元素；  
但是innerText只支持普通字符串；

\*具体代码如下：  
[jquery][jQuery]中：

<html>  
<head>  
<script src="/jquery/jquery-1.11.1.min.[js][JavaScript]"></script>  
<script>  
$(document).ready(function()\{  
  $("\#btn1").click(function()\{  
    alert("Text: " + $("\#test").text());  
  \});  
  $("\#btn2").click(function()\{  
    alert("HTML: " + $("\#test").html());  
  \});  
\});  
</script>  
</head>

<body>  
<p id="test">这是段落中的<b>粗体</b>文本。</p>  
<button id="btn1">显示文本</button>  
<button id="btn2">显示 HTML</button>  
</body>

</html>

[javascript][JavaScript]中：

<!DOCTYPE html>  
<html>  
<head>  
<script src="/jquery/jquery-1.11.1.min.js"></script>  
<script>  
function getInnerHTML()\{  
alert(document.getElementById("btn1").value);  
\}  
</script>  
</head>

<body>  
<p id="test">这是段落中的<b>粗体</b>文本。</p>  
<button id="btn1"  οnclick="getInnerHTML()"  >显示文本</button>  
<button id="btn2">显示 HTML</button>  
</body>

</html>

jQuery和JavaScript的区别总结：

\*前者click事件是获取元素id

具体效果可以在w3cschool中自己试试。

文章转自：http://blog.csdn.net/u010865136/article/details/48708467

[jQuery]: http://lib.csdn.net/base/jquery
[JavaScript]: http://lib.csdn.net/base/javascript
[Link 1]: https://www.baidu.com/s?wd=%E6%96%AF%E8%92%82%E8%8A%AC&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mH7BPWIbrHIBuhDvnhDk0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1f3P1fznjRLn0