2015.7.23 第十二课 课程重点（jq元素：获取、添加、删除、设置、绑定、显示隐藏、回调、动画）

1、获取内容：

　　text()：获取文本内容。text获取的是文本内容，假设被指定的<div>里面还有各种标签，text也只获取里面的纯文本内容。

　　html()：获取括号内内容。而html则是获取里面的全部内容，包括标签也会一起打印出来。

　　【例】

$(“#d1”).text(“aaaaa”);　　　　　　　　　　//打印出 aaaaa

$(“#d1”).html(“<div>aaaa</div>”);　　　　//打印出<div>aaaa</div>

2、添加元素：

$(A).append(B)：给A标签里面，加入一个B。

$(A).appendTo(B)：把A，加入到B标签里面。

$(A).after(B)：在A标签的后面，加上一个B。

　　【例】

$(“p:eq(1)”).append($(“a:eq(1)”));　　　　//给页面中第二个p标签里面，加入页面中第二个a标签

$(“img:eq(1)”).appendTo(“p:eq(1)”);　　 //把页面中第二个img标签，加入到页面中第二个p标签里

$(“img:eq(1)”).after(“<p></p>”);　　　　 //在页面中第二个img标签后面，加入一个p标签

3、删除元素：

$(A).remove()：把A标签整个的移除掉（练标签一起移除掉）。

$(A).empty()：把A里面的内容全部清空（标签会保留）。

【例】

$("p:eq(1)").remove();　　　　//给页面中第二个p标签连标签一起移除掉。

$(“p:eq(1)”).empty();　　　　 //把第二个p标签里面的内容清掉，保留标签。

4、获取/设置元素：

　　val()：获取到任何标签的value属性值。

　　val(B)：设置值为B，此时获取得到的val值就是B的内容。

　　【例】

$("txt").val();　　　　　　　　//获取到txt标签里面的value属性值。

$(“txt”).val("aaaa");　　　　 //设置txt标签的value属性值为aaaa。

5、绑定事件：

　　bind()：对于一个对象，可以用bind绑定多个事件。并且可以反复执行。

　　unbind()：解除绑定。

　　one()：对于一个对象，可以用one对它绑定一个事件，并且只执行一次。

　　【例】

　　$("img")

　　　　　　.bind("click",function(){事件1})

　　　　　　.bind("click",function(){事件2})

　　　　　　.bind("click",function(){事件3})　　　　//当我们点击img时，同时触发事件1、2、3；再点击img，再次触发事件123。

$(“p”).unbind(“click”);　　　　　　　　　　　　//让p标签无法点击。

　　$("div").one("click",function(){事件1});　　　　//当我们点击div时，触发事件1；再点击div时，就不会触发事件了。

6、显示和隐藏：

　　//左上到右下　　

　　show()：显示元素，从左上到右下展开。（当括号内加入时间后，代表用多长时间展开。）

　　hide()：隐藏元素，从右下往左上收缩隐藏。（当括号内加入时间后，代表用多长时间收缩。）

　　toggle()：在显示show和隐藏hide之间交替执行，瞬间显示或者隐藏。可加入时间。

　　//上下

　　slideDown()：显示元素，从上往下逐渐展开。

　　slideUp()：隐藏元素，从下往上收缩隐藏。

　　slideToggle()：在显示slideDown和隐藏slideUp之间交替执行，方式为上下伸缩。可加入时间。

　　//透明

　　fadeIn()：渐变的显示出来。由透明到出现。

　　fadeOut()：渐变的隐藏掉。逐渐变透明最后消失。

　　【例】

　　$("#btn").click(function(){

　　　　$("#d1").hide(2000);　　　　　　

　　})　　　　　　　　　　　　　　　　　　//当点击btn时，用1秒的时间从右下到左上隐藏d1

　　$("#btn").click(function(){

　　　　$("#d1").show(2000);　　　　　　

　　})　　　　　　　　　　　　　　　　　　//当点击btn时，用1秒的时间从左上到右下展开d1

　　$("#btn").click(function(){

　　　　$("#d1").toggle(2000);　　　　　　

　　})　　　　　　　　　　　　　　　　　　//当点击btn时，以2秒的速度左上到右下展开或隐藏d1（点击隐藏、再点击展开、……，交替执行）

7、回调函数：在现在的动作执行完后，立刻执行我们在里面定义的事件。

　　【例】

　　$("#btn").click(function(){

　　　　$("#d1").hide(1000,function(){alert("aaa");});　　　　　　

　　})　　　　　　　　　　　　　　　　　　//当点击btn时，用1秒的时间右下到左上隐藏d1，然后打印出aaa

8、动画时间animate:

　　animate：在多长时间内，从一个状态变到另一个状态。

　　【例】

　　$("#d1").css("position", "absolute").animate({ "top": "250px", "left": "300px" }, 2000,

　　　　　　　　　 function () {$("#d1").animate({ "top": "0px", "left": "600px" }, 2000);

});

　　//用2秒时间，从原来的位置，移动到绝对定位下的top:250px，left:300px的位置；然后用2秒时间，移动到top:0px，left:600px的位置。