JQuery基本

Query remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

$("#div1").remove();

jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

$("#div1").empty();

//取消事件邦定
$(this).unbind();
$(document).height()    获取整个页面的高度
$(window).height()    获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的
//判断到底部
 if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
      alert("滚动条已经到达底部为" + $(document).scrollTop());
 }

 

 

 

$()函数，是招牌功能，能够根据CSS选择元素。

比如：

1 $("#box")

选择页面上id为box的盒子。

注意，选择出来的东西，是一个类数组对象，是jQuery自己的对象，这个jQuery对象后面不能跟着原生JS的语法：

1 $("#box").style.backgroundColor = "red";

因为.style.backgroundColor是原生JS语法，$()原则的对象是jQuery对象，不能跟着原生。

 

所以，如果想把jQuery对象，转为原生JS对象，要加[0]就行了：

1 $("#box")[0].style.backgroundColor = "red";

 

支持的选择器

jQuery支持所有CSS2.1的选择器：

1 $("p")

2 $(".box")   

3 $("#box")   

4 $("#box ul li")   

5 $("li.special")   

6 $("ol , ul")

7 $("*")  

 

筛选器

这些都是关于序号的：

1 $("p") 所有的p

2 $("p:first")   第一个p

3 $("p:last") 最后一个p

4 $("p:eq(3)") 下标为3的p

5 $("p:lt(3)") 下标小于3的p

6 $("p:gt(3)") 下标大于3的p

7 $("p:odd") 下标是奇数的p

8 $("p:even") 下标是偶数的p

特别的，eq可以单独提炼为方法，可以连续打点：

1 $("p").eq(3).animate({"width":400},1000);

等价于

1 $("p:eq(3)").animate({"width":400},1000);

提炼出来的好处是，可以用变量

1 var a = 3;

2 $("p").eq(a).animate({"width":400},1000);

 

 

CSS函数

css函数可以读样式，可以设样式。

读样式，可以读取计算后样式，写一个参数，是不是驼峰，无所谓，但是必须加引号：

1 $("p:first").css("background-color");

2 $("p:first").css("backgroundColor");

 

设置样式，设置样式，有两种语法，如果你只想设置一个样式，逗号隔开k和v：

1 $("p:odd").css("backgroundColor","blue");

 

如果想设置很多样式，就写JSON:

1 $("p:odd").css(JSON);

所有的数值，不需要单位：

1 $("p:lt(4)").css({

2  "width" : 20,

3  "height" : 20,

4  "backgroundColor" : "red"

5 })

当然，你也可以这样，不厌其烦的用逗号：

1 $("p:lt(4)").css("width",20);

2 $("p:lt(4)").css("height",20);

3 $("p:lt(4)").css("backgroundColor","red");

 

特别的，还支持+=写法：

1 $("p:eq(5)").css("width","+=20px");

animate函数

动画

1 $("p").animate({"left":1000},2000,function(){

2  $(this).css("background-color","red");

3 });

 

1 $("选择器").animate(终点JSON,动画时间,回调函数);

有没有缓冲呢，有，jQuery需要插件来完成，我们日后说。

jQuery默认不是匀速，是easeInOut

 

和我们封装的框架不一样，jQuery默认有一个处理机制，叫做动画排队。当一个元素接收到了两个animate命令之后，后面的animate会排队：

1 $("p").animate({"left":1000},2000);

2 $("p").animate({"top":400},2000);

先2000毫秒横着跑，然后2000毫秒竖着跑。动画总时长4000。

 

如果想让元素斜着跑，就是同时变化left和top，就写在同一个JSON里面：

1 $("p").animate({"left":1000,"top":400},2000);

 

不同的元素，不排队，是同时的。

 

各种尺寸

jQuery中的尺寸：

1 $("div").width();  //计算后的内容宽度

2 $("div").innerWidth();  //计算后的算上padding的宽度

3 $("div").outerWidth();  //算上padding和border

4 $("div").outerWidth(true);//算上padding和border和margin

净位置（到页面顶端的位置）

offset()这个方法返回一个带有top、left、bottom、right属性的对象。

 

1 var t = $("p").offset().top;

IE8的border问题都解决了。

先打点调用offset()方法，然后是top属性

 

窗口相关

 

窗口的卷动事件：

 

1 $(window).scroll(function(){

2      console.log($(window).scrollTop());

3 });

 

还记得么？$()里面只有三个东西不加引号：$(this)、$(window)、$(document)。

 

原生的：

 

window.onscroll = function(){

 

console.log(document.body.scrollTop || document.documentElement.scrollTop)

 

}

 

 

 

jQuery简单多了！

 

 

 

窗口卷动值：

 

1 $(window).scrollTop();  //方法！！不是属性

 

 

 

 

 

窗口的宽度：

 

1 $(window).width();

2 $(window).height();

 

 

 

窗口冲锋：

 

1 $(“html,body”).animate({    //对象变成了$(“html,body”)

2    “scrollTop” : 2000    //变成了属性

3 },1000);