jQuery DOM元素的操作總結二
阿新 • • 發佈:2018-12-02
在頁面中操作DOM元素
修改元素樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.box {
width: 100px;
height : 100px;
}
.red {
background-color: red;
}
.b10 {
border: 10px solid #000;
}
.m10 {
margin: 10px;
}
.p10 {
padding: 10px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class ="box" id="demo">div</div>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
< script src="jquery-1.12.4.js"></script>
<script>
$(function() {
var element = $('#demo');
element.addClass('red'); //向匹配的元素新增指定的類名
element.removeClass('b10 m10 p10'); //從匹配的元素中刪除指定的類名
element.addClass(function (index, className) {
console.log(index);
console.log(className);
return 'red';
});
element.removeClass(function (index, className) {
console.log(index);
console.log(className);
return 'red';
});
if (element.hasClass('hide')) { //存在執行removeClass,反之執行addClass
element.removeClass('hide');
} else {
element.addClass('hide');
}
element.toggleClass('hide'); //匹配到制定的元素就移除,反之就新增
$('li').each(function(index) {
$(this).toggleClass('red', index % 3 === 0);
});
element.css('width', 200); //修改css的樣式
element.css({
'background-color': 'red',
height: 200,
border: '10px solid #000',
marginTop: 100,
mArGinLeft: 100,
width: '+=200'
});
element.css('height', function(index, value) {
console.log(value);
return parseInt(value, 10) + 50;
});
console.log(element.width()); //內容的寬
console.log(element.height());
console.log(element.innerWidth()); //內容+內邊距
console.log(element.innerHeight());
console.log(element.outerWidth()); //內容+內邊距+邊框
console.log(element.outerHeight());
console.log(element.outerWidth(true)); //內容+內邊距+邊框+外邊距
console.log(element.outerHeight(true));
console.log(element.offset()); //返回距離文件的距離
console.log(element.position()); //返回距離最近的父元素的距離,沒有返回距離文件的距離
console.log(demo.scrollTop()); //獲取距離滾動條頂部的距離
console.log(demo.scrollLeft()); //獲取距離滾動條左側的距離
demo.scrollTop(300); //設定滾動條的距離
demo.scrollLeft(100);
var elements = $('li');
console.log(elements.html()); //返回html中的內容
console.log(elements.text()); //返回匹配元素的內容
console.log(elements.html('<strong>123</strong>')); //設定html中的內容
console.log(elements.text('<strong>123</strong>')); //設定匹配元素的內容
});
</script>
</body>
</html>
移動和插入元素
<!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