一、動(dòng)畫(huà)
show:顯示隱藏的元素(無(wú)動(dòng)畫(huà))
hide :? ? 隱藏顯示的元素? (無(wú)動(dòng)畫(huà))
fadeIn:通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡入效果,并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)剩晴。
fadeOut:通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果竖独,并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)草讶。
fadeTo:把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度昔园,并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
slideDown:通過(guò)高度變化(向下增大)來(lái)動(dòng)態(tài)地顯示所有匹配的元素阿浓,在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)他嚷。
slideUp:通過(guò)高度變化(向上減小)來(lái)動(dòng)態(tài)地隱藏所有匹配的元素芭毙,在隱藏完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)筋蓖。
slideToggle:通過(guò)高度變化來(lái)切換所有匹配元素的可見(jiàn)性,并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)退敦。
animate:用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)粘咖。
stop:停止所有在指定元素上正在運(yùn)行的動(dòng)畫(huà)。
delay:設(shè)置一個(gè)延時(shí)來(lái)推遲執(zhí)行隊(duì)列中之后的項(xiàng)目侈百。
finish:停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)瓮下,刪除所有排隊(duì)的動(dòng)畫(huà),并完成匹配元素所有的動(dòng)畫(huà)钝域。
二唱捣、DOM操作
.css()、addClass(“className”)网梢、removeClass()、toggleClass
?.attr()赂毯、removeAttr()战虏、.val()、.html(“<p></p>”)党涕、
text()??
node.append(“我是追加的內(nèi)容</p>”)/appendTo()? 在節(jié)點(diǎn)內(nèi)部后面追加元素/將元素追加到節(jié)點(diǎn)內(nèi)部后面
prePend()/prependTo()? ? ?在節(jié)點(diǎn)內(nèi)部前面追加元素/將元素追加到節(jié)點(diǎn)內(nèi)部前面
before(node)/after(node)? 在節(jié)點(diǎn)前/后面添加兄弟節(jié)點(diǎn)
node.insertBefore()/node.insertAfter()? 將節(jié)點(diǎn)作為兄弟節(jié)點(diǎn)添加到節(jié)點(diǎn)前/后面
node.remove();? //刪除指定節(jié)點(diǎn)及所有子節(jié)點(diǎn)? 推薦使用node.html("");? 方式清空
node.empty();? ? ?//刪除節(jié)點(diǎn)的所有子節(jié)點(diǎn)
node.clone(booolean);? //復(fù)制節(jié)點(diǎn)? 參數(shù)是否深層克路掣小(克隆綁定的事件)
node1.wrap(node2);? //用node2包裹node1
node1.replaceWith(node2);? //把node1節(jié)點(diǎn)換成node2節(jié)點(diǎn)
三、元素操作
?3.1 高度和寬度
$(“div”).height();?????????? //高度
$(“div”).width();???????????????? //寬度
.height()方法和.css(“height”)的區(qū)別:
返回值不同膛堤,.height()方法返回的是數(shù)字類型(20)手趣,
.css(“height”)返回的是字符串類型(20px),因此.height()方法常用在參與數(shù)學(xué)計(jì)算的時(shí)候
3.2 坐標(biāo)值
$(“div”).offset();??????????? //獲取或設(shè)置坐標(biāo)值? ?設(shè)置值后變成相對(duì)定位
$(“div”).position();?????? //獲取坐標(biāo)值? ? ? ? 子絕父相只能讀取不能設(shè)置
3.3 滾動(dòng)條
$(“div”).scrollTop();?????????? //相對(duì)于滾動(dòng)條頂部的偏移
$(“div”).scrolllLeft();???? //相對(duì)于滾動(dòng)條左部的偏移
四、jQuery事件
4.1 綁定
// 綁定事件
bind:$node.bind(“click”,function(){});
//綁定兩個(gè)事件
bind:$node.bind({“click”:function(){},"onmouseenter",function(){}});
// 觸發(fā)一次
one : $node.one(“click”,function(){});
//綁定多個(gè)子元素
delegate : $node.delegate(“p”,”click”,function(){});
//強(qiáng)烈推薦
on: $node.on(“click”,”p”,function(){});
4.2 解綁
unbind
undelegate
off
4.3 觸發(fā)
click? : $(“div”).click();
trigger:觸發(fā)事件绿渣,并且觸發(fā)瀏覽器默認(rèn)行為
triggerHandler:不觸發(fā)瀏覽器默認(rèn)行為
4.4 事件對(duì)象介紹
event.stopPropagation()???? ????? //阻止事件冒泡
event.preventDefault();?????????? //阻止默認(rèn)行為
五朝群、jQuery其他補(bǔ)充
5.1 隱式迭代
默認(rèn)情況下,會(huì)自動(dòng)迭代執(zhí)行jQuery選擇出來(lái)的所有dom元素的操作中符。
如果獲取的是多元素的值姜胖,默認(rèn)返回的是第一個(gè)元素的值。
5.2 map函數(shù)
$.map(arry,function(object,index){}) *返回一個(gè)新的數(shù)組*
var arry = $("li").map(function(index, element){}) *注意參數(shù)的順序是反的*
5.3 each函數(shù)
$.each(array, function(index, object){})
$("li").each(function(index, element){} )? //參數(shù)的順序是一致的淀散。
5.4 全局對(duì)象污染沖突
var newJq = $.noConflict();//讓jQuery釋放 $, 讓$ 回歸到j(luò)Query之前的對(duì)象定義上去右莱。
5.5 jQuery.data()? 數(shù)據(jù)緩存
$(".nav").data("name", 123);//設(shè)置值。
var t? = $(".nav").data("name"); //獲取值
t.name = "18";//對(duì)象的更改档插,會(huì)直接同步到 元素的jQuery對(duì)象上去慢蜓。
5.6 jQuery插件
全局jQuery函數(shù)擴(kuò)展方法
$.log = function() {}
jQuery對(duì)象擴(kuò)展方法
$.fn.log = function() {}