JQuery效果与DOM元素操作

Bertha 。 2022-05-18 02:51 273阅读 0赞

> 作者：西岭老湿

--------------------

# 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部分

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

## 删除 ##

知识点：  
**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>