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

清空全部隊列，並中止在最後的動畫的最終位置處