前端框架-11-jQuery文档&对象

逃离我推掉我的手 2022-06-05 07:08 174阅读 0赞

# 前端框架-jQuery文档&对象 #

### 1.scroll滚动属性 ###

滚动条属性：
     scrollTop
     scrollLeft
    
    #获取 滚动高度/宽度
    $(document).click(function () {
        console.log("滚动高度" + $(this).scrollTop());
        console.log("滚动宽度" + $(this).scrollLeft());
    })
    
    #设置滚动高度/宽度
    $(document).click(function () {
        $(this).scrollTop(750); #滚动的垂直位置
        $(this).scrollLeft(750);#滚动的水平位置
    })

### 2.append,prepend ###

添加子元素 可以是标签、文本、js对象、jq对象
    #append 追加在该元素里面的最后面
     $("#box").append("<a>我是新增的a标签</a>");
    #appendTo 同append功能
    $("<a>我是新增的a标签</a>").appendTo($("#box"));
    
    # prepend 追加在该元素里面最前面
    $("#box").prepend("<a>我是新增的a标签</a>");
    #prependTo同 prepend
    $("<a>我是新增的a标签</a>").prependTo($("#box")
    
    #特殊用法append
    <div id="box">
        我是div
        <p>我是已经存在的p标签</p>
    </div>
    <b>我是b标签</b>
     <b>我是b标签2</b>
    
    var b = document.querySelector("b");
      $("#box").append(b);#会把相邻的第一个b标签添加到div里面
    
    var $b = $("b");
    $("#box").append($b);#会把相邻的所有b标签添加到div里面

### 3.before,after ###

#添加兄弟元素
    after ，添加在后面
    $("#box").after("<b>我是新增的</b>");
    #insertAfter 同after
    $("<b>我是新增的</b>").insertAfter("#box");
    
    #before，添加该元素前面
    $("#box").before("<b>我是新增的</b>");
    
    #insertBefore 同before
    $("<b>我是新增的</b>").insertBefore("#box");

### 4.wrap ###

#wrap 给每个元素添加一个父元素
    $("p").wrap("<div>123</div>");
    
    #unwrap 删除元素的父元素
    $("p").unwrap();
    
    #wrapAll 给子元素添加一个父元素都包起来
    $("p").wrapAll("<div></div>");
    
    wrapInner
    $("p").wrapInner("<em></em>");//所有段落内的每个子内容加粗

### 5.empty ###

empty 清空子节点
    $("#box").empty();
    
    remove 移除自己（不保留数据和事件）
    $("#box").remove();//不传参 移除自己和子元素
    $("p").remove(".box");//删除class叫box的那个p detach 移除自己（保留数据和事件） $("#box").detach(); clone 复制自己（根据参数不同，，决定是否保留事件和子元素） $(".box").clone().appendTo($("p"));

### 6.筛选 ###

#html演示
    <div id="box" class="show"> <p>1</p> <p class="box">2</p> <div> <p>3</p> <p>4</p> </div> </div> eq #hasClass 检查当前的元素是否含有某个特定的类，如果有，则返回true。 alert($("p").hasClass("box")); #children 找儿子 可以不传参数 console.log($("#box").children(".box")); #find 不传参，默认不找 console.log($("#box").find("p")); #parent 不需要参数 console.log($(".box").parent()); #parents找到所有 console.log($(".box").parents()); #找到所有的 console.log($(".box").parents(".show")); #siblings 不传参 所有兄弟 传参 所有兄弟按照参数筛选出合格的 $("p").siblings(".box").css("color","red");

### 7.事件 ###

jquery里面的事件
            都是函数形式的，去掉on的那种
            原理上事件都是事件绑定的形式而不是赋值的形式
    jquery事件绑定、解绑
            所有事件的添加都是绑定的形式
            可以通过on来添加事件
    
    #html
    <div id="box">
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
        </ul>
    </div>
    #绑定点击事件，事件可以绑定多次，会执行多次点击事件
    var $box = $("#box");
    $box.click(function () {
        alert(1);
    })
    $box.click(function () {
        alert(2);
    })
    
    #每个li添加点击事件
    $("#box ul li").click(function () {
        alert($(this).index());
    });
    #on绑定单个事件
    $("#box").on("click","li",function () {
         alert($(this).index());
    })
    
    #on绑定多个事件
    $("#box").on({
        "click": function () {
            console.log("我被点击了");
        },
        "mouseenter": function () {
            console.log("我被鼠标移入");
        },
        "mouseleave": function () {
             console.log("我被鼠标移出");
        }
    });
    
    #移除事件
    $("#box").off("click");
    
    #鼠标移入移除，mouseenter和 mouseleave结合功能
    $("#box").hover(function () {
        console.log(1);//移入
    },function () {
        console.log(2);//移除
    });

### 8.动画 ###

#show 不传参 瞬间显示隐藏
    hide  传一个数字参数，代表毫秒，改变宽、高、透明度
    toggle
    var off = false;
    var $box = $("#box");
    $(document).click(function () {
        if(off){
            $box.show(2000);
        }else{
            $box.hide(2000);
        }
        off = !off;
    })
    
    
    #fadeIn
    fadeOut 默认300 改变透明度
    fadeTo  可以把透明度设置一个值，时间参数不能省略
    var off = false;
    var $box = $("#box");
    $(document).click(function () {
        if(off){
            $box.fadeIn(2000);
        }else{
            $box.fadeOut(2000);
        }
        off = !off;
    })
    
    var $box = $("#box");
      $(document).click(function () {
          $box.fadeTo(500,0.2); #指定透明度
    })
    
    
    #slideDown 默认300 改变高度
    slideUp
    
    var off = false;
    var $box = $("#box");
    $(document).click(function () {
        if(off){
            $box.slideDown(2000);
        }else{
            $box.slideUp(2000);
        }
        off = !off;
    })
    #slideToggle 改变高度,有就隐藏，没有就显示
    var $box = $("#box");
    $(document).click(function () {
        $box.slideToggle();
    })
    
    
    这三组动画属性，不仅仅可以接受一个数字参数，能接受的参数有：
    * number / string  代表动画时间（可缺省）   毫秒数 / （"fast" "normal" "slow"）
    * string   代表运动曲线（可缺省）
    * function   代表回调函数

### 9.animate ###

animate
    传参：
        * obj  必传  json格式代表的变化的属性和目标值  数值变化
        * number/string 可缺省 代表毫秒数 或者 三个预设好的值 默认300
        * string 可缺省，代表运动曲线，只能是三个预设好的运动缺陷 默认easing
        * function 可缺省，代表动画结束后的回调函数
    
    $("#box").animate({
        "width": 500,
        "height": 200,
        "marginLeft": 200
    },5000)
    --------------------------------------------------------------------
    #stop动画
    清空动画队列，可以接受两个布尔值参数
    第一个不用管
    第二个决定是否瞬间到达，true到底，false没到
    
    #css
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        #box ul li{ 
            float: left;
            width: 150px;
            height: 30px;
            text-align: center;
            overflow: hidden;
            border-right: 1px solid #fff;
            background: red;
        }
        #box ul li p{ 
            height: 200px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
        }
    </style>
    
    #html
    <div id="box">
        <ul>
            <li>
                <p>苹果</p>
            </li>
            <li>
                <p>香蕉</p>
            </li>
            <li>
                <p>梨子</p>
            </li>
            <li>
                <p>橘子</p>
            </li>
            <li>
                <p>黄瓜</p>
            </li>
        </ul>
    </div>
    #动画开启
    $("#box ul li").hover(function () {
        $(this).stop(true,false).animate({
       "height":200},1000);
    },function () {
        $(this).stop(true,false).animate({
       "height":30},1000);
    })
    --------------------------------------------------------------------
    #延迟属性
    delay 只对动画有用
    $(document).click(function () {
    //   $("#box").delay(1000).fadeOut(500);#延迟操作
    //            $("#box").delay(5000).css("background","pink");//delay无用
        $("#box").delay(2000).queue(function () {
            $(this).css({
                "background":"pink",
                "width": 300
            });
        })
    })