01-jq-显式迭代-each()
<body>
<ul>
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
<li>隔壁老王6</li>
<li>隔壁老王7</li>
<li>隔壁老王8</li>
<li>隔壁老王9</li>
<li>隔壁老王10</li>
</ul>
<script>
$(function () {
// each主要还是遍历jq对象
const $lis = $('li')
// 1. 遍历jq对象：jq对象.each(function(){})
$lis.each(function (i, ele) {
console.log(i, ele)
})
// 2. 其他对象遍历：$.each(对象,function(){})
let lis = document.querySelectorAll('li')
$.each(lis, function (i, ele) {
console.log(i, ele)
})
// 遍历数组
$.each([1, 2, 3, 4], function (i, ele) {
console.log(i, ele)
})
})
</script>
</body>
注意：
02-jq-创建元素-append()-prepend()
<body>
<script>
$(function () {
// 创建元素
const $li1 = $('<li></li>')
const $li2 = $('<li><a href="#">前端</a></li>')
const $img = $('<img src="images/1-small.jpg">')
// console.log($li1, $li2, $img)
// 添加到父元素：jq对象：父元素
// append()放到父元素的最后面：appendChilid
$('body').append($img)
// prepend()放到父元素的最前面
$('body').prepend($li2)
})
</script>
</body>
注意：
1.append()放到父元素的最后面
2.prepend()放到父元素的最前面
03-jq-创建元素-兄弟关系-after()-before()
<body>
<div class="box">前端小白</div>
<script>
$(function () {
// 1. 创建元素
// 2. 添加元素（外部添加）：after() before()
const $box = $('.box')
$box.after($('<span>我是后来的</span>'))
$box.before($('<span>我是最大的</span>'))
})
</script>
</body>
01-jq-尺寸-inner-outer-outer(ture)-width||height
<!DOCTYPE html>
<html lang="zh-CN">
<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>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid skyblue;
padding: 50px;
margin: 50px;
}
</style>
</head>
<body>
<div class="box">
前端小白
</div>
<script>
$(function () {
// 如果要多次使用，且不会产生修改：可以先获取
$box = $('.box')
// 宽高
console.log('元素内容宽高', $box.width(), $box.height())
// 可视区域
console.log('可视区域', $box.innerWidth(), $box.innerHeight())
// 真实宽高
console.log('真实宽高', $box.outerWidth(), $box.outerHeight())
// 带margin
console.log('真实宽高带margin', $box.outerWidth(true), $box.outerHeight(true))
// 修改数据（不会使用一下方式修改元素的宽高样式）
// $box.width(200) // 带数字参数就可以修改
// $box.innerWidth(500) // 修改的是元素width部分
// $box.outerWidth(1000)
// console.log($box.outerWidth())
// 提问：如何获取页面的可视宽度？
// 一般用：html根元素比较多（实际上，谷歌下：document、html、body都可以
console.log($(document.documentElement).innerWidth())
})
</script>
</body>
</html>
示例：
