一文帶你詳細(xì)了解jQuery
jQuery于2006年1月由John Resig在BarCamp NYC首次發(fā)布。它目前由Timmy Wilson領(lǐng)導(dǎo), 并由一組開發(fā)人員維護(hù)。
jQuery是一個JavaScript庫,它簡化了客戶端JavaScript編程的過程,特別是針對HTML文檔遍歷和操作、事件處理、動畫效果和Ajax操作。
使用jQuery可以更容易地編寫可維護(hù)的JavaScript代碼,同時提高了跨瀏覽器的兼容性。其實(shí) jQuery 就是封裝的一個大型開源庫而已, 提供了若干的方法供我們使用
在我們的開發(fā)過程中, 會用到 js 內(nèi)大量的方法去完成一些功能,有的時候, 我們會覺得這個方法名字太長, 或者操作相對復(fù)雜, 或者使用非常頻繁,那么我們會有意識的將這些方法進(jìn)行封裝, 然后調(diào)用
舉個例子 :
在 2006 年以前, 我們獲取元素基本上會用到幾個方法
// 根據(jù) id 獲取元素 document.getELementById() // 根據(jù) 標(biāo)簽名 獲取元素 document.getElementsByTagName() // 根據(jù) 類名 獲取元素 document.getElementsByClassName()
在開發(fā)過程中, 我們會頻繁的用到這個方法, 那么我會下意識的對他進(jìn)行封裝
function getEle(selector) { if (/^#/.test(selector)) { return document.getElementById(selector) } else if (/^\./.test(selector)) { return document.getElementsByClassName(seelctor) } else { return document.getElementsByTagName(selector) } }
這樣一來, 我們以后再想獲取元素的時候, 就變得簡單了
就是這個道理, 在 2006 年的時候, John Resig 就做了這個事情
整理了大量的 JS 方法, 對其進(jìn)行篩選和整合,將一類內(nèi)容或者類似內(nèi)容封裝成了一個一個的方法,并且還做了一個超級大的貢獻(xiàn), 就是在代碼里面講兼容性也處理好了。
并且給他封裝的這個大型工具庫起了一個名字叫做 jQuery,因?yàn)樽钤绲?jQuery 其實(shí)就是為了解決各種各樣的獲取元素的問題和常見DOM操作,后來才逐步加入的更多的內(nèi)容。
到目前為止, jQuery 包含的大致內(nèi)容
- 選擇器 - 獲取元素
- 篩選器 - 篩選獲取到的元素
- DOM 常見操作 - 常規(guī)的 DOM 各種操作都有(屬性, 類名, 樣式, ...)
- 動畫 - 一些樣式的動畫效果
- 事件 - 各種各樣的時間綁定
- ajax - 前后端交互操作
jQuery 使用
需要下載一個 jquery 第三方并引入頁面,使用 npm 下載
npm install jquery
直接使用 cdn 地址
<script src="https://code.jquery.com/jquery-3.1.ja1.min.js"></script>
引入頁面以后直接使用就可以了
常見插件
因?yàn)?jQuery 當(dāng)年風(fēng)靡全球, 用起來非常方便簡潔,所以大家都會基于 jQuery 會開發(fā)一些插件, 畢竟再全的開源庫也不可能包含所有內(nèi)容。
常用的一些內(nèi)容
jquery-validation表單驗(yàn)證,jquery-pagenation 分頁器,Animisition 動畫特效 ...,太多了, 隨便一查就是一大堆, 你可以去嘗試使用一下, 你會愛上它的。
到此這篇關(guān)于一文帶你詳細(xì)了解jQuery的文章就介紹到這了,更多相關(guān)了解jQuery內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
這篇文章主要介紹了jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖的方法,非常的實(shí)用,小伙伴們可以直接拿到項(xiàng)目中使用。2015-03-03jQuery插件passwordStrength密碼強(qiáng)度指標(biāo)詳解
這篇文章主要為大家詳細(xì)介紹了jQuery插件passwordStrength密碼強(qiáng)度指標(biāo)實(shí)現(xiàn)代碼,感興趣的小伙伴們可以參考一下2016-06-06jQuery+PHP實(shí)現(xiàn)微信轉(zhuǎn)盤抽獎功能的方法
這篇文章主要介紹了jQuery+PHP實(shí)現(xiàn)微信轉(zhuǎn)盤抽獎功能的方法,詳細(xì)分析了抽獎程序界面設(shè)計(jì)、前臺jQuery交互、后臺概率算法等抽獎功能相關(guān)技巧,需要的朋友可以參考下2016-05-05解決jQuery插件tipswindown與hintbox沖突
先掃下盲:tipswindown是jQuery的彈窗插件,可以使用url或當(dāng)前頁元素顯示在模擬層中;hintbox是jQuery的類似Google Suggestions插件。2010-11-11jQuery實(shí)現(xiàn)鼠標(biāo)滑動切換圖片
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑動切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺值的實(shí)現(xiàn)代碼
asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺值的實(shí)現(xiàn)代碼 ,比頁面刷新更好,用戶體驗(yàn)更好,需要的朋友可以參考下。2010-09-09jquery基礎(chǔ)教程之?dāng)?shù)組使用詳解
jQuery的數(shù)組處理、便捷、功能齊全。一步到位的封裝了很多原生JavaScript數(shù)組不能企及的功能。下面是jquery數(shù)組的使用詳解,需要的朋友可以參考下2014-03-03jquery實(shí)現(xiàn)點(diǎn)擊按鈕顯示與隱藏效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)點(diǎn)擊按鈕顯示與隱藏效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04