jquery中html()方法怎麼用
- 醉折花枝作酒筹原創
- 2021-06-08 14:33:285005瀏覽
在javascript中，「html()」方法的用法是「元素.html(被選元素的新內容)」。 html方法設定或傳回被選取元素的內容，當此方法用於傳回內容時，則傳回第一個符合元素的內容；當此方法用於設定內容時，則會重寫所有符合元素的內容。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
HTML內容就是內容中可以包含HTML標籤，並且能夠被瀏覽器渲染。
文字內容是先將內容中的HTML預定義字元轉換成html字元實體，這樣HTML標籤就不會被渲染。
語法結構一:
$(selector).html()
此時方法不帶參數時候是取得第一個符合元素的html內容。
此方法與text()方法沒有參數用法類似，但是還是有很大差別：
一.html()方法取得第一個符合元素的內容，而text()方法是取得所有符合元素所包含的內容。
二.html()方法取得內容html內容，而text()方法取得是文字內容。
實例程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<meta name="author" content="https://www.jb51.net/" />
<title></title>
<style type="text/css">
div{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
alert($("div").html());
});
});
</script>
</head>
<body>
<div>
<ul>
<li>
<span>欢迎您</span>
</li>
</ul>
</div>
<button>点击查看效果</button>
</body>
</html>以上程式碼將傳回div元素中的內容。
語法結構二:
$(selector).html(content)
有參數的時候是設定所有符合元素而的html內容。
此方法與text()方法帶有參數的用法類似，但是還是有很大的區別：
html()方法設定的是html內容，而text()方法設定的是文字內容。
實例程式碼:
以下程式碼將div中的html內容設定為"a4b561c25d9afb9ac8dc4d70affff419我是重新設定後的內容0d36329ec37a2cc24d42c7229b69747a"。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div
{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("div").html("<b>我是重新设置后的内容</b>");
});
});
</script>
</head>
<body>
<div>原来内容</div>
<button>点击查看效果</button>
</body>
</html>【推薦學習：javascript進階教學】
以上是jquery中html()方法怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn