day29 js基础5

作者: 跟我念一遍 | 来源:发表于2018-08-25 13:55 被阅读0次

// 获取可视区的宽度和高度
// 获取宽高的时候，要看有没有DTD的说明，如果有，使用documentElement，如果没有，使用body
var clientWidth = document.documentElement.clientWidth
var clientHeight = document.documentElement.clientHeight

1、吸顶条

// 可以直接获取到div的宽度和高度，而且是不带px，并且样式无论在哪都可以获取到，这两个属性是只读属性
offsetWidth
offsetHeight
// 可以直接获取到div的距离浏览器上边的距离和距离浏览器左边的距离，而且是不带px，并且样式无论在哪都可以获取到，这两个属性是只读属性
offsetTop
offsetLeft

滚动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动事件</title>
</head>
<body>
    <p>此处添加文章</p>
</body>
</html>
<script>
// 滚动就会触发这个事件
window.onscroll = function () {
    // 查看网页卷起的高度，如果是在DTD下，documentElement获取，如果不在，通过body获取
    console.log(document.documentElement.scrollTop)
}
</script>

吸顶条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动事件</title>
    <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>此处添加文章
        <div id="lala"></div>
        <div id="dudu"></div>
此处添加文章
</p>
</body>
</html>
<script>
</script>

2、自动播放选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自动播放选项卡</title>
    <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>

3、jquery

jquery是什么？

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery是一个快速、小型、功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，并且具有在多个浏览器之间工作的易于使用的API。结合了通用性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。

版本要求：看版本.txt
压缩和非压缩
.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() 小于哪个下标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div id="lala">周杰伦</div>
    <div class="star">王力宏</div>
    <div class="star">林俊杰</div>
    <div class="song">
        <div class="wang">
            <ul>
                <li>王宝强</li>
                <li>王者荣耀</li>
                <li>王八蛋</li>
            </ul>
        </div>
        <div class="ma">
            <ul>
                <li>马云</li>
                <li>马蓉</li>
                <li>马化腾</li>
            </ul>
        </div>
    </div>
</body>
</html>
<script>
$(function () {
    // jquery代码都写到这里
    // $('#lala').css('backgroundColor', 'red')
    // $('.star').css('backgroundColor', 'yellow')
    // $('li').css('backgroundColor', 'blue')
    // $('.song > li').css('backgroundColor', 'cyan')

    // 第一个
    // $('li:first').css('backgroundColor', 'cyan')
    // 最后一个
    // $('li:last').css('backgroundColor', 'cyan')
    // 偶数下标的
    // $('li:even').css('backgroundColor', 'cyan')
    // 奇数下标的
    // $('li:odd').css('backgroundColor', 'cyan')
    // 等于1的
    // $('li:eq(1)').css('backgroundColor', 'cyan')
    // 大于2的
    // $('li:gt(2)').css('backgroundColor', 'cyan')
    // 小于2的
    // $('li:lt(2)').css('backgroundColor', 'cyan')
})
</script>

网友评论

本文标题：day29 js基础5

本文链接：https://www.haomeiwen.com/subject/kixgiftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！