前端学习:jQuery学习--Day03

前端学习:jQuery学习–Day03

ps:这几天偷了点懒呜呜外加考试耽误了几天学习
最后自己做了一个给女朋友的惊喜点滴记录note

大纲

  • 自定义事件 自动触发
  • 事件委托
  • 鼠标移入移出事件
  • 电影排行榜小练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Day03</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        /*电影排行榜小练习*/
        .box{
            width: 300px;
            height: 450px;
            margin: 50px auto;
            border: 1px solid #000;
        }
        .box>h1{
            font-size: 20px;
            line-height: 35px;
            color: deeppink;
            padding-left: 10px;
            border-bottom: 1px dashed #ccc;
        }
        ul>li{
            list-style: none;
            padding: 5px 10px;
        }
        ul>li:nth-child(-n+3) span{
            background: deeppink;
        }
        ul>li>span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #ccc;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
        }
        .content{
            overflow: hidden;
            margin-top: 5px;
            display: none;
        }
        .content>img{
            width: 120px;
            height: 72px;

        }
        .content>p{
            width: 150px;
            height: 120px;
            float: right;
            font-size: 12px;
            line-height: 20px;
        }
        .current .content{
            display: block;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            /*
            自定义事件 必须满足两个条件:
            1.事件必须通过on绑定
            2.事件必须通过trigger来触发
             */

            /*
            利用trigger触发子元素带命名空间的事件,那么父元素带相同命名空间的事件也会被触发,而父元素没有命名空间的事件不会被触发
            利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
             */

            /*
            事件委托
             */
            $("button").click(function (){
                $("ul").append("<li>我是新增的li</li>");
            });

            /*
            在jQuery中,如果通过核心函数找到的元素不止一个,
            那么在添加事件的时候j Query会遍历所有找到的元素,给所有找到的元素添加事件(自动遍历)
             */
            // $("ul>li").click(function (){
            //     console.log($(this).html());
            // });

            /*
            但是如果用上面的方法新增的li没有被绑上这个事件
            因此我们利用事件委托,把这个事件委托给已经加载完毕的ul去做
            那我们给ul绑定的点击事件,this怎么知道自己是指向li?
            通过事件冒泡,ul是li的父亲,ul监听点击事件,委托给li,li再冒泡给ul
             */
            $("ul").delegate("li","click",function (){
                console.log($(this).html());
            });

            /*
            mouseover/mouseout事件,子元素被移入移出也会触发父元素的事件
             */
            // $(".father").mouseover(function(){
            //     console.log("father被移入了");
            // });
            // $(".father").mouseout(function(){
            //     console.log("father被移出了");
            // });

            /*
            mouseenter/mouseleave事件,子元素被移入移出不会触发父元素的事件
            推荐使用
             */
            // $(".father").mouseenter(function(){
            //     console.log("father被移入了");
            // });
            // $(".father").mouseleave(function(){
            //     console.log("father被移出了");
            // });
            /*
            hover同时回调移入和移出函数,和mouseenter/mouseleave事件等价
             */
            $(".father").hover(function(){
                console.log("father被移入了");
            },function(){
                console.log("father被移出了");
            });

            /*
            电影排行榜小练习
             */
            //监听li移入事件
            $("li").mouseenter(function (){
                $(this).addClass("current");
            });
            //监听li移出事件
            $("li").mouseleave(function (){
                $(this).removeClass("current");
            });
        });
    </script>
</head>
<body>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
<button>新增一个li</button>
<div class="father">
    <div class="son"></div>
</div>

<!--电影排行榜小练习-->
<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li><span>1</span>电影名称
            <div class="content">
                <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
                <p>武汉理工:不予通过王攀招研资格
                    1127日晚间,武汉理工大学发布情况通报,表示学校收到对教师王攀招生资格的异议。学校对此高度重视,经审核,决定该教
                </p>
            </div>
        </li>
        <li><span>2</span>电影名称
            <div class="content">
                <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
                <p>武汉理工:不予通过王攀招研资格
                    1127日晚间,武汉理工大学发布情况通报,表示学校收到对教师王攀招生资格的异议。学校对此高度重视,经审核,决定该教
                </p>
            </div>
        </li>
        <li><span>3</span>电影名称
            <div class="content">
                <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
                <p>武汉理工:不予通过王攀招研资格
                    1127日晚间,武汉理工大学发布情况通报,表示学校收到对教师王攀招生资格的异议。学校对此高度重视,经审核,决定该教
                </p>
            </div>
        </li>
        <li><span>4</span>电影名称
            <div class="content">
                <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
                <p>武汉理工:不予通过王攀招研资格
                    1127日晚间,武汉理工大学发布情况通报,表示学校收到对教师王攀招生资格的异议。学校对此高度重视,经审核,决定该教
                </p>
            </div>
        </li>
        <li><span>5</span>电影名称
            <div class="content">
                <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
                <p>武汉理工:不予通过王攀招研资格
                    1127日晚间,武汉理工大学发布情况通报,表示学校收到对教师王攀招生资格的异议。学校对此高度重视,经审核,决定该教
                </p>
            </div>
        </li>
        <li><span>6</span>电影名称
            <div class="content">
                <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
                <p>武汉理工:不予通过王攀招研资格
                    1127日晚间,武汉理工大学发布情况通报,表示学校收到对教师王攀招生资格的异议。学校对此高度重视,经审核,决定该教
                </p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

最后是用鼠标移入移出事件做的恋爱点滴记录手册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我和倩倩的小日子</title>
    <style>
        <style>
        *{
            margin:0;
            padding: 0;
        }
        /*电影排行榜小练习*/
        .box{
            width: 600px;
            height: 900px;
            margin: 50px auto;
            border: 1px solid #000;
        }
        .box>h1{
            font-size: 20px;
            line-height: 35px;
            color: deeppink;
            padding-left: 10px;
            border-bottom: 1px dashed #ccc;
        }
        ul>li{
            list-style: none;
            padding: 20px 10px;
        }
        ul>li>span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: deeppink;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
        }
        .content{
            overflow: hidden;
            margin-top: 5px;
            display: none;
        }
        #first{
            width: 150px;
            height: 211px;
        }
        #second{
            width: 200px;
            height: 185px;
        }
        #third{
            width: 150px;
            height: 246px;
        }
        #fourth{
            width: 150px;
            height: 200px;
        }
        .content>p{
            width: 450px;
            height: 80px;
            float: left;
            font-size: 15px;
            line-height: 20px;
        }
        .current .content{
            display: block;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $("li").mouseenter(function (){
                $(this).addClass("current");
            });
            //监听li移出事件
            $("li").mouseleave(function (){
                $(this).removeClass("current");
            });//编写jQuery代码
        });
    </script>
</head>
<body>
<div class="box">
    <h1>我和倩倩的点点滴滴</h1>
    <ul>
        <li><span>1</span>酒吧约会
            <div class="content">
                <img src="../第一次酒吧约会.jpg" id="first">
                <p>
                    和倩倩刚认识的时候在胡桃里喝啤酒嘿嘿嘿,我第一次送给她了一大束玫瑰花好浪漫呢嘻嘻嘻
                </p>
            </div>
        </li>
        <li><span>2</span>图书馆刷夜
            <div class="content">
                <img src="../第一次图书馆刷夜.jpg" id="second">
                <p>
                    考试周和倩倩一起在图书馆刷夜呢!虽然倩倩一去了就开始睡觉了哈哈哈哈哈哈哈。抓紧赶在她还没睡觉觉之前自拍一张
                </p>
            </div>
        </li>
        <li><span>3</span>烟台最美合影
            <div class="content">
                <img src="../大宝最喜欢的一张照片.jpg" id="third">
                <br/>
                <p>
                    在烟台的宜尚拍的照片呢,这是大宝最喜欢的照片啦!!(我们俩把全国各地的宜尚都住遍了呢嘿嘿)
                </p>
            </div>
        </li>
        <li><span>4</span>青岛地铁对镜自拍
            <div class="content">
                <img src="../在青岛的地铁上一起对镜自拍.jpg" id="fourth">
                <p>
                    自带自拍杆的大宝就是青岛最帅吃播!和倩倩在地铁上对着镜子拍模糊照嘿嘿,你别说还挺好看的呢!
                </p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

效果图
随便乱做的哈哈哈哈

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页