JQuery簡(jiǎn)單學(xué)習(xí)(7)——jQuery HTML 操作文章分類:Web前端
jQuery 包含很多供改變和操作 HTML 的強(qiáng)大函數(shù)。 ————————————————————
改變 HTML 內(nèi)容
語(yǔ)法
Js代碼
$(selector).html(content) html() 函數(shù)改變所匹配的 HTML 元素的內(nèi)容（innerHTML）。
實(shí)例
Js代碼
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html("W3School");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
————————————————————
添加 HTML 內(nèi)容
語(yǔ)法
Js代碼
$(selector).append(content) append() 函數(shù)向所匹配的 HTML 元素內(nèi)部追加內(nèi)容。
語(yǔ)法
Js代碼
$(selector).prepend(content)prepend() 函數(shù)向所匹配的 HTML 元素內(nèi)部預(yù)置（Prepend）內(nèi)容。 實(shí)例
Js代碼
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>W3School</b>.");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
語(yǔ)法
Js代碼
$(selector).after(content)after() 函數(shù)在所有匹配的元素之后插入 HTML 內(nèi)容。 語(yǔ)法
Js代碼
$(selector).before(content) before() 函數(shù)在所有匹配的元素之前插入 HTML 內(nèi)容。
實(shí)例
Js代碼
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after(" W3School.");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
————————————————————
jQuery HTML 操作 - 來(lái)自本頁(yè)
函數(shù)描述 $(selector).html(content) 改變被選元素的（內(nèi)部）HTML $(selector).append(content) 向被選元素的（內(nèi)部）HTML 追加內(nèi)容 $(selector).prepend(content) 向被選元素的（內(nèi)部）HTML “預(yù)置”（Prepend）內(nèi)容 $(selector).after(content) 在被選元素之后添加 HTML $(selector).before(content) 在被選元素之前添加 HTML
|
|
|
