jQuery的基础练习题

1. 简易选项卡

• 题目要求：单击标题栏(Tab)栏,实现内容的切换

* {
    margin: 0;
    padding: 0;
}
​
.box {
    width: 600px;
    height: 400px;
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    border: 5px solid #333;
}
​
.box>ul {
    height: 60px;
    display: flex;
}
​
.box>ul>li {
    list-style: none;
    font-size: 24px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    background-color: skyblue;
​
    cursor: pointer;
}
​
.box>ul>li:active {
    background-color: orange;
}
​
.box>ol {
    flex: 1;
    position: relative;
}
​
.box>ol>li {
    width: 100%;
    height: 100%;
​
    font-size: 100px;
    color: white;
    justify-content: center;
    align-items: center;
    flex: 1;
    background-color: palegreen;
    display: none;
​
}
​
.box>ol>li.active {
    display: flex;
}

<div class="box">
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

// 方法一：
// 1. 给 ul 下的所有 li 绑定点击事件
// 获取元素 $('ul > li')
// 点击事件 .click(事件处理函数)
$('ul>li').click(function () {
    // 2.给点击的哪一个 li 添加类名
    // 问题：this 拿到的是原生 DOM 对象，不能使用 jQuery 的方法
    // 只有 jQuery 的元素集合，才能使用
    // 原生 DOM 对象，如果想使用 jQuery 的方法，需要使用 $() 包裹起来
    // 在给自己加上类名的同时，需要给所有兄弟元素去掉 active 类名
    // .siblings() 获取到该元素的所有兄弟元素，不包括自己
    $(this).addClass('active').siblings().removeClass('active'
    // 3. 让 ol 内的 li 进行配套
    // 你点击的这个元素的索引
    $('ol>li').removeClass('active').eq($(this).index()).addClass('active')
}
//方法二：
$('ul>li').click(function () {
    // 不管 ul 还是 ol 内部的 li 全部去掉类名
    $('ul>li,ol>li').removeClass('active').parent().find(`li:eq(${$(this).index()})`).addClass('active')
​
    // 假设我点击的这个 li 的索引是 1
    // 让 ul 下的 li[1] 和 ol 下的 li [1] 添加类名
    // 找到 ul 下索引 为 1 的 li
    // console.log($('ul>li:eq(1)'))
​
    // // 利用 find 来找到元素
    // console.log($('ul').find('li:eq(1)'))
})

2. jQuery 基础动画

• 要求：单击 '显示' 按钮, 盒子显示 ;
• 单击 '隐藏' 按钮, 盒子隐藏 ;
• 单击 '却换' 按钮, 盒子却换 ;

div {
    width: 400px;
    height: 400px;
    background-color: pink;
}

<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>

/*
    jQuery 的基础动画
​
    1. show()   - 显示
    2. hide()   - 隐藏
    3. toggle() - 切换显示和隐藏
​
    以上三个方法的参数
        => 参数1：运动时间，单位是 ms
        => 参数2：运动曲线
        => 参数3：运动结束的回调函数
​
*/
​
// 1. 显示
$('button').eq(0).click(() => {     // eq 表示获取按钮的索引
    $('div').show(2000,'linear',()=>console.log('显示完毕'))
})
​
// 2. 隐藏
$('button').eq(1).click(() => {
    $('div').hide(2000,'linear',()=>console.log('隐藏完毕'))
})
​
// 3. 显示和隐藏
$('button').eq(2).click(() => {
    $('div').toggle(2000,'linear',()=>console.log('显示和隐藏完毕'))
})

3. jQuery 折叠动画

• 要求：单击 '显示' 按钮, 盒子折叠显示 ;
• 单击 '隐藏' 按钮, 盒子折叠隐藏 ;
• 单击 '却换' 按钮, 盒子折叠却换 ;

.two {
    width: 400px;
    height: 400px;
    background-color: pink;
​
    position: absolute;
    bottom: 0;
    left: 0;
}
​
.out {
    width: 400px;
    height: 400px;
​
    position: relative;
}

<button>显示</button>
<button>隐藏</button>
<button>切换</button>
​
<div class="out">
    <div class="two"></div>
</div>

/*
    jQuery 的基础动画

    1. slideDown()   - 下拉显示
    2. slideUp()   - 上拉隐藏
    3. slideToggle() - 切换显示和隐藏

    以上三个方法的参数
        => 参数1：运动时间，单位是 ms
        => 参数2：运动曲线
        => 参数3：运动结束的回调函数

*/

// 1. 下拉显示
$('button').eq(0).click(() => {     // eq 表示获取按钮的索引
    $('div.two').slideDown(2000, 'linear', () => console.log('显示完毕'))
})

// 2. 上拉隐藏
$('button').eq(1).click(() => {
    $('div.two').slideUp(2000, 'linear', () => console.log('隐藏完毕'))
})

// 3. 显示和隐藏
$('button').eq(2).click(() => {
    $('div.two').slideToggle(2000, 'linear', () => console.log('显示和隐藏完毕'))
})

4. jQuery 渐隐渐显动画

• 要求：单击 '显示' 按钮, 盒子渐近显示 ;
• 单击 '隐藏' 按钮, 盒子渐近隐藏 ;
• 单击 '却换' 按钮, 盒子渐近却换 ;

.two {
    width: 400px;
    height: 400px;
    background-color: pink;

    position: absolute;
    bottom: 0;
    left: 0;
}

.out {
    width: 400px;
    height: 400px;

    position: relative;
}

<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<button>go</button>

<div class="out">
    <div class="two"></div>
</div>

/*
    jQuery 的基础动画

    1. fadeIn()   - 淡入
    2. fadeOut()   - 淡出
    3. fadeToggle() - 切换显示和隐藏

    以上三个方法的参数
        => 参数1：运动时间，单位是 ms
        => 参数2：运动曲线
        => 参数3：运动结束的回调函数

    4. fadeTo()
        => 参数1：运动时间，单位是 ms
        => 参数2：指定透明度
        => 参数3：运动曲线
        => 参数4：运动结束的回调函数
*/

// 1. 淡入
$('button').eq(0).click(() => {     // eq 表示获取按钮的索引
    $('div.two').fadeIn(2000, 'linear', () => console.log('显示完毕'))
})

// 2. 淡出
$('button').eq(1).click(() => {
    $('div.two').fadeOut(2000, 'linear', () => console.log('隐藏完毕'))
})

// 3. 显示和隐藏
$('button').eq(2).click(() => {
    $('div.two').fadeToggle(2000, 'linear', () => console.log('显示和隐藏完毕'))
})

// 4. 指定透明度
$('button').eq(3).click(() => {
    $('div.two').fadeTo(2000, 0.5, 'linear', () => console.log('显示和隐藏完毕'))
})

5. jQuery 综合动画

• 单击按钮, 盒子放大偏移

* {
    margin: 0;
    padding: 0;
}

div {
    width: 100px;
    height: 100px;
    background-color: pink;
}

<button>揍你</button>
<div></div>

/*
    jQuery 的综合动画
        + 什么样式都能运动
        + 但是 颜色不行，2D 和 3D 变化不行
        + 语法：元素集合.animeta()
            => 参数1：对象数据类型，你要运动的样式
            => 参数2：运动时间，单位是 ms
            => 参数3：运动曲线
            => 参数4：运动结束的回调函数
*/

$('button').click(() => {
    $('div').animate({
        width: 300,
        height: 500,
        margin:150
    },1000)
})

6. jQuery 树状菜单

* {
    margin: 0;
    padding: 0;
}

div {
    width: 300px;

    margin: 0 auto;
}

ul {
    width: 200px;
    border: 3px solid black;
    list-style: none;
    padding: 5px;
    cursor: pointer;
}

li::before {
    content: '+';
}

li.active::before {
    content: '-';
}

ol {
    list-style: none;
    margin: 10px;
    display: none;
}

<div>
   <ul>
       <li>
           <span>一级菜单</span>
           <ol>
               <li>二级菜单1</li>
               <li>二级菜单2</li>
               <li>二级菜单3</li>
           </ol>
       </li>
       <li>
           <span>一级菜单</span>
           <ol>
               <li>二级菜单1</li>
               <li>二级菜单2</li>
               <li>二级菜单3</li>
               <li>二级菜单4</li>
               <li>二级菜单5</li>
               <li>二级菜单6</li>
           </ol>
       </li>
       <li>
           <span>一级菜单</span>
           <ol>
               <li>二级菜单1</li>
               <li>二级菜单2</li>
               <li>二级菜单3</li>
           </ol>
       </li>
   </ul>

   </div>

$('ul>li').click(function () {
    // 2. 给 自己 本身切换类名实现 + - 的切换
    // 点击的时候，自己本身切换类名，所有兄弟元素取消类名
    // 自己 如果有 active 就删除，如果没有 active 就添加
    // 自己 切换类名，兄弟元素 取消类名
    $(this).toggleClass('active').siblings().removeClass('active')

    // 3. 给 自己 本身的 子元素 ol 进行显示隐藏的切换
    // 点击的时候，自己本身的 子元素 ol 展开
    // 自己的 子元素 ol 应该是判断一下，本身是展开的就收起来，如果本身是收起来的就展开
    // 使用 切换
    // 所以兄弟元素下的 ol 隐藏
    $(this) 
        .find('ol')             // 点击的哪个 li
        .slideToggle()          // 点击的哪个 li 下面的 ol
        .parent()               // ol 的 父元素，依旧是点击的哪个 li
        .siblings()             // 所有的兄弟 li，其他两个  一级菜单
        .find('ol')             // 其他的一级菜单下的 ol
        .slideUp()              // 收起来
})

7. jQuery 选项卡跟随

 * {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

ul {
    width: 1000px;
    height: 40px;
    display: flex;

    border-bottom: 3px solid #000;

    margin: 30px auto;

    position: relative;
}

ul>li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    z-index: 999;

    cursor: pointer;
}

ul>span {
    width: 100px;
    height: 100%;
    background-color: skyblue;

    position: absolute;
    top: 0;
    left: 0;

    border-bottom: 3px solid red;
}

<ul>
    <li style="color: white;">第1个选项</li>
    <li>第2个选项</li>
    <li>第3个选项</li>
    <li>第4个选项</li>
    <li>第5个选项</li>
    <li>第6个选项</li>
    <li>第7个选项</li>
    <li>第8个选项</li>
    <li>第9个选项</li>
    <li>第10个选项</li>
    <span></span>
</ul>

/*
     案例 - 选项卡移动
*/

 // 1. 给 ul 下的每一个 li 添加鼠标移入事件
 $('ul>li').mouseover(function () {
     // 2. 根据你移入的哪一个 li 调整 span 的位置(调整 span 的 left 样式)
     // 如果你移入的是第 1 个 li，索引 0， span 的 left 是 0
     // 如果你移入的是第 2 个 li，索引 1， span 的 left 是 100
     // 如果你移入的是第 3 个 li，索引 2， span 的 left 是 200
     const index = $(this).index()

     // 2-2. 根据 index 给 span 设置 left 样式
     // 当你需要给一个元素设置样式的时候，有两种方案
     // 方案1：使用 css() 结果就是瞬间定位
     // $('ul > span').css('left' , index * 100)
     // 方案2：使用 animate() 结果就是可以有过度效果
     $('ul>span').stop().animate({ left: index * 100 }, 1000, 'linear', () => {
         $(this).css('color', 'white')
     })

     // 3.移入谁的时候，让谁的文本颜色变成白色
     // 3-1. 其他的变成黑色可以马上执行
     $(this).siblings().css('color', 'black')
     // 3-2. 等到运动结束的时候，才变成白色好一些
 })

8. jQuery 手风琴

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
    width: 640px;
    height: 280px;
    display: flex;
    border: 5px solid pink;
    margin: auto;
}

li {
    width: 160px;
    height: 280px;
    overflow: hidden;
}

img {
    width: 520px;
    height: 280px;
}

<ul>
    <li><img src="./image/01.jpg" alt=""></li>
    <li><img src="./image/02.jpg" alt=""></li>
    <li><img src="./image/03.jpg" alt=""></li>
    <li><img src="./image/04.jpg" alt=""></li>
</ul>

/*
    案例 - 手风琴
*/

// 1. 给每一个 li 添加鼠标移入事件
$('ul>li').mouseover(function () {
    // 1-2. 调整 两个 li 的宽度
    // 移入谁，谁的宽度变大，另外所有的兄弟元素变小
    $(this).stop().animate({ width: 520 }).siblings().stop().animate({ width: 40 }).siblings()
})

// 2.回复到原始状态
 
// 问题：什么时候恢复？
// 鼠标移出的时候

// 问题：鼠标移出谁的时候恢复？
// ul

$('ul').mouseleave(function () {
    $('ul>li').stop().animate({ width: 160 })
})

9. jQuery 楼层导航

* {
     margin: 0;
     padding: 0;
 }

 .header {
     width: 1000px;
     height: 60px;
     background-color: skyblue;
     margin: auto;

     font-size: 40px;
     color: white;
     text-align: center;
 }

 .top {
     width: 1000px;
     height: 160px;
     background-color: pink;
     margin: auto;

     font-size: 40px;
     color: white;
     text-align: center;
     line-height: 160px;
 }

 .banner {
     width: 1000px;
     height: 360px;
     background-color: purple;
     margin: auto;

     font-size: 40px;
     color: white;
     text-align: center;
     line-height: 360px;
 }

 ul {
     list-style: none;
 }

 ul li p {
     font-size: 40px;
     text-align: center;
     margin: 10px;
 }

 ul li div {
     width: 1000px;
     height: 600px;
     background-color: orange;

     margin: auto;
     font-size: 60px;
     text-align: center;

     line-height: 600px;

     color: white;
 }

 .footer {
     width: 1000px;
     height: 450px;
     background-color: gray;

     margin: auto;
     margin-top: 40px;
     font-size: 60px;
     text-align: center;

     line-height: 450px;

     color: white;
 }

 ol {
     width: 40px;
     height: 300px;

     position: fixed;
     top: 50%;
     right: 0%;

     list-style: none;

     transform: translateY(-50%);
 }

 ol li,
 ol span {
     cursor: pointer;
     border: 1px solid black;
 }

 ol span {
     background-color: red;
     width: 40px;
     display: inline-block;
     color: white;
 }

 ol li.active {
     background-color: skyblue;
 }

<div class="header">我是网站的头部</div>
<div class="top">我是顶部搜索 + logo</div>
<div class="banner">我是轮播图区域</div>
<ul>
    <li>
        <p class="title">频道广场</p>
        <div class="content">我是楼层内容</div>
    </li>
    <li>
        <p class="title">为你推荐</p>
        <div class="content">我是楼层内容</div>
    </li>
    <li>
        <p class="title">特色优选</p>
        <div class="content">我是楼层内容</div>
    </li>
    <li>
        <p class="title">京东秒杀</p>
        <div class="content">我是楼层内容</div>
    </li>
    <li>
        <p class="title">最近热销</p>
        <div class="content">我是楼层内容</div>
    </li>
</ul>
<div class="footer">我是网站底部</div><ol>
    <li class="active">频道广场</li>
    <li>为你推荐</li>
    <li>特色优选</li>
    <li>京东秒杀</li>
    <li>最近热销</li>
    <span>回到顶部</span>
</ol>

/*
    楼层导航
*/

// 1. 点击导航按钮进行页面的定位
$('ol>li').click(function () {
    // 1-2. 点击谁的时候，让谁有 active 类名
    // 其他的兄弟元素没有类名
    $(this).addClass('active').siblings().removeClass('active')

    // 1-3. 定位位置
    // ul 内对应的 li 距离页面顶部的尺寸
    // 就是页面应该滚动的尺寸
    const li_top = $('ul>li').eq($(this).index()).offset().top

    // 1-4. 让页面滚动
    $('html,body').animate({ scrollTop: li_top })
})

// 2. 随着滚动条的滚动，让 ol 内对应的 li 切换类名
$(window).scroll(function () {
    // 2-1. 拿到浏览器卷去的高度
    const scroll_top = document.documentElement.scrollTop || document.body.scrollTop

    // 2-2. 判断超过哪一个 ul 下面的 li 了
    // 当 scroll_top >= 第一个 li 距离顶部的尺寸， ol 内的 第一个 li 有类名
    // 当 scroll_top >= 第二个 li 距离顶部的尺寸， ol 内的 第二个 li 有类名
    // 当 scroll_top >= 第三个 li 距离顶部的尺寸， ol 内的 第三个 li 有类名
    // 拿到 ul 下的每一个 li 依次去进行比较
    $('ul>li').each(function (index, item) {
        // 进行判断
        if (scroll_top >= $(item).offset().top) {
            $('ol>li').eq(index).addClass('active').siblings().removeClass('active')
        }
    })
})

// 3. 回到顶部
$('ol>span').click(() => {
    $('html, body').animate({ scrollTop: 0 })
})