参考链接
<!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')
- 链式操作
//先获取类名为child的元素，给类名为child元素添加类名red，然后移除了 red
$('.child').addClass('red').removeClass('red')
- 创建元素
$("<div class='child'>4</div>")
$("#test").append("<div class='child'>4</div>")
- 移动元素
//#test内部最后插入子元素div
$('#test').append("<div class='child'>4</div>");
$("<div class='child'>4</div>").appendTo($('#test'))
//test内部最前面插入子元素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");
//获取和设置元素任意属性
$(".child").attr("width");
$(".child").attr("title","child");
