1.基本選擇器：參考CSS選擇器 - $("")
- id/class/*/標(biāo)簽選擇器
- 群組選擇器：p,span
- 父子選擇器：ul>li
- 后代選擇器：ul li
- 兄弟選擇器：
- 單個(gè)：p+span
- 多個(gè)：p~span
- 屬性選擇器：
-
img[title]選擇帶有title屬性的圖片 -
img[title="mao"]屬性等于某個(gè)值的時(shí)候選中 -
img[title~="mao"]mao是詞列表（一個(gè)屬性多個(gè)值）也被選中 -
img[title^="mao"]開頭等于某個(gè)值選中 -
img[title$="mao"]結(jié)尾等于某個(gè)值選中 -
img[title*="mao"]包含某個(gè)值就選中 -
img[title|="mao"]選中title值為mao或mao-的內(nèi)容
-
2.過濾選擇器：偽類選擇器 - $("")
- 與CSS3偽類選擇器有區(qū)別，且有的jq提供方法
$('li:even') // 選擇索引為偶數(shù)的元素
$('li:odd') // 選擇索引為奇數(shù)的元素
$('li:hidden') // 選擇不可見元素
$('li:visible') // 選擇可見元素
$('li:empty') // 選擇內(nèi)容為空的元素
$('li:contains("ok")') // 選擇內(nèi)容為ok的元素
$("div").find("h2") === $("div h2") // 選擇div中所有的h2后代
$("div").children("h2") === $("div>h2") // 選擇div中所有的h2子元素
$("li").first() === $("li:first") // 選擇第一個(gè)li
$("li").last() === $("li:last") // 選擇最后一個(gè)li
$("li").eq(3) === $("li:eq(3)") // 選擇索引為3的li
$("ul").has(".aa") === $("ul:has(.aa)") // 選擇子元素中有aa類的ul
$("li").not(".aa") === $("li:not(.aa)") // 選擇沒有aa類的li
$("p").next("span") === $("p+span") // 選擇下一個(gè)兄弟元素
$("p").nextAll("span") === $("p~span") // 選擇后面所有兄弟元素
$("p").prev("span") // 選擇上一個(gè)兄弟元素
$("p").prevAll("span") // 選擇前面所有兄弟元素
$('li').parent() // 選擇最近的父級(jí)元素
$('li').parents() // 選擇所有父級(jí)元素
$('li').is('.red') // 返回true/false
$('li').hasClass('red') // 返回true/false
3.jQuery的動(dòng)畫
- hide()：隱藏
- show()：顯示
- toggle()：顯示/隱藏取反
- slideUp()：上拉
- slideDown()：下拉
- slideToggle()：上拉/下拉取反
- fadeIn()：淡入
- fadeOut()：淡出
- fadeToggle()：淡入/淡出取反
- fadeTo(時(shí)間, 透明度)：自定義
- 自定義動(dòng)畫：animate()
- animate({目標(biāo)}, 時(shí)間, cb)
- 連綴動(dòng)畫的三種方式
- 方法連綴：jq的DOM方法執(zhí)行結(jié)束后郊艘，返回正在操作的DOM對(duì)象损敷，不斷.animate()
- 同步連綴：動(dòng)畫與動(dòng)畫之間是同步的审葬，按順序執(zhí)行冲粤，分開寫
- 回調(diào)連綴：利用回調(diào)函數(shù)多次調(diào)用動(dòng)畫方法
- 動(dòng)畫與其他方法是異步的
- 動(dòng)畫與動(dòng)畫之間是同步的
- 多個(gè)動(dòng)畫會(huì)產(chǎn)生動(dòng)畫隊(duì)列
- 動(dòng)畫隊(duì)列：按順序依次執(zhí)行
- stop()：默認(rèn)停止之前的動(dòng)畫
- 兩個(gè)參數(shù)恢着，都是布爾值途凫，默認(rèn)都為false
- 第一個(gè)參數(shù)：true清除動(dòng)畫隊(duì)列桐汤；false不清除動(dòng)畫隊(duì)列
- 第二個(gè)參數(shù)：true立即運(yùn)動(dòng)到結(jié)束而克；false立即停止當(dāng)前動(dòng)畫
- delay(時(shí)間).animate()：延時(shí)執(zhí)行
- queue()：添加回調(diào)函數(shù)
- 默認(rèn)無返回值
- 傳入?yún)?shù)并調(diào)用即有返回值
4.jQuery的DOM操作
-
DOM操作
- siblings()：選擇所有兄弟元素
- eq(n)：選擇當(dāng)前索引為n的元素
- index()：查找當(dāng)前元素的索引
-
$("div").eq($("li").index())：選擇當(dāng)前l(fā)i對(duì)應(yīng)的div - parentsUntil(x)：選擇所有父級(jí)直到x，但不包括x
- nextUntil(x)：選擇后面的兄弟直到x怔毛，但不包括x
- prevUntil(x)：選擇前面的兄弟直到x员萍，但不包括x
- end()：返回上一步的對(duì)象 - A.B.end()：返回A
- html() => innerHTML
- text() => innerText
- val() => value
- addClass()：增加class樣式
- removeClass()：移除class樣式
- toggleClass()：取反，有則移除拣度，無則添加
- attr()/css()：設(shè)置屬性/樣式
- 一個(gè)參數(shù)：
- 字符：獲取此屬性值
- 數(shù)組：獲取多個(gè)屬性值
- 對(duì)象：設(shè)置多個(gè)屬性值
- 兩個(gè)參數(shù)：字符碎绎，設(shè)置屬性值
- arguments.length：判斷參數(shù)
- typeof(*)：判斷類型
- *.constructor：判斷類型
- 一個(gè)參數(shù)：
- removeAttr()：刪除屬性
- 清空css樣式：設(shè)為""或"none"
- $.each(obj,function(key,val){})：遍歷對(duì)象
-
尺寸類方法：返回?cái)?shù)值型
- 以下基于標(biāo)準(zhǔn)盒模型，請(qǐng)注意怪異盒的區(qū)別
- width()/height()：可獲取可設(shè)置抗果，元素的寬/高
- innerWidth()/innerHeight()：包括padding
- outerWidth()/outerHeight()：包括邊框和padding
-
位置類方法：offset/position返回對(duì)象筋帖，其他返回?cái)?shù)值
- offset()：可獲取可設(shè)置；傳入對(duì)象冤馏；偏移位置日麸，包括margin
- position()：只能獲取，不能設(shè)置；定位
- scrollTop()/scrollLeft()：可獲取可設(shè)置代箭；滾動(dòng)的距離
-
節(jié)點(diǎn)操作
- $("<div>")：創(chuàng)建元素
- A.append(B)：B插入到A最后一個(gè)子節(jié)點(diǎn)
- B.appendTo(A)：B插入到A最后一個(gè)子節(jié)點(diǎn)
- A.prepend(B)：B插入到A第一個(gè)子節(jié)點(diǎn)
- B.prependTo(A)：B插入到A第一個(gè)子節(jié)點(diǎn)
- A.after(B)：在A后面插入兄弟元素B
- A.before(B)：在A前面插入兄弟元素B
- remove()：移除節(jié)點(diǎn)
- empty()：清空內(nèi)容
- clone()：克隆節(jié)點(diǎn)
- A.clone(true).appendTo(B)：克隆A及A的事件插入到B
- replaceWith()：替換標(biāo)簽
-
綁定事件
- 一般事件綁定：$("#btn").click(fn)
- 綁定事件：$("#btn").on("click.a",fn)
- 清除事件：$("#btn").off("click.a")
- 事件委托：$(".list").on("click","li",fn)
- one()：綁定一次性事件
- hover()：綁定移入移出事件
- $("div").hover(fn1,fn2)
- fn1進(jìn)入事件 => enter
- fn2離開事件 => leave
- trigger("click") 自動(dòng)觸發(fā)事件墩划，且有事件冒泡
- triggerHandler() 自動(dòng)觸發(fā)事件，沒有事件冒泡
- preventDefault() 阻止默認(rèn)行為->contextmenu
- stopPropagation() 取消事件冒泡
- return false 阻止默認(rèn)事件和事件冒泡嗡综，雙層阻止
-
事件對(duì)象
- 同原生乙帮，但不用處理兼容
- event.type 獲取事件的類型
- event.data 獲取事件中傳遞的數(shù)據(jù)
- event.target 獲取綁定事件的DOM元素
- event.which 獲取當(dāng)前鼠標(biāo)點(diǎn)擊的鍵
- event.altKey/shiftKey/ctrlKey 返回true/false
- event.pageX/pageY 獲取根據(jù)頁面原點(diǎn)的X,Y值
- event.screenX/screenY 獲取根據(jù)顯示器窗口的X,Y值
- event.offsetX/offsetY 獲取根據(jù)父元素X,Y值
