jquery

  • jquery的动画

1.animate()

1
2
3
4
5
6
7
8
用于创建自定义动画。
$(selector).animate({params},speed,callback);
必需的params参数定义形成动画的CSS属性。
可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的callback参数是动画完成后所执行的函数名称。
$("button").click(function(){
  $("div").animate({left:'250px'});
});

2.animate()-操作多个属性

1
2
3
4
5
6
7
8
9
生成动画的过程中可同时使用多个属性。
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

3.animate()-使用相对值

1
2
3
4
5
6
7
8
可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
})

4.animate()-使用预定义的值

1
2
3
4
5
6
可以把属性的动画值设置为"show"、"hide"或"toggle"：
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

5.animate()-使用队列功能

1
2
3
4
5
6
7
8
编写多个animate()调用，jQuery会创建包含这些方法调用的"内部"队列。然后逐一运行这些animate调用：
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
  • jquery的停止动画

1.stop()

1
2
3
4
5
6
7
8
9
用于停止动画或效果，在它们完成之前。
stop()方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
可选的stopAll参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的goToEnd参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop()会清除在被选元素上指定的当前动画。
$("#stop").click(function(){
  $("#panel").stop();
});
  • jquery的链
    有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条jQuery命令，一条接着另一条。
1
2
3
4
如:
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
  • jquery的设置内容和属性

1.设置内容-text()、html()以及val()

1
2
3
text()   设置或返回所选元素的文本内容。
html()   设置或返回所选元素的内容（包括HTML标记）
val()    设置或返回表单字段的值
1
2
3
4
5
6
7
8
9
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

2.设置属性-attr()

1
2
3
4
用于设置/改变属性值。
$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});
  • jquery的添加元素

1.append()

1
2
在被选元素的结尾插入内容（仍然该元素的内部）。
$("p").append("追加文本");

2.prepend()

1
2
在被选元素的开头插入内容。
$("p").prepend("在开头追加文本");

3.after()和before()

1
2
3
after()方法在被选元素之后插入内容。before()方法在被选元素之前插入内容。
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
  • jquery的删除元素

1.remove()

1
2
删除被选元素及其子元素。
$("#div1").remove();

2.empty()

1
2
删除被选元素的子元素。
$("#div1").empty();
  • jquery获取并设置css类

1.addClass()

1
2
3
4
5
6
7
8
9
如何向不同的元素添加class属性。
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
也可以在 addClass() 方法中规定多个类：
$("button").click(function(){
  $("body div:first").addClass("important blue");
});

2.removeClass()

1
2
3
4
在不同的元素中删除指定的class属性:
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

3.toggleClass()
该方法对被选元素进行添加/删除类的切换操作：

1
2
3
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});
  • jquery的css()方法
1
2
3
4
5
设置CSS属性
如需设置指定的CSS属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
$("p").css("background-color","yellow");