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

清空所有隊列，并停止在最后的動畫的最終位置處

?

?

?

轉載于:https://www.cnblogs.com/hongxuejiao/p/4967434.html

總結

以上是生活随笔為你收集整理的关于JQuery简单介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。