主要是闡述一些對jQuery的初步印象！

---

What? 什么是jQuery?

-- 引用自百度百科

“jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計宗旨是“write Less, Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優(yōu)化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、 Safari 2.0+、 Opera 9.0+等。"

更多詳細介紹請點擊
百度百科-jQuery鏈接

---

Why? 為什么要用jQuery?

原生的DOM API

• 難用
• 存在各種兼容性問題
• 功能太少，不能與時俱進

jQuery

• 輕量級
• 簡潔優(yōu)雅，減少代碼量， 寫得少，做得多， 鏈式調用
• 兼容性好，
• API友好，符合人類直覺
• 功能強大，與時俱進

youmightnotneedjquery

這個網站可視化的展示了jQuery的優(yōu)勢

---

When? 什么時候用jQuery?

• DOM操作較多（事件監(jiān)聽）
• 簡單的AJAX
• 需要兼容多款瀏覽器

什么時候不用jQuery?

• 頁面交互極為簡單
• 頁面對流量有苛刻的要求
• 團隊已經有了jQuery的替代品

---

能用jQuery做什么？

• Selectors, 方便快捷地選擇DOM元素

  使用原生JavaScript的方式來遍歷DOM以及查找DOM的某個部分編寫很多冗余的代碼。jQuery的核心就是通過CSS選擇符查詢DOM文檔取得元素的引用，從而拋開了getElementById、getElementsByTagName，getElementsByClassName等等。

  $('div.content') //找到所有應用.content clss樣式的div中所有的p標簽 //簡潔優(yōu)雅//當然javaScript的Selectors API也很強大，也支持通過CSS選擇符查詢DOM文檔獲得元素的引用。但是也要考慮到瀏覽器的兼容，這也就是jQuery的優(yōu)勢。 //document.querySelecor('div.content')
• Traversing, DOM遍歷

  提供各種強大的過濾器對結果進行篩選，縮小選擇結果。

  遍歷封裝的相關方法 .eq(), .first(), .last(), .find(), .has(), .next(), .parent(), .parents()。

• Manipulation， DOM元素的操作

  創(chuàng)建復制增加刪除元素封裝的相關方法：例如 $('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原生對象有什么區(qū)別？ 如何轉化？

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中有一個包裝集概念，包裝集就是用偽數(shù)組實現(xiàn)的。

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,通過這個對象模擬數(shù)組，即偽數(shù)組對象。JavaScript中獲取一個對象的屬性值， 可以使用obj.propery 或者 obj['property']，對象中的property屬性以數(shù)字開頭的時候，用中括號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對象作為參數(shù)傳入，$方法內部對原生DOM對象做進一步的加工，使其成為一個包裝集，即偽數(shù)組對象。

---

jQuery如何綁定事件？

jQuery有很多綁定事件的方法。

• .bind( eventType [, eventData ], handler ), bind(捆綁) 為每個匹配元素的特定事件綁定事件處理函數(shù)。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(委派) 為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數(shù)。使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創(chuàng)建的新元素）。jQuery官方文檔指出3.0版本中該方法已棄用。
• .live( events, handler )， jQuery 給所有匹配的元素附加一個事件處理函數(shù)，即使這個元素是以后再添加進來的也有效。這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數(shù)，而以后再添加的元素則不會有。jQuery官方文檔指出1.7版本中該方法已棄用。
• .on( events [, selector ] [, data ], handler )， 在選定的元素上綁定一個或者多個事件處理函數(shù)（Attach an event handler function for one or more events to the selected elements.）
• .off( events [, selector ] [, handler ] )， 在選擇元素上移除一個或多個事件的事件處理函數(shù)。

推薦使用on 或off綁定或者移除事件處理函數(shù)， 可以對元素動態(tài)綁定，運行速度快，效率高。

$('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")或表示動畫時長的毫秒數(shù)值(如：1000)

  easing: (Optional) 用來指定切換效果，默認是"swing"，可用參數(shù)"linear"

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

• hide([speed,[easing],[fn]])
  隱藏顯示的元素。

  這個就是 'hide( speed, [callback] )' 的無動畫版。如果選擇的元素是隱藏的，這個方法將不會改變任何東西。

  speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)

  easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數(shù)"linear"

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

<div class="content"><p>1</p><p>2</p><p>3</p></div><script>var $divP = $('.content').find('p');$divP.hide(5000, 'linear', () => {alert('Hiden Done!');});$divP.show(5000, 'linear', () => {alert('Show Done!!');});</script>

jQuery的動畫

• animate(params,[speed],[easing],[fn])， 用于創(chuàng)建自定義動畫的函數(shù)。

這個函數(shù)的關鍵在于指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性， 如height、top、opacity。注意：所有指定的屬性必須用駝峰命名的形式，如：marginLeft 代替 margin-left。

而每個屬性的值表示這個樣式屬性到多少動畫結束， 如果是一個數(shù)值，樣式屬性就會從當前的值漸變到指定的值。如果使用的是“hide"、“show”、“toggle”這樣字符竄值， 則會為屬性調用默認的動畫形式。

params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合

speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)

easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".

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

.delay()設置一個定時器，以延遲 執(zhí)行隊列中后續(xù)的項目。

.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() 方法來獲取任意一個元素的內容。

  無參數(shù)， 返回第一個匹配元素內容。

  參數(shù) val，設置所有匹配元素的內容。

  參數(shù) 回調函數(shù)fn，設置所有匹配元素的內容。

<p>hello</p><p>how are you?</p><script>console.log($('p').html()); //hello$('p').html('Hello<b>World</b>!');//HelloWorld!$('p').html((n) => {console.log('這個p元素的index是:' + n);});//這個p元素的index是:0, 這個p元素的index是:1</script>

• text([val|fn])， 取得所有匹配元素的內容。

  結果是由所有匹配元素包含的文本內容組合起來的文本。

  無參數(shù)，返回元素的文本內容。

  參數(shù)val，設置所有匹配元素的文本內容。

  回調函數(shù)fn， 使用函數(shù)來設置所有匹配元素的文本內容。

<p>hello </p><p>how are you?</p><script>console.log($('p').text()); //hello how are you?$('p').text('Hello World!!');// <p>Hello World!!</p> , <p>Hello World!!</p>$('p').text((n) => {console.log('the index of this p element is ' + n);}); //the index of this p element is 0, the index of this p element is 1</script>

jQuery 設置和獲取表單用戶輸入或者選擇的內容，以及設置和獲取元素屬性。

• val([val|fn|arr])， 獲得匹配元素的當前值。

  在jQuery1.2中，可以返回任意元素的值。 包括select。如果多選，將返回一個數(shù)組，其包含所選的值。

  無參數(shù)， 獲取文本框中的值。
  參數(shù)val，設定文本框的值。
  回調參數(shù)fn, 設定文本框的值。
  參數(shù)array, 設定一個select和一個多選的select的值。

<div>輸入框 <input type="text" value ="hello" placeholder="hello"></div><script type="text/javascript">console.log($('div > input').val());//hello$('div > input').val('hello world');console.log($('div > input').val());//hello world$('div > input').val(() => {return 'how are you?'}) //how are you?</script> <p></p><select id="single"><option>Single</option><option>Single2</option></select><select id="multiple" multiple="multiple"><option selected="selected">Multiple</option><option>Multiple2</option><option selected="selected">Multiple3</option></select><script>function displayVals() {var singleValues = $('#single').val(); // Singlevar multipleValues = $('#multiple').val() || []; // ["Multiple","Multiple3"]$('p').html('<b>Single:</b> ' + singleValues + ' <b>Multiple:</b> ' + multipleValues.join(','));}displayVals(); //<p><b>Single:</b> Single <b>Multiple:</b> Multiple,Multiple3</p></script>

• attr(name|properties|key,value|fn), 設置或返回被選元素的屬性值。

  參數(shù)name： 返回元素的屬性值。

  參數(shù)properties： 可為元素設置多個屬性及屬性值。

  參數(shù)key，value： 為元素設置屬性和值。

  參數(shù)key，回調函數(shù)： 為元素屬性設置屬性和值。

<img src="./01.png" alt="Sunny"><script>var $img = $('img');console.log($img.attr('src')); // ./01.pngvar setImage = $img.attr({src: './test.jpg', alt: 'test Image'}) // <img src="./test.jpg" alt="test Image">var setImageSrc = $img.attr('src', './test1.jpg');//<img src="./test1.jpg" alt="test Image">$img.attr('title', () => {return 'this is a photo!'}); //<img src="./test1.jpg" alt="test Image" title="this is a photo!"></script> 《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的对于jQuery的初步印象的全部內容，希望文章能夠幫你解決所遇到的問題。

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