美文网首页
jQuery(二)

jQuery(二)

作者: 以宇宙为海的蓝鲸 | 来源:发表于2019-08-23 22:21 被阅读0次

    offset

    <body>
        <!-- offseth获取元素以左上角为原点的坐标,单位是像素 -->
        <!-- 获取匹配元素在当前视口的相对偏移。
        返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。 -->
        
        <p>1</p>
        <p>2</p>
        <script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
        <script>
            var p = $("p:last");
            //通过offset()获得值
            var offset = p.offset();
            //分别输出对应的值
            p.html("left:"+offset.left+"---top:"+offset.top)
        </script>
    </body>
    

    audio和video

    <body>
        <!-- 音频播放 ,添加controls="controls",调出控制台-->
        <audio src="../买辣椒也用券+-+起风了.mp3" controls="controls">
        </audio>
        <!-- 视频播放 -->
        <video src="...." controls="controls"></video>
        <script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
        <script></script>
    </body>
    

    each遍历jQuery对象

    <body>
        <ul>
            <li>行1</li>
            <li>行2</li>
            <li>行3</li>
            <li>行4</li>
            <li>行5</li>
            <li>行6</li>
        </ul>
        <script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                //遍历当前的所有li,each(function(){})
                $("ul>li").each(function(idx,ele){
                    //hanlder   callback,this代表当前Dom对象,
                    
                    console.log(this.innerHTML);
                    $(this).click(function(e){
                        console.log(this);
                        alert(this.innerHTML);
                    })
                });
            });
        </script>
    </body>
    

    each遍历jQuery对象

    <body>
        <ul>
            <li>行1</li>
            <li>行2</li>
            <li>行3</li>
            <li>行4</li>
            <li>行5</li>
            <li>行6</li>
        </ul>
        <script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                //遍历当前的所有li,each(function(){})
                $("ul>li").each(function(idx,ele){
                    //hanlder   callback,this代表当前Dom对象,
                    console.log(this.innerHTML);
                    $(this).click(function(e){
                        console.log(this);
                        alert(this.innerHTML);
                    })
                });
            });
        </script>
    </body>
    

    了解date

    <body>
        <div data-url="www.baidu.com" data-img="img/xxx.png"></div>
        <script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
        <script>
            //读取date
            $(function(){
                //输出data-url="www.baidu.com"
                alert($("div").data("url"));
                //输出data-img="img/xxx.png"
                alert($("div").data("img"));
            })
        </script>
    </body>
    

    多个css属性

    <body>
        <p>hello,good day</p>
        <script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                //使用json格式为其赋多个属性值
                $("p").css({"color":"crimson","font-family":"kaiti"});
            });
        </script>
    </body>
    

    案例:格子隔行变色和点击单个格子变色

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            table {
                border-collapse: collapse;
            }
            td {
                width: 100px;
                height: 60px;
            }
        </style>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td>格子1</td>
                <td>格子2</td>
                <td>格子3</td>
                <td>格子4</td>
            </tr>
            <tr>
                <td>格子5</td>
                <td>格子6</td>
                <td>格子7</td>
                <td>格子8</td>
            </tr>
            <tr>
                <td>格子9</td>
                <td>格子10</td>
                <td>格子11</td>
                <td>格子12</td>
            </tr>
            <tr>
                <td>格子13</td>
                <td>格子14</td>
                <td>格子15</td>
                <td>格子16</td>
            </tr>
        </table>
        <script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                //行数为双的格子为skyblue,行数为单的格子为crimson
                $("tr:nth-child(2n)").css({"background":"skyblue","font-family":"kaiti"});
                $("tr:nth-child(2n-1)").css("background","crimson");
                //遍历所有的格子
                $("table td").each(function(idx,ele){
                    //添加点击事件,当点击时格子背景色为白色
                    $(this).click(function(e){
                        console.log(this.innerHTML);
                        $(this).css("background","white");
                    });
                });
            });
        </script>
    </body>
    </html>
    

    案例:播放按钮开始与暂停

    <head>
        <meta charset="utf-8">
        <title>音乐播放与暂停</title>
        <style type="text/css">
            video {
                display: none;/*隐藏播放栏*/
            }
            button {
                background-image: url(../img/player_bg.png);
                width: 50px;
                height: 50px;
                background-position: -100px -38px;
                /*background-position: -329px -84px;*/
            }
        </style>
    </head>
    <body>
        <video src="../music/1.mp3" controls="controls"></video>
        <button type="button" onclick="isPlay()"><!-- play --></button>
        <script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
        <script>
            var video = document.getElementsByTagName("video")[0];
            //声明一个额外变量,进行if判断
            var flag = false;
            var but = document.getElementsByTagName("button")[0];
            function isPlay(){
                if (flag==false) {
                    //如果原先状态为停止播放,则进行播放,并修改图标和flag值
                    video.play();
                    // but.innerHTML = "pause";
                    but.style.backgroundPosition="-329px -84px";
                    flag = true;
                }else {
                    //如果原先状态播放,则点击停止,并修改图标和flag值
                    video.pause();
                    // but.innerHTML = "play";
                    but.style.backgroundPosition="-100px -38px";
                    flag = false;
                }
            }
        </script>
    </body>
    

    事件处理on和off

    <body>
        <button>点击</button>
        <button>点击2</button>
        <p onclick="demo()" >12345</p>
        <p onclick="demo()" >1234567</p>
        <p></p>
        <script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
        <script>
            //on可为同一对象添加多个事件
            $("button:first").on({
                //添加点击事件,点击时弹出hello
                click:function(){alert("hello");},
                //添加鼠标进入事件,触发时,背景变色
                mouseenter:function(){$("button").css("background-color","yellow")}
            })
    
            //移除所有p标签的所有事件
            $("p").off("click","**");
            alert("ni");
            function demo(){
                alert("hello");
            }
            //off移除多个事件
            //移除所有p标签的所有事件
            $("p").off();
            //移除所有p标签的点击事件
            
            //事件只执行一次
            $("button:last").on(
                "click",function(){alert("hello22");
                $("button:last").off("click","**");
            });
        </script>
    </body>
    

    相关文章

      网友评论

          本文标题:jQuery(二)

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