再探jQuery

時間 2019-11-18

標籤 jquery 欄目 JQuery 简体版

原文原文鏈接

　　前言：在使用jQuery的時候發現一些知識點記得並不牢固，所以但願經過總結知識點加深對jQuery的應用，也但願和各位博友共同分享。php

　　jQuery是一個JavaScript庫，它極大的簡化了JavaScript編程，雖然目前網絡上有大量開源的JS框架，可是jQuery是目前最流行的JS框架，並且提供了大量的擴展。包括Google、Microsoft、IBM等大公司都在使用jQuery框架，值得注意的是，jQuery團體知道JS在不一樣瀏覽器中存在這大量的兼容性問題，因此jQuery兼容全部主流瀏覽器，包括Internet Explorer 6！css

第一部分：使用方法

　那麼如何使用jQuery呢？很簡單，只須要在jQuery.com下載jQuery並引入置於</body>的上面便可，以下所示：html

1	`<script src="jquery-1.10.2.min.js"></script>`

　若是你不但願下載並存放jQuery，也能夠經過CDN（內容分發網絡）引用它。其中，百度、新浪、谷歌、微軟的服務器都存有jQuery。jquery

　好比百度CDN：編程

1	`<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">`

　不推薦google的CDN,由於google產品在中國很不穩定。瀏覽器

　 使用這些大公司的CDN有什麼好處呢？　　緩存

　　許多用戶在訪問其餘站點時，已經從百度、又拍雲、新浪、谷歌或微軟加載過 jQuery。全部結果是，當他們訪問您的站點時，會從緩存中加載 jQuery，這樣能夠減小加載時間。同時，大多數 CDN 均可以確保當用戶向其請求文件時，會從離用戶最近的服務器上返回響應，這樣也能夠提升加載速度。服務器

　　補充CDN概念：CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快更穩定。使得用戶能夠就近取得所需內容，解決Internet網絡擁擠的情況，從而提升用戶訪問網站的響應速度。網絡

第二部分：jQuery語法

　1.　jQuery語法是經過選取HTML元素，並對選取的元素執行某些操做。基礎語法以下：app

$(selector).action()

美圓符號$定義jQuery
選擇符（selector）"查詢"和「查找」HTML元素
jQuery的action()執行對元素的操做

實例以下：

$(this).hide()-隱藏當前元素
$("p").hide()-隱藏全部<p>元素
$("p.test").hide()-隱藏全部class="test"的p元素

2.文檔就緒事件

$(document).ready( function (){

//此處開始寫jQuery代碼

});

　這句代碼的意思是再文檔徹底加載以後再運行jQuery代碼。

文檔就緒事件能夠簡寫爲：

$( function (){

//開始寫jQuery代碼

});

　注意到結尾處都有一個分號做爲結束。

第三部分：jQuery選擇器

　　jQuery選擇器基於元素的id、類、類型、屬性、屬性值等查找（或選擇)HTML元素.這些都是基於存在的css選擇器，除此以外，它還有一些自定義的選擇器。值得注意的是：jQuery中全部的選擇器都以美圓符號開頭。下面做簡單的介紹。

　　1.元素選擇器

　　jQuery元素選擇器基於元素名選取元素。如$("p")爲在頁面中選區全部的<p>元素，注意到p是由雙引號括起來的。

　　2.#id選擇器

　　jQuery中#id選擇器經過HMTL中的id屬性選取指定的元素。如$("#text"),因爲元素的id是惟一的，因此得到的元素也只有一個。

3. .class選擇器

jQuery中.class選擇器經過HTML中的class屬性選取指定的元素。如$(".test"),因爲元素的class不是惟一的，因此獲取的元素可能不止一個。

4. $("*")，選取全部的元素。

5. $(this),選取當前的HTML元素,注意：$(this)中的this不須要雙引號括起來。

6.$("p:first"),選取第一個p元素。

7.$("p.intro"),選取類名爲class的p元素。

　　8.$("ul li:first"),選取第一個ul下的第一個li元素。

9.$("ul li:first-child"),選取每一個ul下的第一個li元素。注意和8的區別。

10.$("[href]"),選取含有屬性href的元素。

11.$("a[href!='_blank']"),選取href屬性的屬性值不爲_blank的a元素。注意：用單引號將屬性值括起來。

12.$("a[href='_blank']"),選取href屬性的屬性值爲_blank的a元素。

13.$(":button")，選取全部type=button的input元素和button元素。

14.$("tr:even"),選取偶數行的tr元素。

15.$("tr:odd"),選取奇數行的tr元素。

第四部分：jQuery事件

　　1.什麼是事件呢? 事件就是頁面對不一樣訪問者的響應。而事件處理程序是指當HMTL中發生某些事件時所調用的方法。即事件處理程序是一個方法，或者說事件處理程序一個函數。常見的DOM事件有：

鼠標事件： click、dbclick、mouseenter、mouseleave等等。
鍵盤事件：keypress、keydown、keyup等。
表單事件：submit、change、focus、blur等等。
文檔/窗口事件：load、resize、scroll、unload等等。

而在jQuery中，大多數的DOM事件都有一個等效的jQuery方法。如：

　　$("p").click(function(){

//動做觸發後執行的代碼。

});

2.經常使用的jQuery事件方法

$(document).ready()。即在文檔徹底加載完以後執行函數。
click()。即當按鈕點擊事件被觸發是會調用的一個函數。
dbclick()。即雙擊元素會發生dbclick實踐。
mouseenter()。即當鼠標指針穿過元素時，會發生mouseenter事件。
mouseleave()。即當鼠標指針離開元素時，會發生mouseleave事件。
mousedown()。即當鼠標指針移動到元素上方，並按下鼠標按鍵時，會觸發mousedown事件。
mouseup()。即當在元素上鬆開鼠標按鈕時，會發生mouseup事件。
hover()。該方法哦那個魚模擬光標懸停事件。注：當鼠標移動到元素上時，會觸發指定的第一個函數（mouseenter）；當鼠標移出這個元素時，會觸發指定的第二個函數（mouseleave）。
focus()。當元素得到焦點時，發生focus事件。如用鼠標選中或者用tab鍵定位到元素上時。
blur()。當元素失去焦點時，會觸發blur事件。

第五部分：jQuery效果

　　1.隱藏和顯示

　　經過jQuery，您可使用hide()、show()方法來隱藏和顯示HMTL元素。

　　語法：

1 2	`$(selector).hide(speed,callback);` `$(selector).show(speed,callback);`

　　即hide和show方法均可以接收兩個參數，第一個是speed（可選的），即顯示的速度，能夠取值「slow」、「fast」或毫秒。第二個是callback（可數的），它是隱藏或顯示完成後所執行的函數名稱。

經過jQuery，您可使用toggle()方法來切換hide()、show()方法。即顯示被隱藏的元素，而隱藏的元素會被顯示。語法以下：

1	`$(selector).toggle(speed,callback);`

　　toggle()方法一樣能夠接收兩個參數與hide()和show()方法。

　　2.淡入淡出

　　經過jQuery，能夠經過fadeIn()、fadeOut()、fadeOut()、fadeTo()。

　　語法以下：

$(selector).fadeIn(speed,callback);

$(selector).fadeOut(speed,callback);

$(selector).fadeToggle(speed,callback);

$(selector).fadeTo(speed,opacity,callback);

　　其中fadeIn使得隱藏的元素淡入、fadeOut使得出現的元素淡出，而fadeToggle和toggle方法相似，若是元素隱藏，則淡入，若是元素出現，則淡出。這三種方法都接收兩個參數（都是可選的），其中第一個參數是淡入淡出的時間，能夠是"fast"、"slow"或毫秒數。第二個參數時一個回調函數，即淡入（淡出）效果執行完以後執行的函數。

　　補充內容：回調函數，又簡稱回調（callback即call then back，被主函數調用運算後會返回主函數），是指經過函數參數傳遞到其餘代碼的，某一塊可執行代碼的引用。

　以下所示：　

　而fadeTo()方法容許漸變爲給定的不透明度(值介於0與1之間)。第二個參數即爲不透明度。

　　3.滑動

　　經過jQuery的slideDown()、slideUp()和slideToggle()方法能夠完成元素的上下滑動效果。語法以下：

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

　　其中，slideDown()方法用於對隱藏的元素向下滑動出現。slideUp()方法用於對顯示的元素向上滑動隱藏。顯然，slideToggle()方法即切換slideDown()和slideUp()方法。滑動的效果很是不錯，值得推薦。

4.動畫 animate()方法

　　jQuery方法能夠用於建立自定義的動畫。語法以下：

+ View Code

　　該方法接收三個參數，必需的params參數定義造成動畫的css屬性。可選的speed參數規定效果的時長，它能夠去如下值：「slow」、「fast」或毫秒。可選的callback參數是動畫完成以後所執行的函數名稱。

　　看下面的例子：

<!DOCTYPE html>

<html>

<head>

<meta charset= "utf-8" >

<script src= "http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" >

</script>

<script>

$(document).ready( function (){

$( "button" ).click( function (){

$( "div" ).animate({left: '250px' });

});

</script>

</head>

<body>

<button>開始動畫</button>

<p>默認狀況下，全部的 HTML 元素有一個靜態的位置，且是不可移動的。

若是須要改變爲，咱們須要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!</p>

<div style= "background:#98bf21;height:100px;width:100px;position:absolute;" >

</div>

</body>

</html>

　　值得注意的是：默認的狀況下，全部的HTML元素都有一個靜態的位置，且是不可移動的。所以，若是咱們想要改變其位置，必須將元素的position屬性設置爲relative，fixed或absolute，由於animate方法也知識改變css！

　　既然animate()方法是一個控制動畫的方法，那麼它是能夠控制多個屬性的，以下所示：

<!DOCTYPE html>

<html lang= "en" >

<head>

<meta charset= "UTF-8" >

<title>jQuery</title>

<style>

#focus{width: 100px;height: 100px;background: red;}

</style>

<script src= "http://libs.baidu.com/jquery/1.10.2/jquery.min.js" ></script>

</head>

<body>

<button>淡入淡出</button>

<div id= "focus" ></div>

<script>

$(document).ready( function (){

$( "button" ).click( function (){

$( "#focus" ).animate({width: "200px" ,height: "300px" ,opacity:0.2}, "2000" , function (){alert( "success!" );});

});

</script>

</body>

</html><br>

經過這個animate（）方法會將div的寬度變爲200px，高度爲300px，0.2的不透明度，且執行時間爲2000ms，執行完成以後彈出窗口顯示「success!」。

$( "#p1" ).css( "color" , "red" )

.slideUp(2000)

.slideDown(2000);

5.中止動畫-stop()方法

　　該方法用於中止全部jQuery效果函數，包括滑動、淡入淡出和自定義動畫。

6.鏈（chaining）

　　經過jQuery，能夠把動做/法鏈接在一塊兒，即在一條語句上運行同一個元素的多個jQuery方法。這樣的話，瀏覽器就不用屢次的查找相同的元素。以下所示：

1	`$("#p1").css("color","red").slideUp(2000).slideDown(2000);`

　　這樣，p1元素會首先變成紅色，而後向上滑動，再而後向下滑動。

　　提示：當進行鏈接時，代碼行會變得不好。不過，jQuery語法不是很嚴格；咱們能夠按照本身但願的格式來寫，包括換行和縮進，這樣也能夠提升可讀性。如：

$( "#p1" ).css( "color" , "red" )

.slideUp(2000)

.slideDown(2000);

第六部分：jQuery HMTL

　　jQuery擁有可操做HMTL元素和屬性的強大方法，這一部分將要着重介紹。

　　一：jQuery獲取和設置內容與屬性

　　由於jQuery中提供了一系列與DOM相關的方法，這就使得訪問和操做元素和屬性變得很容易。

　1.得到內容能夠經過

text()方法--獲取所選元素的文本內容。若是咱們在括號內傳入參數就能夠設置元素的文本內容。
html()方法--獲取所選元素的內容（注意：若是內容中含有html標記，也會顯示出來）。若是咱們在括號內傳入參數（「字符串」）就能夠設置元素的文本內容。
val()方法--獲取表單字段的值。若是咱們在括號內傳入參數，就能夠設置表單字段的值。

　2.而jQuery attr()方法用於獲取屬性值。如$("#test").attr("href");便可得到id爲test的href屬性值。一樣地，對於attr()方法，咱們經過設置第二個參數便可設置屬性值。如：$("#test")。attr（「href」,"https://www.baidu.com"）。

　　除此以外，咱們也可以使用attr()方法同時設置多個屬性（注意:設置多個屬性要使用大括號,以前咱們也見過這種形式），如$("#test").attr({"href":"https://www.baidu.com","title":"百度一下"});

　　注意：１．上面所說的四種方法都有最後一個參數做爲回調函數。且回調函數都有兩個參數，第一個是被選元素列表中當前元素的下標，第二個是原始（舊的）值。

　　　　　２．　經過上面幾個方法，咱們能夠發現一個有趣的現象：不傳入參數，方法用於獲取；傳入參數，方法用於設置。這也是ｊＱｅｒｙ的迷人之處吧！

　二．jQuery添加元素

　　 jQuery添加元素由四個方法：

append()-在被選元素內部的結尾插入內容，如$("p").append("追加文本");
prepend()-在被選元素內部的開頭插入內容，如$("p").prepend("追加文本");
after()-在被選元素以後（外部）插入內容，如$("p").after("在後面添加文本");
before()-在被選元素以前（外部）插入內容,如$("p").before(「在前面添加文本」)；

　　爲了更好的理解內部和外部，下面我將舉例說明。

　　源代碼以下所示：

　　未點擊以前瀏覽器以下顯示：

點擊以後，瀏覽器以下顯示：

　　四.jQuery刪除元素

　　刪除元素有兩種方法：

remove()方法--該方法會刪除（整個）被選元素（包括子元素）
empty()方法--該方法刪除被選元素中的子元素（不刪除被選元素），即清空之意

　　注意：remove方法能夠接受一個參數，即過濾參數，容許對被刪除元素進行過濾，它能夠是任何jQuery選擇器的語法。

　　五.獲取並設置css類

　　jQuery擁有若干進行css操做的方法，包括：

addClass()-向被選元素添加一個或多個類。好比添加一個類：$("p").addClass("blue");也能夠添加多個類，中間用空格隔開便可，如：$("p").addClass("blue big another");
removeClass()-從被選元素刪除一個或多個類。用法與addClass相似。
toggleClass()-對被選元素進行添加/刪除類的切換操做。這個方法很是有意思，即若是一個元素有某個類（傳入該方法參數中的類）則刪除這個類，若是沒有這個類則添加這個類。
css()-設置或返回樣式屬性。1.語法爲：css("propertyname");即返回指定的css屬性的值，好比$("p").css(「background-color」)即返回p的背景顏色值（注意：這與JavaScript的獲取css屬性值方法不一樣，js獲取css屬性值時屬性如有連字符，連字符後面的首字母要大寫）。 2.設置指定的css屬性，語法爲：css("propertyname","value");3.該方法也能夠同時設置多個css屬性，語法爲：css({"propertyname":"value","propertyname":"value"},...);注意大括號的使用（jQuery中經常會出現設置多個屬性使用大括號的狀況,實際上，這裏大括號中所包含的是一個對象，說是對象也不徹底正確，由於其屬性名也有引號，因此它其實是JSON數據格式，其實這些鍵值對兒中的鍵也能夠沒有引號，這時鍵就要寫成小駝峯的形式了（也能夠不用！！）。那麼咱們實際上就能夠將之看做一個對象穿進去）。

　　舉例以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: green;
            color:white;
        }
    </style>
</head>
<body>
    <div>這是一個div。</div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
    var $obj={
        color:"green",
        background:"pink",
        width:"200px",
        height:"500px"
    };
    $("div").css($obj);
});
</script>
</html>

結果以下所示：

固然，咱們也能夠傳入下面這種形式：

$(document).ready(function(){

var $obj={

"color":"green",

"background-color":"pink",

"width":"200px",

"height":"500px"

};

$("div").css($obj);

});

　　6、jQuery中的尺寸獲取

　　jQuery提供了多個處理尺寸的重要方法，可是應當注意，它與css中的尺寸定義是不一樣的，不可一律而論。

width() -設置或返回元素的寬度（不包括內邊距、邊框、外邊距）
height()-設置或返回元素的高度（不包括內邊距、邊框、外邊距）
innerWidth()-返回元素的寬度（包括內邊距）
innerHeight()-返回元素的高度（包括內邊距）
outerWidth()-返回元素的寬度（包括內邊距和邊框）
outerHeight()-返回元素的高度（包括內邊距和邊框）
outerWidth（true）-返回元素的寬度（包括內邊距和邊框和外邊距）
outerHeight（ture）-返回元素的高度（包括內邊距和邊框和外邊距）

　　下面我將以一張圖來表示之。

第七部分：jQuery遍歷

　　首先，什麼使遍歷呢？實際上，遍歷即爲「移動」，用於根據其相對於其餘元素的關係來「查找」（或選取）HMTL元素。以某項選擇開始，並沿着這個選擇移動，一直到抵達您指望的元素爲止。重要：經過jQuery遍歷，咱們能夠從被選元素開始，輕鬆地在家族數中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動叫作DOM遍歷。

　　下圖是標準的DOM樹：

　　爲經過舉例引出概念，部分DOM樹以下圖：

　 經過上面的DOM樹咱們來介紹幾個基本概念：

　　1.父元素：即父親元素，好比div是ul的父元素，ul是li的父元素。

　　2.子元素：即兒子元素，好比ul是div的子元素，b是li的子元素。

　　3.同胞：即擁有同一個父元素的幾個元素。如兩個li互爲同胞元素，兩個span互爲同胞元素。

　　4.祖先：即父親，祖父，曾祖父......如div是下面全部元素的祖先。注意：父元素也是祖先，如咱們說div是ul的父元素，實際上div也是ul的祖先。

　　5.後代：即兒子，孫子，曾孫子......如b是div的後代。注意：子元素也是後代，如咱們說b是li的子元素，實際上b也是li的後代。

　　下面開始介紹具體的遍歷方法：

一：jQuery遍歷-祖先

　　即經過jQuery，在某個被選元素的基礎上向上遍歷DOM樹，以查找元素的祖先。

　　向上遍歷DOM樹的方法有如下幾種：

parent()方法--返回被選元素直接父元素，即該方法只會向上一級對DOM樹進行遍歷，注意：html根元素是沒有父元素的。標準DOM樹中的文檔包含了DOM樹，它不是一個元素，正由於此，hmtl才被成爲根元素。
parents()方法---返回被選元素的全部祖先元素，它一路向上直到文檔的根元素（<hmtl>）.
parentsUntil()方法---該方法返回介於兩個給定元素之間的全部祖先元素。

　　前面兩種方法較容易理解，下面我舉例說明第三個方法：

　　看下面的代碼：

即我設定全部邊框爲藍色，而後在js中向上遍歷，被選中的元素的邊框變成了紅色。效果圖以下：

二.jQuery遍歷-後代

　　即經過jQuery，咱們能夠向下遍歷，以查找元素的後代。

　　向下遍歷DOM樹的方法有如下兩種：

children()--該方法返回被選元素全部直接子元素，也就是說該方法只會向下一級對DOM樹進行遍歷，亦即返回全部兒子元素，不返回孫子元素，不返回曾孫子元素....注意：
find()--該方法返回被選元素的後代元素，一路向下直到找到須要爲止。也就是說該方法必須傳入一個參數。該參數能夠是任何選擇器。若是參數時*，那麼會返回被選元素的全部後代。

三.jQuery遍歷-同胞

　　同胞就是擁有相同的父元素。經過jquery的下列方法，能夠在DOM樹中遍歷元素的同胞元素。

siblings()--該方法返回所選元素的全部同胞元素。還能夠經過可選參數來過濾對同胞元素的搜索。如$("p").siblings("h1");即返回標籤名爲h1的p的同胞元素，多是一個，也可能有多個。
next()--該方法只返回被選元素的下一個同胞元素，沒有可選參數。如：$("p").next();返回p元素的下一個同胞元素。
nextAll()--顧名思義，該方法返回被選元素的後面全部的同胞元素。
nextUntil()--和前面介紹的parentsUtil方法相似，返回被選元素和傳入的參數所在元素之間的全部同胞元素。
prev()--和next()相反，此方法返回被選元素的上一個同胞元素，無其餘可選參數。
pervAll()--和nextAll()相反，此方法返回被選元素以前的全部同胞元素。
preUntil()--此方法返回被選元素到傳入參數所在元素之間的全部同胞元素。

四.jQuery遍歷-過濾（重點）

　　遍歷中使用過濾是很是有效的一種方式，下面將會列出五種過濾方法，前面三種是使用的最爲頻繁的方法，容許咱們基於某元素在一組元素中的位置來選擇一個特定的元素。後面兩種方法容許咱們選取匹配或不匹配某項制定標準元素。

　　1.first()--該方法返回一組被選元素中的首個元素。

　　2.last()--該方法返回一組被選元素中的最後一個元素。

　　3.eq()--該方法返回一組被選元素中的帶有指定索引號的元素（注意：索引號從0開始而非從1開始）。

　　4.filter()--該方法接受一個必選的參數，返回一組被選元素中的符合參數要求的元素。

　　5.not()--該方法接受一個必選的參數，返回一組被選元素中的不符合參數要求的元素。注意：not()裏只能接受一個條件。

　　爲說明清楚，舉例的代碼以下：

　　獲得的結果以下，你們能夠對比參考：

第八部分：jQuery Ajax

　　關於Ajax，我在博文《JavaScript Ajax之美~》中作了較爲詳盡的介紹，你們能夠看一看。

　　簡答回顧如下，Ajax實際上就是與服務器交換數據的技術。它能夠實如今不重載所有頁面的狀況下，經過後臺加載數據，並在網頁上進行顯示。使用AJAX的引用程序案例：谷歌地圖、騰訊微博、優酷視頻、人人網等等。

　　不使用jQuery也是能夠的，可是會有些難度，由於不一樣的瀏覽器對AJAX的實現並不相同，這意味着咱們必須編寫額外的代碼來對瀏覽器進行測試。不過，jQuery團隊爲咱們解決了這個難題，咱們只需使用jQuery提供的與AJAX有關的方法來輕鬆實現Ajax功能。

　　1.jQuery load()方法

　　這個方法是簡單但又很強大的一個AJAX方法。load()方法從服務器加載數據，並把返回的數據放入被選元素中。

　　語法以下：

　　$(selector).load(URL,data,callback);

URL參數必選，它規定咱們想要加載的URL。好比：$("div").load("example.php/example.txt");除此以外，咱們還能夠把example.txt文件中的id="p1"的元素的內容，加載到指定的div中，如：$("div").load("example.php/example.txt #p1");
data參數可選，它規定與請求一同發送的查詢字符串/值對集合。
callback參數規定當load()方法完成以後所容許的回調函數，回調函數能夠設置不一樣的參數：
- responseTxt-包含調用成功時的結果內容,即上面的例子裏example.txt內部的內容
- statusTxt-包含調用成功時的結果內容，即「success」或者是"error"。
- xhr-包含XMLHttpRequest對象

　　2.jQuery中Ajax的get()和post()方法

　　這兩種方法用於客戶端和服務器端進行請求和響應。

GET-從指定的資源請求數據，多用於從服務器取回數據，且GET方法可能返回緩存數據。
POST-向指定的資源提交要處理的數據，POST方法不會緩存數據，經常使用於連同請求一塊兒發送數據。

　　$.get()方法的語法以下：

　　$.get(URL,callback); $.get()方法經過從HTTP GET請求從服務器上請求數據。

　　其中URL參數時必需的。callback參數是可選的，用於在請求成功以後執行的函數名。

　　如$.get("example.php",function(data,status){

　　　　　　alert("數據："+data+"\n狀態："+status);

});　　

$.post()方法的語法以下：

　　 $.post(URL,data,callback);

　　　其中URL參數時必需的。data參數規定連同請求發送的數據。callback函數可選，是請求發送成功以後所執行的函數名。

3.noConflict()方法

　　 noConflict中文即爲不衝突，顯然，這個方法是爲了解決衝突問題的，那麼又是解決什麼衝突問題呢？

　　咱們知道JavaScript框架不僅jQuery一種，還有Backbone、Ext JS等一系列框架。在jQuery中咱們使用$做爲jQuery的簡寫，那麼若是其餘JavaScript框架也是用了$符號該怎麼辦呢，這會不會引發衝突呢？沒錯，會的。而noConflict()方法就是jQuery團隊在考慮了這個問題以後提出並實現的。

　　咱們能夠用該方法的三種形式來解決這個問題：

　　先寫出HTML代碼

<div>

<p class = "firstP" >我是一個段落</p>

</div>

　　第一種：