jQuery--------小复习（创建节点、写入节点、删除节点、替换节点、节点克隆、jQuery动画、获取站位和位置）

jquery

一,节点的操作
    1, 创建节点
        const oDiv = $('<div id="" class="" index="">div标签</div>');

        const oDiv = $('div' , { id:'div' , class:'div' , click : function(){} });

    2, 写入节点 : 8种形式
        父子:
            在最后
                $(父级标签).append(子级标签)
                子级标签.appendTo( $(父级标签) )

            在起始
                $(父级标签).prepend(子级标签)
                子级标签.prependTo( $(父级标签) )
        兄弟
            在之后
                $(已有标签).after(写入的标签)
                写入的标签.insertAfter( $(已有标签) )

            在之前
                $(已有标签).before(写入的标签)
                写入的标签.insertBefore( $(已有标签) )

    3, 删除节点
        $().empty()   
            清空当前标签,删除当前标签的所有内容,保留标签的属性,属性值等

        $().remove()
            彻底删除当前标签,整个标签都不存在了

    4, 替换节点
        两种语法,作用相同,也是为了满足不同的链式编程
        替换所有设定的标签

        $(已有标签).replaceWith(要写入的标签)
            
        要写入的标签.replaceAll( $(已有标签) )

    5, 节点克隆
        $().clone()
            参数1:
                默认值是false,不克隆标签上绑定的事件
                定义为true,克隆标签上绑定的事件
            参数2:
                只有第一个参数设定为true时,才起作用
                默认值是true,是否克隆子级标签上绑定的事件
                设定是false,不克隆子级标签上绑定的事件
        一般要克隆当前标签和子级标签的事件,只写参数1,为true就可以了
            $().clone(true);

        只克隆当前标签上绑定的事件,不克隆子级标签上绑定的事件
            $().clone(true , false);

二, jquery的动画

    1, 标准动画
        从左上角或者右上角开始,将标签运动至指定位置
        运动时,标签改变 宽高 和 透明度

        $().show(时间,线性,函数)      显示
        $().hide(时间,线性,函数)      隐藏
        $().toggle(时间,线性,函数)    切换 -- 显示就隐藏,隐藏就显示

    2, 折叠动画
        从当前位置,上卷隐藏,下拉显示
        改变的是高度

        $().slideDown(时间,线性,函数)      显示
        $().slideUp(时间,线性,函数)        隐藏
        $().slideToggle(时间,线性,函数)    切换 -- 显示就隐藏,隐藏就显示
        
    3, 渐隐渐现
        在当前位置,改变透明度

        $().fadeIn(时间,线性,函数)        显示
        $().fadeOut(时间,线性,函数)       隐藏
        $().fadeToggle(时间,线性,函数)    切换 -- 显示就隐藏,隐藏就显示

    4, 自定义动画
        $().animate({运动方式},时间,线性,函数)

    5, 结束动画
        $().stop().动画    触发动画时,之前的动画,从运动到的当前位置,直接执行触发的动画
        $().finish().动画  触发动画时,之前的动画,从运动的目标终止位置,执行执行触发的动画
        特别注意  finish 和 stop 都是终止的之前的动画
                    我们只要明白,为什么加,在什么地方加,就可以了,使用哪个,看实际项目需求

        动画的执行,默认值是执行完上一个动画,再执行下一个动画

        例如,手风琴效果
            如果不添加停止动画,鼠标移动过快,即时鼠标移出 手风琴demo区域 ,之前没有执行完的动画,仍然你会继续执行
            必须要添加停止动画,确保,触发了新动画,之前的动画,不再执行,立即执行新的动画

            实际项目中,所有的动画执行一般之前都要添加停止动画
            至于加什么,看项目需求,喜欢加那个就加那个

三, 获取占位和位置 --- 与JavaScript很相似
    
    1, 获取尺寸
        可以通过获取css样式来获取尺寸

        $().width()    $().height()
            获取 内容 : width / height
            有 box-sizing:border-box : width / height -padding -border

        $().innerWidth()    $().innerHeight()
            获取 内容 + padding : width / height + padding
            有 box-sizing:border-box : width / height  -border

        $().outerWidth()    $().outerHeight()
            获取 内容 + padding + border : width / height + padding + border
            有 box-sizing:border-box : width / height 

        $().outerWidth(true)    $().outerHeight(true)
            获取 内容 + padding + border + margin : width / height + padding + border + margin
            有 box-sizing:border-box : width / height + margin            

    2, 获取占位

        $().offset()
            可以获取,可以设定
            获取的是,标签对象与页面左上角的间距
            设定的也是标签与页面左上角的间距
            执行结果是一个对象
        
        $().position()
            只能获取,不能设定
            获取的是,标签对象与定位父级之前,定位属性的间距
            不算margin只算定位

    3, 获取滚动
        $(window).scrollTop      $(window).scrollLeft
        $('html').scrollTop      $('html').scrollLeft
        
        获取设定使用 window 或者 html 都可以
        如果使用 自定义动画 animate() 必须是 $('html')