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