jQuery簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
江湖傳言,全世界大約有80~90%的網(wǎng)站直接或間接地使用了jQuery。鑒于它如此流行,又如此好用,所以每一個(gè)入門JavaScript的前端工程師都應(yīng)該了解和學(xué)習(xí)它。
jQuery這么流行,肯定是因?yàn)樗鉀Q了一些很重要的問題。實(shí)際上,jQuery能幫我們干這些事情:
- 消除瀏覽器差異:你不需要自己寫冗長(zhǎng)的代碼來針對(duì)不同的瀏覽器來綁定事件,編寫AJAX等代碼;
- 簡(jiǎn)潔的操作DOM的方法:寫$('#test')肯定比document.getElementById('test')來得簡(jiǎn)潔;
- 輕松實(shí)現(xiàn)動(dòng)畫、修改CSS等各種操作。
jQuery的理念“Write Less, Do More“,讓你寫更少的代碼,完成更多的工作!
jQuery版本
目前jQuery有1.x和2.x兩個(gè)主要版本,區(qū)別在于2.x移除了對(duì)古老的IE 6、7、8的支持,因此2.x的代碼更精簡(jiǎn)。選擇哪個(gè)版本主要取決于你是否想支持IE 6~8。
從jQuery官網(wǎng)可以下載最新版本。jQuery只是一個(gè)jquery-xxx.js文件,但你會(huì)看到有compressed(已壓縮)和uncompressed(未壓縮)兩種版本,使用時(shí)完全一樣,但如果你想深入研究jQuery源碼,那就用uncompressed版本。
使用jQuery
使用jQuery只需要在頁面的<head>引入jQuery文件即可:
<html> <head> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> ... </head> <body> ... </body> </html>
好消息是,當(dāng)你在學(xué)習(xí)這個(gè)教程時(shí),由于網(wǎng)站本身已經(jīng)引用了jQuery,所以你可以直接使用:
'use strict';
alert('jQuery版本:' + $.fn.jquery);
$符號(hào)
$是著名的jQuery符號(hào)。實(shí)際上,jQuery把所有功能全部封裝在一個(gè)全局變量jQuery中,而$也是一個(gè)合法的變量名,它是變量jQuery的別名:
window.jQuery; // jQuery(selector, context) window.$; // jQuery(selector, context) $ === jQuery; // true typeof($); // 'function'
$本質(zhì)上就是一個(gè)函數(shù),但是函數(shù)也是對(duì)象,于是$除了可以直接調(diào)用外,也可以有很多其他屬性。
注意,你看到的$函數(shù)名可能不是jQuery(selector, context),因?yàn)楹芏郕avaScript壓縮工具可以對(duì)函數(shù)名和參數(shù)改名,所以壓縮過的jQuery源碼$函數(shù)可能變成a(b, c)。
絕大多數(shù)時(shí)候,我們都直接用$(因?yàn)閷懫饋砀?jiǎn)單嘛)。但是,如果$這個(gè)變量不幸地被占用了,而且還不能改,那我們就只能讓jQuery把$變量交出來,然后就只能使用jQuery這個(gè)變量:
$; // jQuery(selector, context) jQuery.noConflict(); $; // undefined jQuery; // jQuery(selector, context)
這種黑魔法的原理是jQuery在占用$之前,先在內(nèi)部保存了原來的$,調(diào)用jQuery.noConflict()時(shí)會(huì)把原來保存的變量還原。
相關(guān)文章
jQuery團(tuán)購倒計(jì)時(shí)特效實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery團(tuán)購倒計(jì)時(shí)特效實(shí)現(xiàn)方法,可實(shí)現(xiàn)相對(duì)固定時(shí)間的倒計(jì)時(shí)效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
基于jQuery的一個(gè)擴(kuò)展form序列化到j(luò)son對(duì)象
jQuery沒有直接支持form到j(luò)son的序列化方法,目前網(wǎng)上有一個(gè)實(shí)現(xiàn)是這樣的2010-12-12
基于jQuery實(shí)現(xiàn)簡(jiǎn)單人工智能聊天室
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)簡(jiǎn)單人工智能聊天室的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jQuery組件easyui基本布局實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery easyui基本布局實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
jBox 2.3基于jquery的最新多功能對(duì)話框插件 常見使用問題解答
jBox 是一款基于 jQuery 的多功能對(duì)話框插件,能夠?qū)崿F(xiàn)網(wǎng)站的整體風(fēng)格效果,給用戶一個(gè)新的視覺享受。2011-11-11

