jQuery（三）jQuery特性和链式调用

最新推荐文章于 2024-08-22 14:32:34 发布

码界索隆

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量146

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/cool66boy/article/details/123402692

版权

文章目录

jQuery特殊效果
jQuery链式调用
练习-层级菜单

jQuery特殊效果

fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切换淡入淡出

                $box.fadeToggle(1000,function(){
                    alert('动画结束！');//一次动画结束后执行一次回调函数；
                });

hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上展开
slideToggle() 依次展开或卷起某个元素

jQuery链式调用

jQuery对象的方法会在执行完后返回这个jQuery对象，所有jQuery对象的方法可以连起来写。

类似：

		$('.box') //class为box的元素
		.children('ul') //该元素下的ul子元素
		.slidedown('fast') //将ul元素向下展开来显示。

注：链式调用可以写很长，能执行的效率比较高

练习-层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="/js/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            // 获取种类对象
            var $sort = $('.sort');
            // 获取下拉列表对象
            var $ul = $('ul');
            $sort.click(function(){
                /*关键步骤，当前点击的对象后面紧挨着的同级元素执行展开或卷起，
                再到父级除其父级外的其他父级下的子元素ul向上卷起*/
                $(this).next().slideToggle().parent().siblings().children('ul').slideUp();
            })
        })
    </script>
    <style>
        /* 主容器 */
        .container{
            width: 200px;
            border: 2px solid lightcoral;
            margin:0 auto;
        }
        /* 种类容器 */
        .box{
            border-top: 2px solid lightcoral;
            text-align: center;
            font-size: 20px;
            line-height: 2;
        }
        .box:first-of-type{
            border-top: none;
        }
        /* 种类 */
        .sort{
            background-color: rgb(144, 238, 144, 1);
        }
        .sort:hover{
            background-color:rgb(133, 220, 133, 1);
        }
        /* 种类的下拉列表 */
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .box ul{
            background-color: #fff;
            display: none;
        }
        .box ul>li{
            border-top: 2px solid lightcoral;
            background-color: rgb(250, 250, 210, .5);
        }

        .box ul>li:hover{
            background-color: rgb(250, 250, 210, 1);
        }
    </style>
</head>
<body>
    <ul class="container">
        <li class="box">
            <div class="sort">水果</div>
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>西瓜</li>
                <li>雪莲果</li>
                <li>火龙果</li>
                <li>山竹</li>
            </ul>
        </li>
        <li class="box">
            <div class="sort">蔬菜</div>
            <ul>
                <li>土豆</li>
                <li>辣椒</li>
                <li>生菜</li>
                <li>韭菜</li>
                <li>大葱</li>
                <li>胡罗卜</li>
            </ul>
        </li>
        <li class="box">
            <div class="sort">肉禽</div>
            <ul>
                <li>牛肉</li>
                <li>羊肉</li>
                <li>五级雪花肥牛</li>
                <li>鸡蛋</li>
                <li>土鸡蛋</li>
                <li>鸡肉</li>
            </ul>
        </li>
    </ul>
</body>
</html>

效果图：
请添加图片描述

码界索隆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery（三）jQuery特性和链式调用

文章目录jQuery特殊效果jQuery链式调用练习-层级菜单jQuery特殊效果fadeIn() 淡入fadeOut() 淡出fadeToggle() 切换淡入淡出 $box.fadeToggle(1000,function(){ alert('动画结束！');//一次动画结束后执行一次回调函数； });hide() 隐藏元素show() 显示元素toggle() 切换元素的可见
复制链接

扫一扫