jquery效果基础运用

1
jQuery 版本 2 以上不支持 IE6，7，8 浏览器。
如果需要支持 IE6/7/8，那么请选择1.9
你还可以通过条件注释在使用 IE6/7/8 时只包含进1.9。
<!--[if lt IE 9]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

2
click：单击事件
dblclick:双击事件
mouseenter：鼠标悬停事件
mouseleave：鼠标移除事件
focus:获得焦点事件
blur：失去焦点事件
参考网址：http://www.runoob.com/jquery/jquery-events.html
列如：
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
})

3
show:显示
hide:隐藏

4
jquery淡入淡出
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()-------------------点击隐藏
fadeOut()-------------------点击显示
fadeToggle()-------------------点击显示或隐藏
fadeTo()-------------------点击使得颜色变淡，效果设置为给定的不透明度（值介于 0 与 1 之间）
$("#div3").fadeTo("slow",0.7);

5
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
slideDown()-------------------点击显示
slideUp()-------------------点击隐藏
slideToggle()-------------------点击显示或隐藏

6
jQuery animate() 方法用于创建自定义动画。
6.1
$("div").animate({left:'250px'});----------------后面跟着CSS属性添加效果
注意：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。另外：也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：height:+=200px
6.2
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});效果同直接使用toggle()相同
6.3
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({'300px',opacity:'0.8'},"slow");
div.animate({height:'-=200px',opacity:'0.4'},"slow");
div.animate({'-=200px',opacity:'0.8'},"slow");
});
});

7
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画.

8
jQuery Callback 方法(jquery的回调函数方法)
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");-------当动画执行完成后再显示alert
});
});
});
注意：如果alert这段函数放到外面就会先执行然后再隐藏。

9
jQuery - 链(Chaining)
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});