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();

清空所有队列,并停止在最后的动画的最终位置处