jQuery是一個(gè)兼容多瀏覽器的javascript庫，核心理念是寫得更少,做得更多。如今，jQuery已經(jīng)成為最流行的javascript庫，在世界前10000個(gè)訪問最多的網(wǎng)站中，有超過55%在使用jQuery。

特點(diǎn)： ?
????通過插件來擴(kuò)展
????多瀏覽器支持，解決了IE6，7，8的兼容性問題
????簡單小巧，使用方便
?關(guān)于版本?
????版本號(hào)：v1....兼容IE6，7，8及其他的瀏覽器
????版本號(hào)：v2....不兼容IE6，7，8，支持模塊化開發(fā)
?得到JQuery對(duì)象?

要想的到JQuery很簡單，只需在找到的元素前加上$符號(hào)即可，JQuery強(qiáng)大的選擇功能可以讓我們很容易的獲取到我們需要的對(duì)象，下面看幾個(gè)簡單的例子：

<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的元素

　　以上是最簡單，最常用的幾個(gè)選擇元素的方法

?

動(dòng)畫的簡單介紹：

show（speed,fn）；

speed:指定顯示完成的時(shí)間

fn:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

$("p").show("fast",function(){$(this).text("Animation Done!");});

以上代碼的執(zhí)行結(jié)果是p元素顯示的內(nèi)容為Animation Done！

讓事先隱藏的對(duì)象緩慢的顯示出來；

hide(speed,fn );

$("p").hide("fast",function(){alert("Animation Done.");});

以上代碼的執(zhí)行結(jié)果是p元素隱藏，并彈出提示框，提示內(nèi)容為Animation Done

toggle()；元素在顯示和隱藏之間來回切換

slideDown();//以向下劃的方式顯示

快速將段落滑下，之后彈出一個(gè)對(duì)話框

jQuery 代碼:

$("p").slideDown("fast",function(){alert("Animation Done.");});

slideUP();//以向上滑的方式顯示：

緩慢的將段落滑上jQuery 代碼: $("p").slideUp("slow");描述: 快速將段落滑上，之后彈出一個(gè)對(duì)話框jQuery 代碼: $("p").slideUp("fast",function(){alert("Animation Done.");});

?

fadeIn()//淡入

用600毫秒緩慢的將段落淡入

jQuery 代碼:

$("p").fadeIn("slow");

快速將段落淡入，之后彈出一個(gè)對(duì)話框

jQuery 代碼:

("p").fadeIn("fast",function(){alert("Animation Done.");});

fadeOut();//淡出

緩慢的將段落淡出

jQuery 代碼:

$("p").fadeOut("slow");

快速將段落淡出，之后彈出一個(gè)對(duì)話框

jQuery 代碼:

$("p").fadeOut("fast",function(){alert("Animation Done.");});

fadeTo（）//把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度，并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。

使用淡入效果來顯示一個(gè)隱藏的 <p> 元素：

jQuery 代碼:

$(".btn2").click(function(){$("p").fadeIn(); });

緩慢的將段落的透明度調(diào)整到0.66，大約2/3的可見度

jQuery 代碼:

$("p").fadeTo("slow", 0.66);

快速將段落的透明度調(diào)整到0.25，大約1/4的可見度，之后彈出一個(gè)對(duì)話框

jQuery 代碼:

$("p").fadeTo("fast", 0.25, function(){alert("Animation Done.");});

animate()

用于創(chuàng)建自定義動(dòng)畫的函數(shù)。

這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫形式及結(jié)果樣式屬性對(duì)象。這個(gè)對(duì)象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.

而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動(dòng)畫結(jié)束。如果是一個(gè)數(shù)值，樣式屬性就會(huì)從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫形式。

$("#block").animate({ width: "90%",height: "100%", fontSize: "10em", borderWidth: 10}, 1000 );

后面還可以跟動(dòng)畫完成后執(zhí)行的函數(shù)：

$("#block").animate({ width: "90%",height: "100%", fontSize: "10em", borderWidth: 10}, 1000,
　　function(){backgroundColor:"black");
　　}

stop([clearQueue],[jumpToEnd]）

停止所有在指定元素上正在運(yùn)行的動(dòng)畫。

如果隊(duì)列中有等待執(zhí)行的動(dòng)畫(并且clearQueue沒有設(shè)為true)，他們將被馬上執(zhí)行;

stop（）；

中止當(dāng)前動(dòng)畫，繼續(xù)隊(duì)列中的下一個(gè)動(dòng)畫。

stop(true);

表示清除動(dòng)畫隊(duì)列，并在當(dāng)前位置終止動(dòng)畫。

stop（true，true）；

清除動(dòng)畫隊(duì)列，并終止在當(dāng)前動(dòng)畫的最終位置處。

?

?

finish（）；

清空所有隊(duì)列，并停止在最后的動(dòng)畫的最終位置處

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/hongxuejiao/p/4967434.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。