jQuery入門(mén)介紹之基礎(chǔ)知識(shí)
JavaScript 庫(kù)作用及對(duì)比
為了簡(jiǎn)化JavaScript 的開(kāi)發(fā), 一些 JavsScript 庫(kù)誕生了. JavaScript 庫(kù)封裝了很多預(yù)定義的對(duì)象和實(shí)用函數(shù)。能幫助使用者建立有高難度交互的Web2.0 特性的富客戶(hù)端頁(yè)面, 并且兼容各大瀏覽器
當(dāng)前流行的JavaScript 庫(kù)有:
jQuery 簡(jiǎn)介
jQuery 是繼 Prototype 之后又一個(gè)優(yōu)秀的 JavaScript 庫(kù)
jQuery 理念: 寫(xiě)得少, 做得多. 優(yōu)勢(shì)如下:
輕量級(jí)
強(qiáng)大的選擇器
出色的 DOM 操作的封裝
可靠的事件處理機(jī)制
完善的 Ajax
出色的瀏覽器兼容性
鏈?zhǔn)讲僮鞣绞?/span>
……
jQuery: HelloWorld
jQuery 對(duì)象
jQuery 對(duì)象就是通過(guò) jQuery ($()) 包裝 DOM 對(duì)象后產(chǎn)生的對(duì)象
jQuery 對(duì)象是 jQuery 獨(dú)有的. 如果一個(gè)對(duì)象是 jQuery對(duì)象, 那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
jQuery 對(duì)象無(wú)法使用 DOM 對(duì)象的任何方法, 同樣 DOM 對(duì)象也不能使用 jQuery 里的任何方法
約定：如果獲取的是jQuery 對(duì)象, 那么要在變量前面加上 $.
var $variable = jQuery 對(duì)象
var variable = DOM 對(duì)象
DOM 對(duì)象轉(zhuǎn)成 jQuery 對(duì)象
對(duì)于一個(gè) DOM 對(duì)象, 只需要用 $() 把 DOM 對(duì)象包裝起來(lái)(jQuery 對(duì)象就是通過(guò) jQuery 包裝 DOM 對(duì)象后產(chǎn)生的對(duì)象), 就可以獲得一個(gè) jQuery 對(duì)象.
轉(zhuǎn)換后就可以使用 jQuery 中的方法了
jQuery 對(duì)象轉(zhuǎn)成 DOM 對(duì)象
jQuery 對(duì)象不能使用 DOM 中的方法, 但如果 jQuery 沒(méi)有封裝想要的方法, 不得不使用 DOM 對(duì)象的時(shí)候, 有如下兩種處理方法:
(1) jQuery 對(duì)象是一個(gè)數(shù)組對(duì)象, 可以通過(guò) [index] 的方法得到對(duì)應(yīng)的 DOM對(duì)象.
(2) 使用 jQuery 中的 get(index) 方法得到相應(yīng)的 DOM 對(duì)象
jQuery 選擇器
選擇器是 jQuery 的根基, 在 jQuery 中, 對(duì)事件處理, 遍歷 DOM 和 Ajax 操作都依賴(lài)于選擇器
jQuery 選擇器的優(yōu)點(diǎn):
簡(jiǎn)潔的寫(xiě)法
完善的事件處理機(jī)制
基本選擇器
基本選擇器是 jQuery 中最常用的選擇器, 也是最簡(jiǎn)單的選擇器, 它通過(guò)元素 id, class 和標(biāo)簽名來(lái)查找 DOM 元素(在網(wǎng)頁(yè)中 id 只能使用一次, class 允許重復(fù)使用).
基本選擇器示例
改變 id 為 one 的元素的背景色為 # bbffaa
改變 class 為 mini 的所有元素的背景色為 # bbffaa
改變?cè)孛麨?lt;div> 的所有元素的背景色為 #bbffaa
改變所有元素的背景色為 #bbffaa
改變所有的<span>元素和 id 為 two 的元素的背景色為 # bbffaa
層次選擇器
如果想通過(guò) DOM 元素之間的層次關(guān)系來(lái)獲取特定元素, 例如后代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使用層次選擇器.
注意: (“prev ~ div”) 選擇器只能選擇“# prev ” 元素后面的同輩元素; 而 jQuery 中的方法 siblings() 與前后位置無(wú)關(guān), 只要是同輩節(jié)點(diǎn)就可以選取
層次選擇器示例
改變<body> 內(nèi)所有<div> 的背景色為 # bbffaa
改變<body> 內(nèi)子 <div>的背景色為 # bbffaa
改變 id 為 one 的下一個(gè) <div> 的背景色為 # bbffaa
改變 id 為 two 的元素后面的所有兄弟<div>的元素的背景色為 # bbffaa
改變 id 為 two 的元素所有 <div> 兄弟元素的背景色為 # bbffaa
相關(guān)文章
jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法
這篇文章主要介紹了jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法,實(shí)例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
本篇文章主要對(duì)Jquery的事件操作和文檔操作進(jìn)行實(shí)例的分享，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
jQuery DataTables插件自定義Ajax分頁(yè)實(shí)例解析
這篇文章主要為大家詳細(xì)介紹了jQuery DataTables插件自定義Ajax分頁(yè)的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
CSS+jQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單
這篇文章主要介紹了CSS+jQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-12
jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法
這篇文章主要介紹了jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法,對(duì)比分析了bind與live方法,說(shuō)明了live方法在處理新增元素時(shí)的作用,需要的朋友可以參考下2016-05-05
jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
jQuery實(shí)現(xiàn)點(diǎn)擊圖片翻頁(yè)展示效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊圖片翻頁(yè)展示效果的方法,涉及jQuery操作圖片的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
children()是jQuery中的內(nèi)置方法,用于查找與所選元素相關(guān)的所有子元素,?jQuery中的children()方法向下遍歷到所選元素的單個(gè)級(jí)別并返回所有元素,我們還可以在children()的參數(shù)中添加過(guò)濾器、使用children()來(lái)定位特定的子元素以及使用each()方法來(lái)迭代子元素等2023-11-11
jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作示例
這篇文章主要介紹了jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)日期與時(shí)間戳的轉(zhuǎn)換、運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
jquery動(dòng)態(tài)改變onclick屬性導(dǎo)致失效的問(wèn)題解決方法
onclick屬性失效的問(wèn)題，相信很多的朋友都有遇到過(guò)吧，jquery動(dòng)態(tài)改變onclick屬性就會(huì)導(dǎo)致此問(wèn)題的發(fā)生，解決方法如下，希望對(duì)大家有所幫助2013-12-12