jQuery是一个兼容多浏览器的javascript库,核心理念是写得更少,做得更多。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
特点:
通过插件来扩展
多浏览器支持,解决了IE6,7,8的兼容性问题
简单小巧,使用方便
关于版本
版本号:v1....兼容IE6,7,8及其他的浏览器
版本号:v2....不兼容IE6,7,8,支持模块化开发
得到JQuery对象
要想的到JQuery很简单,只需在找到的元素前加上$符号即可,JQuery强大的选择功能可以让我们很容易的获取到我们需要的对象,下面看几个简单的例子:
<div id="div1"> <div class="main1"></div> <div class="main2"></div> <div class="main3"></div> <div class="main4"></div> </div>
$("#div1") //找到了id为div1的元素
$(".main1") //找到了class为main1的元素
$(".main1").next()//找到了class为main2的元素
$(".main1").nextAll() //找到了class为main2,main3,main4的元素
$(".main2").prev()//找到了class为main1的元素
$(".main4").prevAll() //找到了class为main1,main2,main3的元素
以上是最简单,最常用的几个选择元素的方法
动画的简单介绍:
show(speed,fn);
speed:指定显示完成的时间
fn:在动画完成时执行的函数,每个元素执行一次。
$("p").show("fast",function(){ $(this).text("Animation Done!"); });
以上代码的执行结果是p元素显示的内容为Animation Done!
让事先隐藏的对象缓慢的显示出来;
hide(speed,fn );
$("p").hide("fast",function(){ alert("Animation Done."); });
以上代码的执行结果是p元素隐藏,并弹出提示框,提示内容为Animation Done
toggle();元素在显示和隐藏之间来回切换
slideDown();//以向下划的方式显示
快速将段落滑下,之后弹出一个对话框
jQuery 代码:
$("p").slideDown("fast",function(){ alert("Animation Done."); });
slideUP();//以向上滑的方式显示:
缓慢的将段落滑上 jQuery 代码: $("p").slideUp("slow");描述: 快速将段落滑上,之后弹出一个对话框 jQuery 代码: $("p").slideUp("fast",function(){ alert("Animation Done."); });
fadeIn()//淡入
用600毫秒缓慢的将段落淡入
jQuery 代码:
$("p").fadeIn("slow");
快速将段落淡入,之后弹出一个对话框
jQuery 代码:
("p").fadeIn("fast",function(){ alert("Animation Done."); });
fadeOut();//淡出
缓慢的将段落淡出
jQuery 代码:
$("p").fadeOut("slow");
快速将段落淡出,之后弹出一个对话框
jQuery 代码:
$("p").fadeOut("fast",function(){ alert("Animation Done."); });
fadeTo()//把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
使用淡入效果来显示一个隐藏的 <p> 元素:
jQuery 代码:
$(".btn2").click(function(){
$("p").fadeIn();
});
缓慢的将段落的透明度调整到0.66,大约2/3的可见度
jQuery 代码:
$("p").fadeTo("slow", 0.66);
快速将段落的透明度调整到0.25,大约1/4的可见度,之后弹出一个对话框
jQuery 代码:
$("p").fadeTo("fast", 0.25, function(){ alert("Animation Done."); });
animate()
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
$("#block").animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 1000 );
后面还可以跟动画完成后执行的函数:
$("#block").animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 1000,
function(){ backgroundColor:"black" );
}
stop([clearQueue],[jumpToEnd])
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行;
stop();
中止当前动画,继续队列中的下一个动画。
stop(true);
表示清除动画队列,并在当前位置终止动画。
stop(true,true);
清除动画队列,并终止在当前动画的最终位置处。
finish();
清空所有队列,并停止在最后的动画的最终位置处