01.吸顶条
02.自动播放选项卡
03.jQuery
01.吸顶条
offsetWidth
offsetHeight
可以直接获取到div的宽度和高度，而且是不带px， 并且样式无论在哪都可以获取到，这两个属性是只读属性
offsetTop
offsetLeft
可以直接获取到div的距离浏览器上边的距离和距离浏览器左边的距离，而且是不带px， 并且样式无论在哪都可以获取到，这两个属性是只读属性
获取可视区的宽度和高度
- 获取宽高的时候，要看有没有DTD的说明，如果有，使用documentElement，如果没有，使用body
var clientWidth = document.documentElement.clientWidth
var clientHeight = document.documentElement.clientHeight - 吸顶条具体代码
<style>
#lala {
width: 100%;
height: 200px;
background-color: red;
}
#dudu {
width: 100%;
height: 200px;
display: none;
}
</style>
<script>
window.onload = function () {
var odiv = document.getElementById('lala')
var oding = document.getElementById('dudu')
// 获取odiv距离网页顶部的距离
var offsettop = odiv.offsetTop
window.onscroll = function () {
// console.log('卷起高度' + document.documentElement.scrollTop)
// console.log('top' + odiv.offsetTop)
// 获取网页卷起的高度
var scrolltop = document.documentElement.scrollTop
if (scrolltop >= offsettop) {
// 修改odiv的定位以及top值
odiv.style.position = 'fixed'
odiv.style.top = '0px'
// 将提前准备好的div放出来顶到这里
oding.style.display = 'block'
} else {
// 吸顶条恢复到原来的布局
odiv.style.position = null
// 顶替的div隐藏起来
oding.style.display = 'none'
}
}
}
</script>
</head>
<body>
<p>前段时间文章因为导演马云的公益片《功守道》再次火了，要知道这部电影的主演可是包括了马云、李连杰、甄子丹、洪金宝、吴京、托尼贾、向佐等一大批功夫巨星，更重要的是文章还是这部戏的唯一编剧，据说当时李连杰拿来20多份剧本让马云看
<div id="lala"></div>
<div id="dudu"></div>
女星，而彼时的文章还仅仅只是一个初出茅庐的小演员，婚后文章的事业渐渐走上正轨，但文章的心思也随之膨胀了，在马伊琍怀二胎期间，文章出轨当红女星姚笛。如今文章的事业再次上升，而姚笛却几乎是万劫不复，成了人人喊打的过街老鼠,如今文章的事业可以说是有声有色，2017年9月，他凭借《陆垚知马俐》荣获第31届中国电影金鸡奖导演处女作奖，在颁奖典礼结束后，有媒体问及当年和姚笛的事情，文章泪撒当场，直言对比起她，看来当年文章是真的动真情了前段时间文章因为导演马云的公益片《功守道》再次火了，</p>
</body>
</html>
<script>
02.自动播放选项卡
代码如下：
<style>
.box {
width: 1000px;
border: 1px solid gray;
margin: 0 auto;
}
button {
width: 170px;
height: 100px;
font-size: 20px;
background-color: pink;
margin-left: 55px;
display: inline-block;
}
.box > div {
width: 970px;
height: 600px;
font-size: 50px;
background-color: yellow;
margin-left: 15px;
margin-top: 50px;
display: none;
}
.box > .active {
font-size: 30px;
background-color: blue;
}
.box > .show {
display: block;
}
</style>
</head>
<body>
<div class="box">
<button class="active">国产电影</button>
<button>韩日电影</button>
<button>欧美电影</button>
<button>其他电影</button>
<div class="show">霸王别姬、卧虎藏龙、大话西游、东邪西毒、无间道、功夫</div>
<div>釜山行、汉江怪物、奥特曼、灌篮高手、热血高校、午夜凶铃</div>
<div>肖申克的救赎、阿甘正传、敢死队、泰坦尼克号、这个杀手不太冷、盗梦空间</div>
<div>三傻大闹宝莱坞、摔跤吧、小萝莉的猴神大叔、厕所英雄</div>
</div>
</body>
</html>
<script>
// 首先找到最外层的box
var obox = document.getElementsByClassName('box')[0]
// 找到所有的button
var abtns = obox.getElementsByTagName('button')
// 找到所有的div
var adivs = obox.getElementsByTagName('div')
// 记录要切换的div获取按钮的下标
var number = 0
// 循环给每一个button添加点击事件
for (var i = 0; i < abtns.length; i++) {
abtns[i].index = i
abtns[i].onclick = function () {
// 首先清空所有的class
for (var j = 0; j < abtns.length; j++) {
abtns[j].className = ''
adivs[j].className = ''
}
// 然后给指定的添加class
this.className = 'active'
adivs[this.index].className = 'show'
// 将number更新一下
number = this.index
}
}
// 自动播放代码
function next() {
// 显示下一个需要显示的button和div
number++
number %= 4
// 先清掉所有的样式
for (var j = 0; j < abtns.length; j++) {
abtns[j].className = ''
adivs[j].className = ''
}
abtns[number].className = 'active'
adivs[number].className = 'show'
}
var timer = setInterval(next, 1000)
// 如果鼠标放到box上面，将定时器销毁，鼠标离开box的时候，重新创建定时器自动播放
obox.onmouseover = function () {
clearInterval(timer)
}
obox.onmouseout = function () {
timer = setInterval(next, 1000)
}
</script>
03.jQuery
jquery是什么？
jQuery是一个快速、小型、功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，并且具有在多个浏览器之间工作的易于使用的API。结合了通用性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。
压缩和非压缩
.min.js : 压缩版本，一行代码，没有了空格、缩进等
.js : 非压缩版本，正常的代码查看
使用方式
可以本地使用
<script src="jquery/jquery-1.11.3.min.js"></script>
可以引入网络文件使用
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
选择器
jquery通过选择器就可以找到指定的节点
id、class、标签、层级
基本
:first 第一个
:last 最后一个
:even 偶数下标
:odd 奇数下标
:eq() 等于哪个下标
:gt() 大于哪个下标
:lt() 小于哪个下标
网友评论