jQuery基礎

jQuery

1 jQuery介紹

• jQuery 是一個高效、精簡而且功能豐富的 JavaScript 工具庫
• jQuery極大的簡化了JavaScript 編程

2 jQuery的基本使用

2.1 文檔就緒事件

$(document).ready(function(){ code... }) //簡寫 $(function(){ }) 

2.2 jQueryDOM和原生DOM

jQuery 經過$(選擇器)獲取元素，該元素對象是jqueryDOM。與原生DOM不一樣 jQueryDOM 是在原生DOM基本上進行的封裝，本質上是由原生DOM組成的類數組對象，能夠[索引]獲得原生DOM $(原生DOM)轉爲jQuery DOM 

3. jQuery選擇器

3.1 基本選擇器

同CSS3基本選擇器

3.2 層級選擇器

同CSS3的層級選擇器

空格 > + ~ 

3.3 過濾選擇器

:first
:last
:eq()   從0開始 :odd 奇數 :even 偶數 :lt() 小於 :gt() 大於 :not(選擇器) 

3.4 內容選擇器

:contains(text)     包含指定文字的元素 :has(選擇器) 包含指定子元素的元素 :empty 沒有子元素也沒有內容的元素 :parent 有子元素或者有內容的元素 

3.5 可見性選擇器

:hidden
:visible

3.6 屬性選擇器

[attr]          .list img[title]
[attr=value]    img[title=hello]
[attr!=val]     不等於 [attr^=val] [attr$=val] [attr*=val] attr屬性 包含 val [][][] 注意 jQuery中沒有 ~= 和 |= 

3.7 子元素選擇器

:first-child
:first-of-type :last-chile :last-of-type :nth-child :nth-last-child :nth-last-of-type :nth-of-type :only-child :only-of-type 

3.8 表單選擇器

:input      全部的表單控件 :text :password :radio :checkbox :submit :reset :button :file 

3.9 表單對象選擇器

:disabled
:enabled
:checked
:selected

4 jQuery 篩選器

4.1 過濾

eq(index)   從0開始 first() last() filter(選擇器) not(選擇器) has(選擇器) slice(start,end) 

4.2 查找

查找 子元素 children([selector]) 子元素 find(selector) 後代元素 查找 父元素 parent([selector]) parents([selector]) parentsUntil([selector]) offsetParent() 兄弟元素 next([selector]) 後面緊鄰的兄弟元素 nextAll([selector]) 後面全部的兄弟元素 nextUntil([selector]) 後面兄弟元素 指定結束條件 prev([selector]) 前面緊鄰的兄弟元素 prevAll([selector]) prevUntil([selector]) siblings([selector]) 全部的兄弟元素(除了本身) 其餘 closest(selector) 從本身開始往祖先元素找,返回第一個知足條件的 

4.3 串聯

add() addBack() end()