jQuery第一天案例

最新推荐文章于 2023-03-23 10:18:32 发布

库库好困

最新推荐文章于 2023-03-23 10:18:32 发布

阅读量176

点赞数

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

本文链接：https://blog.csdn.net/m0_46597922/article/details/106579656

版权

四：jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简单案例-隔行变色

<body>
    <ul>
        <li>这是什么呢</li>
        <li>这是什么呢</li>
        <li>这是什么呢</li>
        <li>这是什么呢</li>
        <li>这是什么呢</li>
        <li>这是什么呢</li>
        <li>这是什么呢</li>
        <li>这是什么呢</li>
        <li>这是什么呢</li>
        <li>这是什么呢</li>
    </ul>

    <script src="./jquery.min.js"></script>
    <script>
        // 第一种：
        $(function() {
            // var lis = document.querySelectorAll('li');

            // for(var i = 0; i < lis.length; i++) {
            //     if(i % 2 === 0) {
            //         lis[i].style.backgroundColor = 'pink';
            //     } else {
            //         lis[i].style.backgroundColor = 'lime';
            //     }
            // }


            // 第二种：
            var lis = $('li');

            for(var i = 0; i < lis.length; i++) {
                if(i % 2 === 0) {
                    // i为偶数：
                    lis[i].style.backgroundColor = 'pink';
                } else {
                    // i为奇数：
                    lis[i].style.backgroundColor = 'lime';
                }
            }
        })
    </script>
</body>

在这里插入图片描述

隔行变色（过滤选择器知识点）

<body>
    <ul>
        <li>波哥的妹子</li>
        <li>波哥的妹子</li>
        <li>波哥的妹子</li>
        <li>波哥的妹子</li>
        <li>波哥的妹子</li>
        <li>波哥的妹子</li>
        <li>波哥的妹子</li>
        <li>波哥的妹子</li>
        <li>波哥的妹子</li>
        <li>波哥的妹子</li>
    </ul>

    <script src="./jquery.min.js"></script>
    <script>
        $(function() {

            // :odd 从获取到所有元素中来过滤出下标为奇数的li
            $('li:odd').css('backgroundColor' , 'lime');

            // :even 从获取到所有元素中来过滤出下标为偶数的li
            $('li:even').css('backgroundColor' , 'pink');

            // :first 从获取到所有元素中来过滤出第一个
            $('li:first').css('fontSize' , '50px');

            // :last 从获取到所有元素中来过滤出最后一个
            $('li:last').css('fontSize' , '50px');

            // :eq(下标) 从获取到所有元素中来过滤出指定下标
            $('li:eq(4)').css('height' , '100px');
        })
    </script>
</body>

在这里插入图片描述

案例1-下拉菜单（选择器：筛选选择器知识点）

    <style>
        * {
          margin: 0;
          padding: 0;
        }

        ul {
          list-style: none;
        }

        .wrap {
          width: 330px;
          height: 30px;
          margin: 100px auto 0;
          padding-left: 10px;
          background-image: url(imgs/bg.jpg);
        }

        .wrap li {
          background-image: url(imgs/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 class="ul">
            <li><a href="javascript:void(0);">二级菜单11</a></li>
            <li><a href="javascript:void(0);">二级菜单12</a></li>
            <li><a href="javascript:void(0);">二级菜单13</a></li>
          </ul>
        </li>
        <li>
          <a href="javascript:void(0);">一级菜单2</a>
          <ul>
            <li><a href="javascript:void(0);">二级菜单21</a></li>
            <li><a href="javascript:void(0);">二级菜单22</a></li>
            <li><a href="javascript:void(0);">二级菜单23</a></li>
          </ul>
        </li>
        <li>
          <a href="javascript:void(0);">一级菜单3</a>
          <ul>
            <li><a href="javascript:void(0);">二级菜单31</a></li>
            <li><a href="javascript:void(0);">二级菜单32</a></li>
            <li><a href="javascript:void(0);">二级菜单33</a></li>
          </ul>
        </li>
      </ul>
    </div>

    <script src="./jquery-1.12.4.js"></script>
    <script>
        //思路：
        //1. 找到三个一级菜单的li
        //2. 注册mouseover事件, 让当前li下的ul显示
        //3. 注册mouseout事件，让当前li下的ul隐藏
        $(function() {

            // 用一个lis代表$+('.wrap > ul > li')
            var lis = $('.wrap > ul > li')

            // 鼠标移动到对应的一级菜单，显示隐藏的二级菜单
            lis.mouseenter(function() {
                $(this).children('ul').show();
            })

            // 鼠标离开对应的一级菜单，则隐藏二级菜单
            lis.mouseleave(function() {
                $(this).children('ul').hide();
            })
        })
    </script>
</body>

在这里插入图片描述

案例2-高亮展示（选择器：筛选选择器知识点）

  <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>


<script src="jquery-1.12.4.js"></script>
<script>
    // 先写入口函数：
    $(function() {
      // 分析：
      // 1.找到所有的li ，注册mouseenter事件，让当前的颜色亮度为1，其余的兄弟颜色全部为0.4
      // 2.给整个大盒子注册一个mouseleave事件，让所有的颜色亮度都为1

      // 1.找到所有的li ，注册mouseenter事件，让当前的颜色亮度为1，其余的兄弟颜色全部为0.4
      $('.wrap li').mouseenter(function() {
        // siblings()：获取当前元素所有的兄弟元素，不包括自己
        $(this).css('opacity', 1).siblings().css('opacity', 0.4);
      })

      // 2.给整个大盒子注册一个mouseleave事件，让所有的颜色亮度都为1
      $('.wrap').mouseleave(function() {
        // find()：获取当前元素中的后代元素中的li元素
        $(this).find('li').css('opacity', 1);
      })
    })
</script>
</body>

在这里插入图片描述

案例3-手风琴（选择器：筛选选择器知识点）

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style-type: none;
    }

    .parentWrap {
      width: 200px;
      text-align: center;

    }

    .menuGroup {
      border: 1px solid #999;
      background-color: #e0ecff;
    }

    .groupTitle {
      display: block;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
    }

    .menuGroup>div {
      height: 200px;
      background-color: #fff;
      display: none;
    }
  </style>

</head>

<body>
  <ul class="parentWrap">
    <li class="menuGroup">
      <span class="groupTitle">标题1</span>
      <div>我是弹出来的div1</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">标题2</span>
      <div>我是弹出来的div2</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">标题3</span>
      <div>我是弹出来的div3</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">标题4</span>
      <div>我是弹出来的div4</div>
    </li>
  </ul>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function() {
      //点击span标题，展示当前span的兄弟div

      // 问题：
      // 1.每次点击的时候只能看到一个div
      // 1.1 当前点击的是span ==> this
      // 1.2 获取当前span 的父元素 li
      // 1.3 在去获取当前li 的兄弟li
      // 1.4 在去找兄弟li下的孩子div 将其隐藏掉


      // 2.动画问题 slideDown()：向下展开  slideUp()：向上收起

      // next()：当前元素的下一个兄弟元素
      // prev()：当前元素的上一个元素

      $('.groupTitle').click(function() {
        $(this).next().slideDown(200);

        // jQ提供的方法 parent() : 可以获取当前的父元素
        $(this).parent().siblings().children('div').slideUp(200);
      })
    })
  </script>
</body>

在这里插入图片描述

案例4-淘宝精品（选择器：排他思想知识点）

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-size: 12px;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .wrapper {
      width: 298px;
      height: 248px;
      margin: 100px auto 0;
      border: 1px solid pink;
      overflow: hidden;
    }

    #left,
    #center,
    #right {
      float: left;
    }

    #left li,
    #right li {
      background: url(images/lili.jpg) repeat-x;
    }

    #left li a,
    #right li a {
      display: block;
      width: 48px;
      height: 27px;
      border-bottom: 1px solid pink;
      line-height: 27px;
      text-align: center;
      color: black;
    }

    #left li a:hover,
    #right li a:hover {
      background-image: url(images/abg.gif);
    }

    #center {
      border-left: 1px solid pink;
      border-right: 1px solid pink;
    }
  </style>

</head>

<body>
  <div class="wrapper">

    <ul id="left">
      <li><a href="#">女靴</a></li>
      <li><a href="#">雪地靴</a></li>
      <li><a href="#">冬裙</a></li>
      <li><a href="#">呢大衣</a></li>
      <li><a href="#">毛衣</a></li>
      <li><a href="#">棉服</a></li>
      <li><a href="#">女裤</a></li>
      <li><a href="#">羽绒服</a></li>
      <li><a href="#">牛仔裤</a></li>
    </ul>
    <ul id="center">
      <li><a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/女包.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/男靴.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/皮带.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/围巾.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="images/男包.jpg" width="200" height="250" /></a></li>

    </ul>
    <ul id="right">
      <li><a href="#">女包</a></li>
      <li><a href="#">男靴</a></li>
      <li><a href="#">登山鞋</a></li>
      <li><a href="#">皮带</a></li>
      <li><a href="#">围巾</a></li>
      <li><a href="#">皮衣</a></li>
      <li><a href="#">男毛衣</a></li>
      <li><a href="#">男棉服</a></li>
      <li><a href="#">男包</a></li>
    </ul>

  </div>
  <script src="./jquery-1.12.4.js"></script>
  <script>
    $(function() {
      // 鼠标移入到导航上，切换对应的图片
      // 通过当前导航li的下标来进行对应

      // 实现左边的导航功能
      $('#left li').mouseenter(function() {
        // jQ提供的index() ==> 能获取到当前元素的下标
        var idx = $(this).index();

        //坑：idx 是个变量，不能直接写在引号中，需要进行拼接
        $('#center li:eq(' + idx + ')').show().siblings().hide();
      })

      // 实现右边的导航功能
      $('#right li').mouseenter(function() {
        // 1.当前的下标
        // 2.根据下标找到对应的展示，其他兄弟li隐藏掉

        // .eq()方法 筛选选择器
        var idx = $(this).index() + 9;  //是为了获取后9张图
        $('#center li').eq(idx).show().siblings().hide();
      })


      // 小结：
      // 1.index() 可以直接获取当前元素的下标
      // 2. :eq()  .eq()  作用一样，根据下标去获取指定元素
      // 写法上有区别 推荐使用.eq()
      
    })
  </script>
</body>