jQuery第一天笔记06——jq对象和dom对象转化

·青红造了个白·

于 2021-08-07 17:47:12 发布

阅读量94

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43861647/article/details/119490077

版权

这个示例展示了如何使用HTML5的CSS动画和JavaScript控制一个绿色方块的旋转，并结合音频元素实现点击方块时播放或暂停音乐的功能。通过jQuery库进行DOM操作，实现了元素状态切换与音频播放的联动。

摘要由CSDN通过智能技术生成

<!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>
            p{
                width: 100px;
                height: 100px;
                background: lime;
                animation: move 2s infinite linear;
            }
            .play{
                /* 动画暂停 */
               animation-play-state: paused;
            }
            @keyframes move {
               0%{
                   transform: rotate(0deg);
               } 
              100%{
                   transform: rotate(360deg);
               } 
            }
        </style>
    </head>
    <body>
        <p ></p>
        <!-- 引入音乐 controls播放控制条 autoplay自动播放-->
        <audio src="music.m4a"  autoplay controls></audio>
        <div id="app">
            歌词
        </div>

        <script src="js/jquery.min.js"></script>
        <script>
            // jq对象转为dom对象
            $("div")[0].style.color='red';

            $('p').click(function(){
                $(this).toggleClass('play');
                if($(this).hasClass('play')){
                      // pause()暂停音乐 原生的方法 
                    $('audio')[0].pause();
                }else{
                     // play()播放音乐 原生的方法
                     $('audio')[0].play();
                }
            })
        </script>
    </body>
</html>