當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript中的jQuery
生活随笔
收集整理的這篇文章主要介紹了
JavaScript中的jQuery
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
- JavaScript學習過程中的個人筆記，詳細請看https://www.liaoxuefeng.com/wiki/1022910821149312
- 再次感謝廖大
簡介
- jQuery是JavaScript世界中使用最廣泛的一個庫。
- jQuery可以幫我們干這些事情：
1）消除瀏覽器差異
2）簡潔的操作DOM的方法
3）輕松實現(xiàn)動畫、修改CSS等各種操作 - jQuery有1.x和2.x兩個主要版本，2.x移除了對IE 6、7、8的支持，因此代碼更精簡。
- 使用jQuery只需要在頁面的<head>引入jQuery文件即可：<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>。
- jQrery把所有功能全部封裝在一個全局變量jQrery中，而$也是一個合法的變量名，它是變量jQuery的別名。
- $ 本質上是一個函數，但函數也是對象，所有$除了可直接調用外，也可以有很多其他屬性。
選擇器
- 選擇器是jQuery的核心，一個選擇器寫出來類似$('#dom-id')。
- 選擇器就是幫我們快速定位到一個或多個DOM節(jié)點。
- 如果兩個DOM元素具有層級關系，可以使用層級選擇器$('ancestor descendant')來選擇，層級之間用空格隔開。
- 層級選擇器的好處在于縮小了選擇范圍。
- 子選擇器$('parend>child')類似層級選擇器，但是先頂了層級關系必須是父子關系。
- 過濾器通常附加在選擇器上，幫助我們更精確地定位元素。
- 通常情況下選擇器可以直接定位到我們想要的元素，當我們拿到一個jQuery對象后，還可以以這個對象為基準，進行查找和過濾。
- 最常見的查找是在某個節(jié)點的所有子節(jié)點中查找，只用find()方法，它本身又接收一個任意的選擇器。
- parent()方法可以從當前節(jié)點向上查找。
- next()和prev()方法可以查找同一層級的節(jié)點，可以傳入選擇器。
- filter()方法可以過濾到不符合選擇器條件的節(jié)點，或者傳入一個函數，注意函數內部的this被綁定為DOM對象，而不是jQuery對象。
- map()方法把一個jQuery對象包含的若干DOM節(jié)點轉化為其他對象。
- 一個jQuery對象如果包含了不止一個DOM節(jié)點，first()、last()和slice()方法可以返回一個新的jQuery對象，把不需要的DOM節(jié)點去掉。
操作DOM
- 通過jquery的選擇器拿到jQuery對象之后，下一步就是操作對應的DOM節(jié)點。
- jQuery對象的text()和html()方法分別獲取節(jié)點的文本和原始HTML文本。
- 可以通過向text()和html()方法傳入參數來設置文本和HTML文本。
- 一個jQuery對象可以包含0個或任意個DOM對象，它的方法實際上會作用在對應的每個DOM節(jié)點上。
- css(‘name’,‘value’)可以改變jQuery對象的css。
- jQuery對象的所有方法都返回一個jquery對象，這樣我們可以進行鏈式調用。
- jQuery對象的show()和hide()方法用來顯示和隱藏DOM元素。并未改變DOM樹的結構。
- 對于表單，jQuery對象統(tǒng)一提供val()方法獲取和設置對應的value屬性。
- jQuery的append()方法可以用來添加新的DOM節(jié)點。
- append()方法可以傳入字符串、原始的DOM對象、jQuery對象和函數對象
- append()方法傳入函數時，要求返回一個字符串、DOM對象或者jQuery對象。
- append()把DOM添加到最后，prepend()則把DOM添加到最前。
- 如果要添加的DOM節(jié)點已經存在，它會首先從文檔中移除，再添加。也就是說用append()，可以移動一個DOM節(jié)點。
- 同級節(jié)點可以用after()或者before()方法。
- 可以使用remove()方法刪除DOM節(jié)點。
事件
- 對jQuery對象的on方法可以綁定一個事件，
- 鼠標事件
1）click:單擊觸發(fā)
2）dblclick:雙擊觸發(fā)
3）mouseenter:鼠標移入時觸發(fā)
4）mouseleave:鼠標移出時觸發(fā)
5）mousemove:鼠標在DOM內部移動時觸發(fā)
6）hover:鼠標進入和退出時觸發(fā)兩個函數，相當于mouseenter加上mouseleave - 鍵盤事件僅作用于當前焦點的DOM上，通常是<intpu>和<textarea>
1）keydown:鍵盤按下時觸發(fā)
2）keyup:鍵盤松開時觸發(fā)
3）keypress:按一次后觸發(fā) - 其他事件
1）focus:當DOM獲得焦點時觸發(fā)
2）blur:當DOM失去焦點時觸發(fā)
3）change:當<input>、<select>或<textarea>的內容改變時觸發(fā)
4）submit:當<form>提交時觸發(fā)
5）ready:當頁面被載入并且DOM樹完成初始化后觸發(fā) - ready僅作用于document對象。ready事件在DOM完成初始化后觸發(fā)，且只觸發(fā)一次，所以適合用來寫其他的初始化代碼。
- 所有事件都會傳入Event對象作為參數，可以從Event對象上獲取到更多的信息。
- off('click',function)可以用來解除綁定的事件。
- off()方法無法移除一個已綁定的匿名函數。
- 可以使用off('clock')一次性移除已綁定的click事件的所有處理函數
- 無參數調用off()一次性移除已綁定的所有類型的事件
- 事件的觸發(fā)總是由用戶操作引發(fā)的。
動畫
- 用JavaScript實現(xiàn)動畫的原理就是以固定的時間間隔（如0.1秒），每次把DOM元素的CSS樣式修改一點，看起來就像動畫了。
- jQuery內置的幾種動畫樣式：
1）show/hide/toggle:以無參形式調用show()和hide()，會顯示和隱藏DOM元素，只要傳遞一個時間參數進去，就變成了動畫，時間單位是毫秒，也可以是slow/fast等字符串。toggle()則根據當前狀態(tài)決定是show()還是hide()
2）slideUp()/slideDown():show()/hide()是從左上角逐漸展開或收縮的，而slideUp()和slideDown()則是在垂直方向逐漸展開或收縮的，同樣slideToggle()則根據元素是否可見來決定下一步動作。
3）fadeIn/fadeOut:效果時淡入淡出，通過不斷設置DOM元素的opactiy屬性來實現(xiàn)，同樣有fadeToggle()方法。
4）animate():可以實現(xiàn)任意動畫效果，我們需要傳入的參數就是DOM元素最終的CSS狀態(tài)和時間，還可以傳入第三個參數，傳入一個函數，當動畫結束的時候，被調用。
5）delay():動畫可以串行執(zhí)行，通過delay()方法可以實現(xiàn)暫停。 - jQuery動畫的原理是逐漸改變CSS的值，對于不是block性質的DOM元素，對他們就不起作用。
- jQuery沒有實現(xiàn)對background-color的動畫效果，用animate()設置顏色也沒有效果。這種可以使用CSS3的transition實現(xiàn)動畫效果。
AJAX
- jQuery在$上綁定了ajax()函數，可以處理AJAX請求。
- ajax(url, settings)接收一個URL和一個可選的setting對象，常用選項如下：
1）async:是否異步執(zhí)行AJAX請求，默認為true，不要指定為false
2）method:發(fā)送的Method，缺省為GET，可指定為POST/PUT 等。
3）contentType：發(fā)送POST請求的格式，默認為'application/x-www-form-urlencoded; charset=UTF-8'，可指定為text/plain、application/json。
4）data：發(fā)送的數據，可以是字符串、數組或object。如果是GET請求，data將被轉換成query附加到URL上，如果是POST請求，根據contenType把data序列化成合適的格式。
5）headers：發(fā)送的額外的HTTP頭，必須是一個object。
6）dataType:接收的數據格式，可以指定為html/xml/json/text等，缺省情況下根據響應的content-Type猜測。 - jQuery的jqXHR對象類似一個Promise對象，對于回調的響應，可以采用鏈式寫法來處理
- 對于常用的AJAX操作，jQuery提供了單獨的get()、post()和getJSON()等方法。
擴展
- 當jQuery內置的方法不滿足需求的時候，我們可以進行擴展。
- 給jQuery對象綁定一個新插件函數是通過擴展$.fn對象實現(xiàn)的。
- jQuery對象支持鏈式操作，所以我們寫的插件函數也要能繼續(xù)鏈式下去，需要在方法末尾加上return this;
- jQuery提供的輔助方法$.extend(target, obj1,obj2...),它將多個object對象的屬性合并到第一個target對象中，遇到同名屬性，總是使用靠后的對象的值，也就是越往后優(yōu)先級越高。
- 插件函數要有默認值，綁定在$.fn.<pluginName>.defaults上
- 用戶在調用時可以傳入設定值以便覆蓋默認值。
總結
以上是生活随笔為你收集整理的JavaScript中的jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript 教程「9」：DOM
- 下一篇： JavaScript 教程「3」：数据类