对于jQuery的初步印象
主要是闡述一些對jQuery的初步印象！
What? 什么是jQuery?
-- 引用自百度百科
“jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計宗旨是“write Less, Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、 Safari 2.0+、 Opera 9.0+等。"
更多詳細介紹請點擊
百度百科-jQuery鏈接
Why? 為什么要用jQuery?
原生的DOM API
- 難用
- 存在各種兼容性問題
- 功能太少，不能與時俱進
jQuery
- 輕量級
- 簡潔優雅，減少代碼量， 寫得少，做得多， 鏈式調用
- 兼容性好，
- API友好，符合人類直覺
- 功能強大，與時俱進
youmightnotneedjquery
這個網站可視化的展示了jQuery的優勢
When? 什么時候用jQuery?
- DOM操作較多（事件監聽）
- 簡單的AJAX
- 需要兼容多款瀏覽器
什么時候不用jQuery?
- 頁面交互極為簡單
- 頁面對流量有苛刻的要求
- 團隊已經有了jQuery的替代品
能用jQuery做什么？
-
Selectors, 方便快捷地選擇DOM元素
使用原生JavaScript的方式來遍歷DOM以及查找DOM的某個部分編寫很多冗余的代碼。jQuery的核心就是通過CSS選擇符查詢DOM文檔取得元素的引用，從而拋開了getElementById、getElementsByTagName，getElementsByClassName等等。
$('div.content') //找到所有應用.content clss樣式的div中所有的p標簽 //簡潔優雅//當然javaScript的Selectors API也很強大，也支持通過CSS選擇符查詢DOM文檔獲得元素的引用。但是也要考慮到瀏覽器的兼容，這也就是jQuery的優勢。 //document.querySelecor('div.content') - Traversing, DOM遍歷
提供各種強大的過濾器對結果進行篩選，縮小選擇結果。
遍歷封裝的相關方法 .eq(), .first(), .last(), .find(), .has(), .next(), .parent(), .parents()。
- Manipulation， DOM元素的操作
創建復制增加刪除元素封裝的相關方法：例如 $('htmlElemtn'),.add(), .remove()，.empty(), .clone()。
樣式封裝的相關方法: .addClass(), removeClass(), toggleClass(), hasClass()等等。
屬性封裝的相關方法: .attr(), removeAttr()等等。
位置封裝的相關方法: .before(), .after(), insertBefore(), insertAfter(), .append(), .appendTo(), prepend(), prependTo()等等。
元素取值賦值封裝的相關方法：.text(), html()。
- Utilities，實用程序(工具方法)
例如： jQuery.each(), jQuery.isArray(), jQuery.trim()等等
- Events, 事件操作
事件封裝的相關方法: .on(), .off(), .load(), .bind(), .blur()等等
- Effects, 特殊效果
特殊效果封裝的相關方法： .animate(), .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .slideToggle()等等
- AJAX
Ajax封裝的相關方法： jQuery.get(), jQuery.post(), .ajaxStart(), .ajaxSend(), .ajaxSuccss(), .load(), jQuery.getJSON(), jQuery.getScript() 等等
jQuery官方文檔
Difference?
jQuery對象和DOM原生對象有什么區別？ 如何轉化？
jQuery選擇器得到jQuery對象和原生JavaScript中的選擇符得到的DOM對象是不同類型的，不等價。
jQuery無法使用原生DOM對象的任何方法，同理Dom對象也不能使用jQuery里的方法。
<div class="content"><p>1</p><p>2</p><p>3</p> </div><script>var $aDiv = $('div').find('p');var aDiv = document.querySelectorAll('div p');var bDiv = document.getElementsByTagName('p'); console.log($aDiv); // prevObject: jQuery.fn.init(3) console.log(aDiv); // _proto_: NodeList(3) console.log(bDiv); // _proto_: HTMLCollection(3)//三者得到的對象都是不同的 //$aDiv === aDiv false //$aDiv === bDiv false //aDiv === bDiv false //通過[index]中括號語法可以在兩者之間進行轉化。 //$aDiv[0] === aDiv[0] true //$aDiv[0] === bDiv[0] true//aDiv[0] === bDiv[0] true</script>從以上代碼可以看出
$aDiv = $('div').find('p') 是jQuery特有的對象 prevObject: jQuery.fn.init(3)。
aDiv = document.querySelectorAll('div p')的原型是NodeList。
bDiv = document.getElementsByTagName('p')的原型是HTMLCollection。
三者之間都不等價。
jQuery中有一個包裝集概念，包裝集就是用偽數組實現的。
var $objArr = {0: '<p>1</p>',1: '<p>2</p>',2: '<p>3</p>',length: 3}for(var i = 0; i < $objArr.length; i++) {console.log($objArr[i])}// <p>1</p> , <p>2</p>, <p>3</p>以上代碼以對象字面量的形式定義了一個對象$objArr,通過這個對象模擬數組，即偽數組對象。JavaScript中獲取一個對象的屬性值， 可以使用obj.propery 或者 obj['property']，對象中的property屬性以數字開頭的時候，用中括號obj['propery']獲取值的時候可以不加引號，即obj[property]。 在上面的例子中就是，$objArr[1]，$objArr[2]， $objArr[3]。
是不是很熟悉？
jQuery對象轉化為原生DOM對象的其中一種方式就是：$jQueryObj[index]。
所以
//通過[index]中括號語法可以在兩者之間進行轉化。 //$aDiv[0] === aDiv[0] true //$aDiv[0] === bDiv[0] true//aDiv[0] === bDiv[0] true有了上面的了解， 原生DOM對象轉jQuery對象理解起來就簡單多了，$(原生DOM對象)的方法，將原生DOM對象轉化為jQuery對象。 $是一個方法，調用該方法，將原生DOM對象作為參數傳入，$方法內部對原生DOM對象做進一步的加工，使其成為一個包裝集，即偽數組對象。
jQuery如何綁定事件？
jQuery有很多綁定事件的方法。
- .bind( eventType [, eventData ], handler ), bind(捆綁) 為每個匹配元素的特定事件綁定事件處理函數。As of jQuery 3.0, .bind() has been deprecated. jQuery官方文檔指出3.0版本中該方法已棄用。
- .unbind( eventType [, handler ] )，unbind(解開)，bind(捆綁)的反向操作，從每一個匹配的元素中刪除綁定的事件。As of jQuery 3.0, .unbind() has been deprecated. jQuery官方文檔指出3.0版本中該方法已棄用。
- .delegate( selector, eventType, handler ), delegate(委派) 為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規定當這些事件發生時運行的函數。使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創建的新元素）。jQuery官方文檔指出3.0版本中該方法已棄用。
- .live( events, handler )， jQuery 給所有匹配的元素附加一個事件處理函數，即使這個元素是以后再添加進來的也有效。這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數，而以后再添加的元素則不會有。jQuery官方文檔指出1.7版本中該方法已棄用。
- .on( events [, selector ] [, data ], handler )， 在選定的元素上綁定一個或者多個事件處理函數（Attach an event handler function for one or more events to the selected elements.）
- .off( events [, selector ] [, handler ] )， 在選擇元素上移除一個或多個事件的事件處理函數。
推薦使用on 或off綁定或者移除事件處理函數， 可以對元素動態綁定，運行速度快，效率高。
$('div').on('click', 'p', (event) => {console.lg($(this)); })jQuery的一些常用API
jQuery展示/隱藏元素
- show([speed,[easing],[fn]]) 顯示隱藏的匹配元素。
這個就是 'show( speed, [callback] )' 無動畫的版本。如果選擇的元素是可見的，這個方法將不會改變任何東西。無論這個元素是通過hide()方法隱藏的還是在CSS里設置了display:none;，這個方法都將有效。
speed: 三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing: (Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"
fn:在動畫完成時執行的函數，每個元素執行一次。
- hide([speed,[easing],[fn]])
隱藏顯示的元素。這個就是 'hide( speed, [callback] )' 的無動畫版。如果選擇的元素是隱藏的，這個方法將不會改變任何東西。
speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"
fn:在動畫完成時執行的函數，每個元素執行一次。
jQuery的動畫
- animate(params,[speed],[easing],[fn])， 用于創建自定義動畫的函數。
這個函數的關鍵在于指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性， 如height、top、opacity。注意：所有指定的屬性必須用駝峰命名的形式，如：marginLeft 代替 margin-left。
而每個屬性的值表示這個樣式屬性到多少動畫結束， 如果是一個數值，樣式屬性就會從當前的值漸變到指定的值。如果使用的是“hide"、“show”、“toggle”這樣字符竄值， 則會為屬性調用默認的動畫形式。
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".
fn:在動畫完成時執行的函數，每個元素執行一次。
.delay()設置一個定時器，以延遲 執行隊列中后續的項目。
.clearQueue()從隊列中刪除所有還沒有運行過的項目。
.stop()在匹配的元素上停止當前正在運行的動畫。
.finish()針對匹配的元素 停止當前 正在運行的動畫，刪除所有 隊列中的動畫，并結束所有 動畫
<button id="go">Run</button><div id="block">Hello!</div><script>$('#go').on('click', (event) => {$('#block').animate( {width: "90%",height: "100%",fontSize: "10em",borderWidth: 10}, 5000 )});</script>jQuery設置和獲取元素內部HTML內容，設置和獲取元素內部文本。
- .html([val|fn]), 在一個 HTML 文檔中, 我們可以使用 .html() 方法來獲取任意一個元素的內容。
無參數， 返回第一個匹配元素內容。
參數 val，設置所有匹配元素的內容。
參數 回調函數fn，設置所有匹配元素的內容。
- text([val|fn])， 取得所有匹配元素的內容。
結果是由所有匹配元素包含的文本內容組合起來的文本。
無參數，返回元素的文本內容。
參數val，設置所有匹配元素的文本內容。
回調函數fn， 使用函數來設置所有匹配元素的文本內容。
jQuery 設置和獲取表單用戶輸入或者選擇的內容，以及設置和獲取元素屬性。
- val([val|fn|arr])， 獲得匹配元素的當前值。
在jQuery1.2中，可以返回任意元素的值。 包括select。如果多選，將返回一個數組，其包含所選的值。
無參數， 獲取文本框中的值。
參數val，設定文本框的值。
回調參數fn, 設定文本框的值。
參數array, 設定一個select和一個多選的select的值。
- attr(name|properties|key,value|fn), 設置或返回被選元素的屬性值。
參數name： 返回元素的屬性值。
參數properties： 可為元素設置多個屬性及屬性值。
參數key，value： 為元素設置屬性和值。
參數key，回調函數： 為元素屬性設置屬性和值。
總結
以上是生活随笔為你收集整理的对于jQuery的初步印象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： wordpress 分类使用不同的模版
- 下一篇： 阿里钉钉陈航发布10亿“春雨计划”，推进