JQuery 提供了一些方法來有效的操縱 DOM。你不需要編寫冗長的代碼來修改任何元素的屬性值或從段落或 division 中提取 HTML 代碼。
JQuery 提供的方法如 .attr()
,.html()
和 .val
,充當(dāng) getter,從 DOM 元素中檢索信息,供以后使用。
html( ) 方法獲取第一個匹配元素的 html 內(nèi)容(內(nèi)部 HTML)。
這是該方法的語法 ——
selector.html( )
下面是一個例子,利用 .html()
和 .text(val)
方法。這里,.html()
對象檢索來自對象的 HTML 內(nèi)容,然后 .text(val)
方法使用傳遞的參數(shù)設(shè)置對象的值 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var content = $(this).html();
$("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id="result"> </span>
<div id="division" style="background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>
這將產(chǎn)生如下所示結(jié)果:
你可以使用指定的 HTML 或 DOM 元素來替換一個完整的 DOM 元素。replaceWith( content ) 方法很符合這一目的。
這是該方法的語法 ——
selector.replaceWith( content )
這里 concent 是你想要替換原始元素的東西。這可以是 HTML 或簡單的文本。
下面的例子中用 “< h1>JQuery is Great< /h1>
” 替換了 division 元素 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id="result"> </span>
<div id="division" style="background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>
這將產(chǎn)生如下所示結(jié)果:
你可能會想要從文檔中刪除一個或多個 DOM 元素。jQuery 提供了兩種方法來實現(xiàn)這一操作。
empty() 方法會從一組匹配的元素中刪除所有的子節(jié)點,而 remove(expr) 方法會從 DOM 中刪除所有的匹配元素。
這是兩種方法的語法 ——
selector.remove( [ expr ])
or
selector.empty( )
你可以傳遞可選參數(shù) expr 來過濾要被刪除的元素組。
下面的例子中當(dāng)元素被點擊時,就會被刪除 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id="result"> </span>
<div class="div" style="background-color:blue;"></div>
<div class="div" style="background-color:green;"></div>
<div class="div" style="background-color:red;"></div>
</body>
</html>
這將產(chǎn)生如下所示結(jié)果:
你可能會想要在已存在的文檔中插入一個或多個新的 DOM 元素。jQuery 提供了不同的方法來在不同的位置插入元素。
after( content ) 方法會在每個匹配元素之后插入內(nèi)容,而 before( content ) 方法會在每個匹配元素之前插入內(nèi)容。
這是兩種方法的語法 ——
selector.after( content )
or
selector.before( content )
這里 content 是你想要插入的內(nèi)容。它可以是 HTML 或簡單的文本。
下述例子中會在點擊的元素之前插入 < div>
元素 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).before('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id="result"> </span>
<div class="div" style="background-color:blue;"></div>
<div class="div" style="background-color:green;"></div>
<div class="div" style="background-color:red;"></div>
</body>
</html>
這將產(chǎn)生如下所示結(jié)果:
下表是用來操作 DOM 元素的全部方法 ——
序號 | 方法 & 描述 |
---|---|
1 |
after( content )
在每一個匹配元素之后插入內(nèi)容 |
2 |
append( content )
在每一個匹配元素內(nèi)部添加內(nèi)容。 |
3 |
appendTo( selector )
將所有匹配元素添加到另一個指定的元素組中。 |
4 |
before( content )
在每個匹配的元素之前插入內(nèi)容。 |
5 |
clone( bool )
克隆匹配的 DOM 元素以及所有的事件處理程序,并選擇克隆項。 |
6 |
clone( )
克隆匹配的 DOM 元素并選擇克隆項。 |
7 |
empty( )
從匹配的元素集合中刪除所有的孩子節(jié)點。 |
8 |
html( val )
設(shè)置每個匹配元素的 html 內(nèi)容。 |
9 |
html( )
獲取第一個匹配元素的 html 內(nèi)容(內(nèi)部 HTML)。 |
10 |
insertAfter( selector )
將所有的匹配元素插入到另一個指定的元素集合之后。 |
11 |
insertBefore( selector )
將所有匹配的元素插入到另一個指定的元素集合之前。 |
12 |
prepend( content )
將內(nèi)容前置到每個匹配元素的內(nèi)部。 |
13 |
prependTo( selector )
將所有匹配元素前置到另一個指定的元素集合中。 |
14 |
remove( expr )
從 DOM 中刪除所有的匹配元素。 |
15 |
replaceAll( selector )
用匹配的元素替換與指定的選擇器相匹配的元素。 |
16 |
replaceWith( content )
用指定的 HTML 或 DOM 元素代替所有的匹配元素。 |
17 |
text( val )
設(shè)置所有匹配元素的文本內(nèi)容。 |
18 |
text( )
獲取所有匹配元素的組合的文本內(nèi)容。 |
19 |
wrap( elem )
用指定的元素包裝每個匹配的元素。 |
20 |
wrap( html )
用指定的 HTML 內(nèi)容包裝每個匹配的元素。 |
21 |
wrapAll( elem )
將匹配的集合中的全部元素包裝到一個單獨的元素中。 |
22 |
wrapAll( html )
將匹配的集合中的全部元素包裝到一個單獨的元素中。 |
23 |
wrapInner( elem )
用 DOM 元素包裝每個匹配元素(包括文本節(jié)點)的內(nèi)部孩子內(nèi)容。 |
24 |
wrapInner( html )
用 HTML 結(jié)構(gòu)包裝每個匹配元素(包括文本節(jié)點)的內(nèi)部孩子內(nèi)容。 |
更多建議: