API jQuery插件

35 阅读1分钟

API

滚动条高度的读写
scrollTop
读
    window.onscroll = function(){
        console.log($(window).scrollTop());
    }
​
    $("#btn").offset({
        top:1000
    }).click(function(){
        $(window).scrollTop(0);
    });
返回子元素在父元素的下标
index
    $("li").click(function(){
        console.log($(this).index());
    });

jQueryDom的增删查改
1.增
    let oDiv = $("<div>");
    oDiv.html(666);
    let oDiv1 = $("<div>888</div>");
    $("body").append(oDiv);
    $("body").append(oDiv1);
​
2.插入
    let oLi = $("<li>今天40度</li>");
    a.尾插
        $("ul").append(oLi);
        $(oLi).appendTo($("ul"));
    b.头插
        $("ul").prepend(oLi);
        $(oLi).prependTo($("ul"));
    c.插入至指定位置之前
    before
        $("li").eq(2).before(oLi);
        oLi.insertBefore($("li").eq(2));
    d.插入至指定位置之后
    after
        $("li").eq(2).after(oLi);
        oLi.insertAfter($("li").eq(2));
3.删除

jQuery插件

a.为jQuery对象添加插件
    方法一:
        $.fun();
​
    方法二:
        $.extend({
            add:function(a,b){
                return a + b;
            }
        });
        console.log($.add(1,2));
b.为jQueryDom添加插件
    $.fn.extend({
        changeStyle:function(w,h,color){
            $(this).css({
                width:w,
                height:h,
                backgroundColor:color
            });
        }
    });
​
    $("#box").changeStyle(100,100,"red");
    $("li").eq(1).changeStyle(50,25,"greenyellow");

使用第三方插件

增改
    $.cookie('name', 'laowang');
    $.cookie('age', '100', { expires: 7 });
查
    console.log($.cookie("name"));
删
    $.removeCookie('name'); 
    $.removeCookie('age');