任务1：元素遍历操作
任务要求：
掌握元素遍历的操作。
任务实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<script>
$('li').each(function (index, domEle) {
console.log('第' + (index + 1) + '个li对象：');
console.log(domEle);
});
</script>
</body>
</html>
任务2：元素内容操作
任务要求：
获取表单元素的内容，然后实现设置表单元素的内容。
任务实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<span>我是div标签下的span标签</span>
</div>
<input type="text" value="请输入内容">
<script>
// 获取元素的内容
console.log($('div').html());
console.log($('div').text());
console.log($('input').val());
$('div').html('<span>我是内容</span> 我是div标签的内容');
$('div').text('我是span标签的内容');
$('input').val('123456');
</script>
</body>
</html>
任务3：利用css()方法操作元素样式
任务要求：
定义一个<div>标签，设置其宽度为100px，高度为100px，背景颜色为green。
任务实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
<style>
div { width: 100px; height: 100px; background-color: green; }
</style>
</head>
<body>
<div></div>
<script>
// 获取div元素的宽度
console.log($('div').css('width'));
// 设置div元素的宽度为200px
$('div').css('width', '200px');
// 设置div元素的高度为200px，背景颜色为pink
$('div').css({ height: '200px', backgroundColor: 'pink' });
</script>
</body>
</html>
任务4：操作元素的尺寸和位置
任务要求：
定义一个<div>标签，设置该标签的初始样式，宽度为50px，高度为50px，边框粗细为1px且颜色为黑色，绝对定位，距离左边20px，距离顶部20px。
任务实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
<style>
div {
width: 50px;
height: 50px;
border: 1px solid black;
position: absolute;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div></div>
<script>
// 获取元素的尺寸和位置
console.log($('div').width());
console.log($('div').height());
console.log($('div').offset());
// 设置元素的尺寸和位置
$('div').width(100);
$('div').height(100);
$('div').offset({ top: 50, left: 50 });
</script>
</body>
</html>
