JavaScript-功能

最新推荐文章于 2024-05-19 02:32:57 发布

jiuyue_77

最新推荐文章于 2024-05-19 02:32:57 发布

阅读量65

点赞数 1

分类专栏：前端文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/jiuyue_77/article/details/126318550

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

第五章 JavaScript-功能

文章目录

第五章 JavaScript-功能
一、定时器与延时器
二、jQuery的使用
三、window
四、监听窗口
五、table栏
六、跳转
总结

一、定时器与延时器

<!DOCTYPE html>
<html lang="en">

<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>

    </style>
</head>

<body>
    <div>开始计数</div>
    <section>结束计时</section>
    <p></p>
</body>

<script>

    // 定时器：每隔固定的时间就触发一次
    // 2个参数：函数，时间（以毫秒为单位）
    var i = 1
    var div = document.querySelector('div')
    var sec = document.querySelector('section')
    div.onclick = function () {
        var timer = setInterval(function () {
            console.log(i++)
        }, 1000)

        sec.onclick = function () {
            // 清除计时器
            clearInterval(timer)
        }
    }

    // 在页面上显示实时时间
    var p = document.querySelector('p')

    setInterval(function () {
        var date = new Date()
        p.innerHTML = date.toLocaleString()
    }, 1000)



    // 延时器,延迟固定的时间再触发函数
    setTimeout(function(){
        console.log(i++)
    },3000)

    



</script>



</html>

二、jQuery的使用

1.jQuery的引入

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="./jquery.js"></script>
</head>

<body>
    <p class="jq" id="jq">
        jquery是封装js代码的框架，用原生js写的功能，都可以用jq的语法编写，而且更加简便
        <br>
        jq实际上是一个js文件，所以可以用script进行引入
    </p>
</body>

<script>

    // 查看jquery文件有没有引进来，成功显示true
    console.log($ === jQuery)
    // 改变元素的文本
    // $('p').html('看看有没有改变')
    // 改变元素的样式
    $('.jq').css('color','red')
    // 改变元素的多条样式
    $('#jq').css({
        'fontSize' : '20px',
        'fontFamily' : '楷体'
    })

</script>


</html>

2.使用jQuery实现隔行变色

<!DOCTYPE html>
<html lang="en">
<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>
    <script src="./jquery.js"></script>
    <style>
        table{
            border-collapse: collapse;
        }

        tr,td{
            border: 1px solid gray;
            width: 60px;
            height: 30px;
            text-align: center;
        }
        /* css伪类的方法 */
        /* tr:nth-of-type(2n+1){
            background-color: red;
        }

        tr:nth-of-type(2n){
            background-color: blue;
        } */
    </style>
</head>
<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>小米</td>
            <td>43</td>
            <td>32</td>
            <td>21</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>32</td>
            <td>56</td>
            <td>33</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>23</td>
            <td>67</td>
            <td>54</td>
        </tr>
    </table>
</body>

<script>
    // 奇数行
    $('tr:even').css('backgroundColor','red')
    // 偶数行
    $('tr:odd').css('backgroundColor','blue')


</script>


</html>

3.使用jQuery实现动画效果

<!DOCTYPE html>
<html lang="en">
<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>
    <script src="./jquery.js"></script>
    <style>

        *{
            /* 取消选中蓝条 */
            user-select: none;
        }

        img{
            width: 500px;
            height: 300px;
            display: none;
        }
    </style>
</head>
<body>
    <button class="btn1">显示</button>
    <button class="btn2">消失</button>
    <br>
    <img src="./icon1.webp">
</body>

<script>

    $('.btn1').click(function(){
        // 显示
        // $('img').show(500)
        // 淡入
        // $('img').fadeIn(500)
        // 滑入
        $('img').slideDown(500)
    })

    $('.btn2').click(function(){
        // 隐藏
        // $('img').hide(500)
        // 淡出
        // $('img').fadeOut(500)
        // 滑出
        $('img').slideUp(500)
    })




</script>

</html>

4.使用jQuery实现折叠卡效果

<!DOCTYPE html>
<html lang="en">
<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>
    <script src="./jquery.js"></script>
    <style>
        .zhedie{
            display: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li class="zhedie">导航5</li>
        <li class="zhedie">导航6</li>
        <li class="zhedie">导航7</li>
        <button>点击展开或折叠选项</button>
    </ul>
</body>

<script>
    // 给按钮设置点击事件
    $('button').click(function(){
        // 切换元素的显示状态
        $('.zhedie').toggle()
    })

</script>

</html>

三、window

<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>

</body>

<script>

    // window对象是js访问窗口的顶级对象
    // window是一个全局对象，我们定义在全局域内的变量或函数都会变成windew对象的属性和方法
    // 在调用时可以省略
    // window.console.log(window)

    function fun() {
        console.log('这是一个函数')
    }
    // 在全局域内声明的fun方法已经变成了window的方法，所以用window.来调用
    window.fun()

    // 窗口加载事件，页面加载结束后调用的函数
    window.onload = function () {
        console.log('这是窗口加载事件')
    }


    function openWin(){
        // 参数 1.目标网页 2.提示信息 3.窗口宽高
        myWindow = window.open('http://www.baidu.com','百度','width=500,height=500')
    }

    openWin()


</script>


</html>

四、监听窗口

<!DOCTYPE html>
<html lang="en">
<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>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>

<script>

    var div = document.querySelector('div')

    window.addEventListener('resize',function(){
        // console.log('窗口的大小变化了')
        // 获取当前窗口的宽度
        // console.log(window.innerWidth)

        if(window.innerWidth <= 800){
            div.style.display = 'none'
        }else{
            div.style.display = 'block'
        }

    })




</script>



</html>

五、table栏

<!DOCTYPE html>
<html lang="en">

<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>
        div {
            width: 80px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            float: left;
            margin-left: 10px;
            border: 1px solid lightgray;
        }

        section{
            width: 50px;
            height: 50px;
            position: fixed;
            right: 50px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div>模块1</div>
    <div>模块2</div>
    <div>模块3</div>
    <div>模块4</div>
    <div>模块5</div>

    <section>返回</section>
</body>

<script>

    // 排他思想

    var divs = document.querySelectorAll('div')
    console.log(divs)
    // 给数组设置点击事件需要先遍历数组
    for (var i = 0; i < divs.length; i++) {

        divs[i].onclick = function () {
            // 因为要给所有的div清除背景颜色，再单独设置当前点击的div的样式，所以要再次遍历div
            for(var i = 0; i<divs.length; i++){
                // 统一设置所有div清除背景颜色
                divs[i].style.backgroundColor = ''
            }
            // 将当前点击的div背景颜色变成红色
            // this在普通函数里指向正在调用函数的元素（谁调用，就指向谁）
            // this在事件里，指向触发事件的对象
            this.style.backgroundColor = 'red'

        }

    }

    var sec = document.querySelector('section')

    sec.onclick = function(){
        // 返回到上一级页面
        history.back()
    }


</script>


</html>

六、跳转

<!DOCTYPE html>
<html lang="en">
<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>
        body{
            height: 2000px;
        }

        section{
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            position: fixed;
            right: 50px;
            bottom: 50px;
            border: 1px solid gray;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div>点击我，跳转到指定页面</div>
    <section>返回顶部</section>
</body>

<script>

    var div = document.querySelector('div')

    div.onclick = function(){
        // 跳转到指定页面
        location.href = 'table栏.html'

    }

    var sec = document.querySelector('section')
    var body = document.querySelector('body')
    sec.onclick = function(){
        // 在w3c标准下，document.body.scrollTop的值恒为0，所以要用下面的方法代替
        // document.body.scrollTop = 0
        // documentElement:获取到滚动条的位置
        document.documentElement.scrollTop = 0

    }

</script>

</html>