关于JQuery简单介绍

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（）；

清空全部队列，并中止在最后的动画的最终位置处