jQuery笔记

最新推荐文章于 2023-11-30 18:51:13 发布

今天学习了没_

最新推荐文章于 2023-11-30 18:51:13 发布

阅读量101

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44756893/article/details/117035883

版权

jQuery笔记入门（仅供自己复习）

1.tab栏监听

$(function(){
            //1.点击上部的li，当前li添加current类，其余兄弟移除类  链式操作 隐式迭代
            $('.tab_list li').click(function(){
                $(this).addClass('current').siblings().removeClass('current');
                //2.点击的同时 得到当前li的索引号
                var index = $(this).index();
                //让下面的内容根据索引号显示或隐藏
                $('.tab_con div').eq(index).show().siblings().hide();//让选中的index内容显示 它的兄弟未选中则隐藏
            })
        })

2.类操作和className区别

在指定的类进行添加类和移除类$('.onde').addClass('two');
相当于追加类不影响以前的类名。
但原生JS中className会覆盖原先里面的类名

3.jq动画效果

显示隐藏

显示show([speed,[easing],[fn]])
参数都可以省略，无动画直接显示
speed:三种预定速度之一的字符串(‘slow’,‘normal’,or ‘fast’
)或表示动画时长毫秒数
easing 用来指定切换效果
fn 回调函数动画完成时执行的回调函数每个元素执行一次

$(function(){
            $('button').eq(1).click(function(){
                $('div').hide(1000,function(){
                    alert(1);
                }); 
            });
            $('button').eq(0).click(function(){
                $('div').show(1000,function(){
                    alert(2);
                });
            });
            $('button').eq(2).click(function(){
                $('div').toggle();
            })
            //一般情况不加参数 直接显示隐藏就可以了
        })

滑动

$(function(){
            $('button').eq(0).click(function(){
                //下滑动
                $('div').slideDown(); 
            });
            $('button').eq(1).click(function(){
                //上滑动
                $('div').slideUp();
            });
            $('button').eq(2).click(function(){
                //滑动切换
                $('div').slideToggle();
            })
            //一般情况不加参数 直接显示隐藏就可以了
        })

事件切换：$('div').hover(function(){'鼠标经过'},function(){'鼠标离开'});
可以使切换代码更整洁

动画队列及排队停止方法
动画效果一旦触发就会执行，如果多次触发，就会造成这个动画或者效果排列执行可以使用停止排队 stop()

$(function(){
            //事件切换 hover 如果只写一个函数 那么鼠标经过和鼠标离开都会触发这个函数
            $('div li').hover(function(){
                //stop方法必须写到动画的前面
                $(this).children('ul').stop().slideToggle();
            })
        })

淡入淡出

$(function(){
            //当鼠标进入的时候 其他小li的透明度为0.5  fadeTo()里面的速度和透明度必须有参数
            $(".wrap li").hover(function(){
                $(this).siblings().stop().fadeTo(400,0.5);
            },function(){
                //鼠标离开时，其他小li透明度为原来1
                $(this).siblings().stop().fadeTo(400,1);
            })
        })

自定义动画

$(function(){
            $("button").click(function(){
                $("div").animate({
                    right:200
                },200);
            })
        })

王者荣耀手风琴案例

//CSS
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .king{
            width: 769px;
            height: 115px;
            margin:200px auto;
            background: blue;
            padding: 20px;
        }
        .img{
            display: block;
        }
        ul{
            list-style: none;
        }

        .king ul{
            overflow: hidden;
        }
        .king li{
            width: 69px;
            height: 69px;
            margin-right: 10px;
            float: left;
            position: relative;
        }
        .king .current{
            width: 224px;
        }
        .king .current .big{
            display: block;
        }
        .king .current .small{
            display: none;
        }
        .big{
            display: none;
            width: 224px;
        }
        .small{
            display: block;
            position: absolute;
            width: 69px;
            height: 69px;
            left: 0;
            top: 0;
            border-radius: 5px;
        }

    </style>

<body>
    <script>
        $(function(){
            //鼠标经过小li有两步操作
            $(".king li").mouseenter(function(){
                //1.鼠标移动后 当前小li宽度变为224px 大图片淡入 小图片淡出
                $(this).stop().animate({
                    width:224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                //2 其余兄弟小li宽度为69px
                $(this).siblings("li").stop().animate({
                    width:69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();

            })
            

        })
    </script>

    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/02.jpg" alt="" class="small">
                    <img src="images/01.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/04.jpg" alt="" class="small">
                    <img src="images/03.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/05.jpg" alt="" class="small">
                    <img src="images/06.jpg" alt="" class="big">
                </a>
            </li>
        </ul>
</body>

今天学习了没_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记

jQuery笔记入门（仅供自己复习）1.tab栏监听$(function(){ //1.点击上部的li，当前li添加current类，其余兄弟移除类链式操作隐式迭代 $('.tab_list li').click(function(){ $(this).addClass('current').siblings().removeClass('current'); //2.点击的同时得到当
复制链接

扫一扫