參考鏈接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.red {
background-color: red;
}
</style>
</head>
<body>
<div id="test">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
<script src="main.js"></script>
</body>
</html>
- 獲取元素
直接使用$+選擇器獲取元素
$('.child')
$('#test')
- 鏈?zhǔn)讲僮?/li>
//先獲取類名為child的元素，給類名為child元素添加類名red，然后移除了 red
$('.child').addClass('red').removeClass('red')
- 創(chuàng)建元素
$("<div class='child'>4</div>")
$("#test").append("<div class='child'>4</div>")
- 移動(dòng)元素
//#test內(nèi)部最后插入子元素div
$('#test').append("<div class='child'>4</div>");
$("<div class='child'>4</div>").appendTo($('#test'))
//test內(nèi)部最前面插入子元素div
$('#test').prepend("<div class='child'>0</div>");
$("<div class='child'>0</div>").prependTo($('#test'))
//test外部后面插入相鄰元素div
$('#test').after("<div id='test2'>test2</div>");
$("<div id='test2'>test2</div>").insertAfter($('#test'))
//test外部前面插入相鄰元素div
$('#test').before("<div id='test0'>test0</div>");
$("<div id='test0'>test0</div>").insertBefore($('#test'))
- 修改元素的屬性
//獲取和修改css樣式屬性
$("#test").css("color");
$("#test").css("color","red");
//獲取和設(shè)置元素任意屬性
$(".child").attr("width");
$(".child").attr("title","child");
