jQuery交互幫助方法
1.?hover( over, out )?
hover函數(shù)主要解決在原始javascript中mouseover和mouseout函數(shù)存在的問題, 看下面這個(gè)示例:
有兩個(gè)div(紅色區(qū)域), 里面分別嵌套了一個(gè)div(黃色區(qū)域). HTML代碼如下:
<div class="outer" id="outer1"> Outer 1 <div class="inner" id="inner1">Inner 1</div> </div> <div class="outer" id="outer2"> Outer 2 <div class="inner" id="inner2">Inner 2</div> </div> <div id="console"> </div>
綁定如下事件:
<script type="text/javascript">
function report(event) {
$('#console').append('<div>'+event.type+'</div>');
}
$(function(){
$('#outer1')
.bind('mouseover',report)
.bind('mouseout',report);
$('#outer2').hover(report,report);
});
</script>
Outer1我們使用了mouseover和mouseout事件,? 當(dāng)鼠標(biāo)從Outer1的紅色區(qū)域移動(dòng)到黃色區(qū)域時(shí), 會(huì)發(fā)現(xiàn)雖然都是在outer1的內(nèi)部移動(dòng), 但是卻觸發(fā)了mouseout事件:
很多時(shí)候我們不希望出現(xiàn)上圖的結(jié)果,? 而是希望只有鼠標(biāo)在Outer1內(nèi)部移動(dòng)時(shí)不觸發(fā)事件, Outer2使用Hover()函數(shù)實(shí)現(xiàn)了這個(gè)效果:
注意這里的事件名稱進(jìn)入叫做"mouseenter", 離開叫做"mouseleave", 而不再使用"mouseover"和"mouseleave"事件.
有經(jīng)驗(yàn)的開發(fā)人員會(huì)立刻想到在制作彈出菜單時(shí), 經(jīng)常遇到這個(gè)問題: 為彈出菜單設(shè)置了mouseout事件自動(dòng)關(guān)閉, 但是鼠標(biāo)在彈出菜單內(nèi)移動(dòng)時(shí)常常莫名其妙觸發(fā)mouseout事件讓菜單關(guān)閉. hover()函數(shù)幫助我們很好的解決了這個(gè)問題.
2.?toggle( fn, fn2, fn3,fn4,... )
toggle函數(shù)可以為對(duì)象添加click事件綁定函數(shù),? 但是設(shè)置每次點(diǎn)擊后依次的調(diào)用函數(shù)。
如果點(diǎn)擊了一個(gè)匹配的元素，則觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再次點(diǎn)擊同一元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)，如果有更多函數(shù)，則再次觸發(fā)，直到最后一個(gè)。隨后的每次點(diǎn)擊都重復(fù)對(duì)這幾個(gè)函數(shù)的輪番調(diào)用。
可以使用unbind("click")來刪除。
下面的示例演示如何使用toggle函數(shù):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
<title>toggle example</title>
<link rel="stylesheet" type="text/css" href="css/hover.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function()
{
$("li").toggle( function()
{
$(this).css({ "list-style-type": "disc", "color": "blue" });
}, function()
{
$(this).css({ "list-style-type": "square", "color": "red" });
}, function()
{
$(this).css({ "list-style-type": "none", "color": "" });
}
);
}) </script></head><body>
<ul>
<li style="cursor:pointer">click me</li>
</ul>
</body>
</html>
結(jié)果是每點(diǎn)擊一次"click me"變換一次列表符號(hào)和文字顏色.
