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({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'-=200px',opacity:'0.4'},"slow");
div.animate({width:'-=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);
});
});

posted @ 2017-04-15 19:54  谢舒心  阅读(231)  评论(0编辑  收藏  举报