jQuery DOM元素的操作總結二
阿新 • • 發佈：2018-12-02
在頁面中操作DOM元素
修改元素樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.box {
width: 100px;
height 移動和插入元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<h2>title</h2>
<ul>
<li class="item1">新聞標題-1</li>
<li class="item2">新聞標題-2</li>
<li class="item3">新聞標題-3</li>
<li class="item4">新聞標題-4</li>
<li class="item5">新聞標題-5</li>
<li class="item6">新聞標題-6</li>
<li class="item7">新聞標題-7</li>
<li class="item8">新聞標題-8</li>
<li class="item9">新聞標題-9</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
var element = $('ul');
element.append('<li>append</li>') //在ul中的最後面插入
element.prepend('<li>prepend</li>') //在ul中的最前面插入
element.after('<li>after</li>') //在ul的後面插入
element.before('<li>before</li>') //在ul的前面插入
$('h2').appendTo(element); //將所選元素插入到指定元素的後面
});
</script>
</body>
</html>
包裹元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veritatis.</p>
<div class="item"></div>
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#">link4</a>
<a href="#">link5</a>
<a href="#">link6</a>
<a href="#">link7</a>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
var element = $('p');
element.wrap($('.item')); //將item複製，包裹住p
$('a').wrap('<p></p>'); //每個a外面包裹一個p
$('a').wrapAll('<p></p>'); //所有的a被一個p包裹
element.wrapInner('<div class="box"></div>'); //p包裹住新增的元素
element.unwrap(); //開啟包裹
});
</script>
</body>
</html>
移除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
p {
font-size: 12px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veritatis.</p>
<div class="item"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
var element = $('p');
element.on('click', function () {
$(this).css('fontSize', '+=5')
}).data('data', 'demo')
element.remove(); //移除所有匹配元素(事件和資料刪除)
element.detach(); //從DOM中移除(事件和數不刪除)
element.empty(); //刪除匹配元素集合中的所有子節點(移出元素內容)
});
</script>
</body>
</html>
複製和替換元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<h2>title</h2>
<div class="item">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<ul>
<li class="item1">新聞標題-1</li>
<li class="item2">新聞標題-2</li>
<li class="item3">新聞標題-3</li>
<li class="item4">新聞標題-4</li>
<li class="item5">新聞標題-5</li>
<li class="item6">新聞標題-6</li>
<li class="item7">新聞標題-7</li>
<li class="item8">新聞標題-8</li>
<li class="item9">新聞標題-9</li>
</ul>
<script src="/jquery-1.12.4.js"></script>
<script>
$(function() {
var element = $('ul');
$('h2').clone().appendTo(element) //建立匹配的元素集合的副本
$('h2').replaceWith('<p>hello</p>'); //替換匹配到的元素
$('<p>hello</p>').replaceAll($('li')); //替換所有的li
});
</script>
</body>
</html>
處理標段元素的值
<!DOCTYPE html>
<html lang="en">
<head