01.吸頂條
02.自動播放選項卡
03.jQuery
01.吸頂條
offsetWidth
offsetHeight
可以直接獲取到div的寬度和高度炕婶，而且是不帶px， 并且樣式無論在哪都可以獲取到濒憋，這兩個屬性是只讀屬性
offsetTop
offsetLeft
可以直接獲取到div的距離瀏覽器上邊的距離和距離瀏覽器左邊的距離弛说，而且是不帶px容客， 并且樣式無論在哪都可以獲取到郊尝，這兩個屬性是只讀屬性
獲取可視區(qū)的寬度和高度
- 獲取寬高的時候二跋，要看有沒有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>
女星初狰，而彼時的文章還僅僅只是一個初出茅廬的小演員，婚后文章的事業(yè)漸漸走上正軌互例，但文章的心思也隨之膨脹了奢入，在馬伊琍懷二胎期間，文章出軌當紅女星姚笛。如今文章的事業(yè)再次上升腥光，而姚笛卻幾乎是萬劫不復关顷，成了人人喊打的過街老鼠,如今文章的事業(yè)可以說是有聲有色，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
// 循環(huán)給每一個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的時候嫉髓，重新創(chuàng)建定時器自動播放
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通過選擇器就可以找到指定的節(jié)點
id、class琅拌、標簽缨伊、層級
基本
:first 第一個
:last 最后一個
:even 偶數下標
:odd 奇數下標
:eq() 等于哪個下標
:gt() 大于哪個下標
:lt() 小于哪個下標
