-jq-事件触发(搜索框案例)/-音频-视频播放-load()-play()/

最新推荐文章于 2024-08-10 07:25:43 发布

喵帕斯_喵太

最新推荐文章于 2024-08-10 07:25:43 发布

阅读量453

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116667763

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01-jq-事件触发

<body>
    <input type="text" name="word"><button>搜索</button>

    <script>
        $(function () {
            // 给搜索按钮绑定点击事件
            $('button').on('click', function () {
                // 获取输入的数据
                let value = $('input').val().trim()

                if (value == '') return

                // 百度搜索
                alert('正在搜索' + value)
            })

            // 给页面增加一个键盘事件：keydown
            $(document).on('keydown', function (e) {
                // console.log(e)
                // 如何知道用户按了回车键：e.keyCode
                // console.log(e.keyCode)
                if (e.keyCode === 13) {
                    // 要做的事情跟点击搜索所做的事情一样：触发搜索按钮的事件
                    // $('button').click()

                    // triggeer('事件类型')
                    $('button').trigger('click')
                }
            })
        })
    </script>
</body>

02-音视频播放

<body>
    <audio src="音乐导航/mp3/7.mp3"></audio>
    <button>点我播放</button>
    <script>
        // jq没有提供音视频的操作API：只能用原生的
        // 原生音视频操作有两个API
        // play()：播放
        // load()：重新加载

        document.querySelector('button').onclick = function () {
            let audio = document.querySelector('audio')

            // 重新加载
            audio.load()
            // 播放
            audio.play()
        }

    </script>
</body>