JQuery效果与DOM元素操作

最新推荐文章于 2024-04-11 08:10:37 发布

原创最新推荐文章于 2024-04-11 08:10:37 发布 · 811 阅读

0 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍 JQuery 中的动画效果实现方法，包括基本动画、滑动、淡入淡出及自定义动画等，并讲解了 DOM 元素的插入、删除、复制、替换与查找等操作技巧。

作者：西岭老湿

Jquery效果

基本效果

问题及效果：
05-6-2toggle 案例中的折叠效果并不理想，修改使其在展开或者折叠中都有过程，成动画播放效果；

案例代码：
直接修改修改 05-6-2toggle 代码，添加动画效果；

<head>
    <title></title>
    <meta charset="UTF-8">
    <script src="./jq183.js"></script>
    <style>
        div,h2{margin: 0;padding: 10px}
        #box{width: 300px;}
        #box h2{background-color: #369;}
        #box div{border: 1px solid red; height: 200px}
    </style>
</head>
<body>
    <div id="box">
        <h2>折叠效果</h2>
        <div id="box2">
            itcast传智播客
        </div>
    </div>
</body>
<script>
    $('#box').toggle(function(){
        $('#box2').hide(
            3000,
            'swing',
            function(){
                alert(1)
            }
        );
    },function(){
        $('#box2').show(3000,'linear',function(){});
    })
</script>

知识点：
hide([speed,[fn]]) 隐藏显示的元素
speed : 三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或
表示动画时长的毫秒数值(如：1000);
fn:在动画完成时执行的函数。

show([speed,[fn]]) 显示隐藏的匹配元素
speed : 三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或
表示动画时长的毫秒数值(如：1000);
fn:在动画完成时执行的函数。

滑动效果

问题及效果：
图片的滑动收起与隐藏

案例代码：

<body>
    <input type="button" id="down" value="slideDown">
    <input type="button" id="up" value="slideUp">
    <input type="button" id="toggle" value="slideToggle">
    <br>
    <hr>
    <img src="./06-2silde.png" id="re" >
</body>
<script>
    $('#down').click(function(){
        //滑动效果展示
        $('#re').slideDown(3000,function(){
            alert('总有刁民想害朕');
        });
    })
    $('#up').click(function(){
        //滑动效果隐藏
        $('#re').slideUp(3000,function(){
            alert('我还会回来的');
        });
    })
    $('#toggle').click(function(){
        //若隐藏则展示，若展示则隐藏
        $('#re').slideToggle(3000,function(){
            alert('你还敢点吗？');
        });
    })
</script>

知识点：
slideDown([speed],[fn]) 显示
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

slideUp([speed,[fn]]) 隐藏
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

slideToggle([speed],[fn]) 切换
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

淡入淡出效果

问题及效果：
图片淡入淡出效果

案例代码：

<body>
    <input type="button" id="in" value="fadeIn">
    <input type="button" id="out" value="fadeOut">
    <br>
    <hr>
    <img src="./06-3fade.jpg" id="re" >
</body>
<script>
    $('#in').click(function(){
        //淡入效果展示
        $('#re').fadeIn(3000,function(){
            alert('总有刁民想害朕');
        });
    })
    $('#out').click(function(){
        //淡出效果隐藏
        $('#re').fadeOut(3000,function(){
            alert('我还会回来的');
        });
    })
</script>

知识点：
fadeIn([speed],[fn]) 淡入
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

fadeOut([speed],[fn]) 淡出
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

自定义动画

问题及效果：
JQ中的动画效果很多，但是总有些我想要但是没有的动画；

知识点：
animate(params,[speed],[easing],[fn])

params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次。

案例代码：

<body>
    <input type="button" id="ai" value="animate">
    <br>
    <hr>
    <img src="./06-4animate.jpg" id="re" style="position:absolute">
</body>
<script>
    $('#ai').click(function(){
        //淡入效果展示
        $('#re').animate(
            {left:"900",top:"-500"},//动画属性
            3000,  //执行时长
            function(){ //执行后的回调函数
                alert('成全你');
            }
        );
    })
</script>

DOM元素插入

内部插入操作

知识点：
append(content)
向匹配的元素内部追加内容。

appendTo(content)
把匹配的元素追加到另一个指定的元素集合中

prepend(content)
内容前置到匹配的元素内部；

prependTo(content)
把匹配的元素前置到另一个、指定的元素集合中。

案例代码：

<body>
    <input type="button"  value="dina" id="btu">
    <div id="re">
        我是DIV
    </div>
    <p id="p">P标签</p>
</body>
<script>
    $('#btu').click(function(){
        //向匹配的元素内部追加内容。
        $('#re').append('尾部');

        //把匹配的元素追加到另一个指定的元素集合中
        $('#re').appendTo('#p');

        //内容前置到匹配的元素内部；
        $('#re').prepend('头部');

        //把匹配的元素前置到另一个、指定的 元素 集合中。
        $('#re').prependTo('#p');

    })
</script>

外部插入

知识点：
after(content)
在匹配的元素之后插入内容。

before(content)
在匹配的元素之前插入内容。

insertAfter(content)
把匹配的元素插入到另一个、指定的元素集合的后面。

insertBefore(content)
把匹配的元素插入到另一个、指定的元素集合的前面。

案例代码：
上节代码修改JS部分

<script>
    $('#btu').click(function(){
        //在匹配的元素之后插入内容。
        $('#re').after('标签后');

        //在匹配的元素之前插入内容。
        $('#re').before('标签前');

        //把匹配的元素插入到另一个、指定的元素集合的后面。
        $('#re').insertAfter('#p');

        //把匹配的元素插入到另一个、指定的元素元素集合的前面。
        $('#p').insertBefore('#re');
    })
</script>

注意：
内部插入与外部插入的区别

删除

知识点：
empty()
删除匹配的元素集合中所有的子节点。

remove([expr])
从DOM中删除所有匹配的元素。

案例代码:

<body>
    <input type="button" value="删除内容" id="empty">
    <input type="button" value="删除节点1" id="remove">
    <input type="button" value="删除节点2" id="re">
    <hr>
    <ul id="chi">
        <li id="lzj">辣子鸡</li>
        <li>香酥鸭</li>
        <li>糖醋鱼</li>
        <li>红烧肉</li>
    </ul>
</body>
<script>
    //删除选中节点的内容
    $('#empty').click(function(){
        $('#chi').empty();
    })

    //在DOM树中删除选中节点
    $('#remove').click(function(){
        $('#chi').remove();
    })

    //在选中节点中删除指定节点
    $('#re').click(function(){
        $('li').remove('#lzj');
    })
</script>

复制(克隆)

知识点：
clone([Even])
克隆匹配的DOM元素
Even：一个布尔值（true 或者 false）指示事件处理函数是否会被复制。

案例代码：
修改上节代码

<body>
    <input type="button" value="克隆" id="clone">
    <hr>
    <ul id="chi">
        <li id="lzj">辣子鸡</li>
        <li>香酥鸭</li>
        <li>糖醋鱼</li>
        <li>红烧肉</li>
    </ul>
</body>
<script>
    $('#lzj').click(function(){
        alert(1);
    })
    $('#clone').click(function(){
        //仅克隆内容
        $('#lzj').clone().appendTo('#chi');
        //克隆内容与事件
        $('#lzj').clone(true).appendTo('#chi');
    })

</script>

替换

知识点：
replaceWith(content)
将所有匹配的元素替换成指定的HTML或DOM元素。

html([val])
val 有值，则用于设定HTML内容的值，没有则获取内容值；

案例代码：

<body>
    <input type="button" value="替换DOM" id="replace">
    <input type="button" value="替换内容" id="html">
    <hr>
    <ul id="chi">
        <li id="lzj">辣子鸡</li>
        <li>香酥鸭</li>
        <li>糖醋鱼</li>
        <li>红烧肉</li>
    </ul>
</body>
<script>
    $('#replace').click(function(){
        var t = '<li>西湖牛肉羹</li>'
        //替换选中节点的DOM
       $('#lzj').replaceWith(t);
    })

    $('#html').click(function(){
        //替换选中节点的内容
       $('#lzj').html('蒜蓉西兰花');
    })
</script>

包裹

知识点：
wrap(html|ele|fn)
把所有匹配的元素用其他元素的结构化标记包裹起来。

unwrap()
移出选中元素的父元素

wrapAll(html|ele)
将所有匹配的元素用单个元素包裹起来

wrapInner(html|ele|fn)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

案例代码：

<body>
    <input type="button" value="wrap" id="wrap">
    <input type="button" value="wrapAll" id="wrapAll">
    <input type="button" value="unwrap" id="unwrap">
    <input type="button" value="wrapInner" id="wrapInner">
    <hr>
    <div>海贼王</div>
    <div>火影忍者</div>
    <div>龙猫</div>
    <div><p>千与千寻</p></div>
</body>
<script>
    $('#wrap').click(function(){
        $('div').wrap('<strong></strong>');
    })
    $('#wrapAll').click(function(){
        $('div').wrapAll('<strong></strong>');
    })
    $('#unwrap').click(function(){
        $('p').unwrap();
    })
     $('#wrapInner').click(function(){
        $('div').wrapInner('<i></i>');
    })
</script>

查找

问题及效果：
将选择器以 jq方法调用形式实现；

知识点：
eq(index) ：根据元素的index索引来查找元素
filter(expr) ：筛选操作，$(‘div’).filter(‘.cls1’);
not(expr) ：匹配除指定选择器以外的其他元素
children([expr]) ：获取当前元素下的所有子元素
find(expr) ：获取当前元素下的所有后代元素
next([expr]) ：获取当前元素下紧邻的下一个元素
prev([expr]) ：获取当前元素上紧邻的上一个元素
parent([expr]) ：获取当前元素的父元素
siblings([expre]) ：获取当前元素的所有同级兄弟元素

案例代码：

<body>
    <input type="button" value="eq" id="eq">
    <div>div111</div>
</body>
<script>
    $('#eq').click(function(){
        $('div').eq(0).html('div');
    })
</script>

综合案例-任务清单

问题及效果：

类似奇妙清单、todolist等任务应用；

案例代码：

    <head>
        <title></title>
        <meta charset="UTF-8">
            <script src="jq183.js"></script>   
         <style>
            #box{
                width: 400px;
                margin: 0 auto;
            }
            #show{
                font-size: 12px;
            }
            span{
                font-size: 12px;
                background-color:   #F0FFF0;
            }
            s{
                font-size: 12px;
                color:  #7B7B7B;
                background-color: #F0F0F0;
            }

         </style>
    </head>
    <body>
        <div id="box">
            <!--添加任务  -->
            <input type="text" value="" style="width:300px" id="list_value">
            <input type="button" value="添加任务" id="add">
            <!--任务列表  -->
            <div class="lists">
                 <div>
                    <input type="checkbox"><span>明天去吃麻辣小龙虾</span>
                </div>
            </div>
            <hr>
            <!--显示与隐藏  -->
            <div>
                <p id="show" >显示已完成任务</p>
            </div>
            <!--已完成任务的列表  -->
            <div id="hide" style="display:none">
                 <div>
                    <s>撸串，撸666串</s>  
                </div>
            </div>

        </div>
    </body>
    <script>
        //添加新任务
        $('#add').click(function(){
            //获取表单内容
            var val = $('#list_value').val();
            //表单内容不能为空
            if(val != ''){
                //创建任务
                var lists = '<div><input type="checkbox" id="t2"><span>'+ val +'</span></div>';
                //添加任务
                $('.lists').prepend(lists);
                //为任务绑定事件
                $('#t2').on('click',function(){
                    //取值
                    var v = $(this).next().html();
                    //创建已完成任务
                    var o = '<div><s>'+v+'</s></div>';
                    //添加到已完成任务列表
                    $('#hide').prepend(o);
                    //找到父级元素并删除
                    $(this).parent().remove();
                });

                //清空表单
                $('#list_value').val('');
            }else{
                alert('不能空');
            }
        })

        //已完成 任务的显示和隐藏
        $('#show').toggle(function(){
            //显示已完成任务
            $('#hide').show(500);
            //修改按钮标识
            $(this).html('隐藏已完成任务');            
        },function(){
            $('#hide').hide(500);
            $(this).html('显示已完成任务')
        })
    </script>