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');