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值