jquery学习——案例

最新推荐文章于 2021-06-06 18:58:42 发布

fuzuxian

最新推荐文章于 2021-06-06 18:58:42 发布

阅读量165

点赞数

分类专栏：前端

原文链接：https://blog.youkuaiyun.com/wuyxinu/article/details/103669718

版权

前端专栏收录该内容

17 篇文章

订阅专栏

------参考博客------

案例1：下拉菜单

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * { margin: 0;	 padding: 0; }
        ul { list-style: none; }
        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }
        .wrap li{
            background-image: url(images/libg.jpg);
        }
        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }
        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }
        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
    //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。

    //获取一级菜单li的方式:
    //$('li');//不行
    //$('ul>li');//不行
    //$('.wrap li');//不行
    //$('.wrap>ul>li')//可行的.

    //1.给一级菜单li设置鼠标移入事件，二级菜单显示。
    $('.wrap>ul>li').mouseover(function () {
      //console.log(this);//谁触发了鼠标移入事件,那这个this就是谁,this还是一个dom对象.
      // $(this).children('ul').css('display','block');//显示就是更改display属性为block.
      $(this).children('ul').show();//show()方法本质上还是更新display属性为block.
    });

    //2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
    $('.wrap>ul>li').mouseout(function () {
      $(this).children('ul').hide(); //hide()方法本质上还是更新display属性为none
    });

    //3.思考题:
    //为什么不给一级菜单a标签设置鼠标移入和离开事件?
    //因为这样的话,选不到二级菜单.
    // $('.wrap>ul>li>a').mouseover(function () {
    //   $(this).siblings('ul').show();
    // });
    // $('.wrap>ul>li>a').mouseout(function () {
    //   $(this).siblings('ul').hide();
    // });
  });
</script>

案例2：突出展示

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * { margin: 0;  padding: 0;  }
        ul { list-style: none;  }
        body { background: #000;  }
        .wrap {
            margin: 100px auto 0;
            width: 630px;
			height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }
        .wrap li { float: left;  margin: 0 10px 10px 0; }
        .wrap img { display: block;  border: 0; }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
    </ul>
</div>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //需求1:给小人物所在的li标签设置鼠标移入事件:当前li标签透明度为1,其他的兄弟li标签透明度为0.4
    //需求2:鼠标离开大盒子,所有的li标签的透明度改成1.

    //获取小人物们所在的li
    //$('.wrap li')//可以的
    //console.log($('.wrap').find('li'));//可以的
    //需求1:
    $('.wrap').find('li').mouseenter(function () {
        console.log($(this).css('opacity', 1));//这个css方法有返回值,返回值就是设置这个方法的元素本身.
        console.log($(this).css('opacity', 1).siblings('li'));
        $(this).css('opacity', 1).siblings('li').css('opacity',0.4);
    });
    //需求2:
    $('.wrap').mouseleave(function () {
        //$('.wrap').find('li').css('opacity',1);
        //console.log($(this));//在这个离开事件中,this是这整个大盒子.
        $(this).find('li').css('opacity',1);
    });
  });
</script>