<script> $(function () { mouseover mouseout mouseenter mouseleave的區別
$('div').mouseover(function () { $(this).css('background', 'red'); }).mouseout(function () { $(this).css('background', 'green'); });
$('div').mouseenter(function () { $(this).css('background', 'red'); }).mouseleave(function () { $(this).css('background', 'green'); }); 上面的mouseover mouseout mouseenter mouseleave看不出有什么區別，mouseover mouseout在有子節點的時候會產生問題 --------------------------------------------------------------------- mouseenter()和mouseleave()這組穿過子元素不會觸發，而mouseover()和mouseout()則會觸發 $('div').mouseover(function () { //over會觸發子節點，造成多次無效的觸發 $('strong').html(function (index, value) { return value + '1'; }); }); $('div').mouseenter(function () { //enter不會觸發子節點 $('strong').html(function (index, value) { return value + '1'; }); }); --------------------------------------------------------------------- .keydown() 、.keyup()返回的是鍵碼，而.keypress()返回的是字符編碼。 $('input').keydown(function (e) { alert(e.keyCode); //按下a返回65 }); $('input').keyup(function (e) { alert(e.keyCode); //按下a返回65 }); $('input').keypress(function (e) { alert(e.charCode); //按下a返回97 }); --------------------------------------------------------------------- focus、blur、focusin、focusout的區別
.focus()和blur()分別表示光標激活和丟失，事件觸發時機是當前元素。而focusin()和focusout()也表示光標激活和丟失，但事件觸發時機可以是子元素 $('input').focus(function () { console.log('光標激活'); }); $('input').focusout(function () { console.log('光標激活'); });
$('div').focus(function () { //focus和blur必須是當前元素才能激活 console.log('光標激活'); }); $('div').focusin(function () { //focusin和focusout可以讓子元素激活 div里面放一個input，結果input激活了 console.log('光標激活'); }); $('div').focusout(function () { console.log('光標丟失'); }); --------------------------------------------------------------------- 復合事件 $('div').hover(function () { $(this).css('background', 'red'); }, function () { $(this).css('background', 'green'); }); 注意：.hover()方法是結合了mouseenter()方法和mouseleave()方法，并非mouseover()和mouseout()方法。 --------------------------------------------------------------------- toggle()方法1.9版本刪除掉了。但你又非常想用這個方法，并且不想自己編寫類似的功能，可以下載jquery - migrate.js文件，來向下兼容已被刪除掉的方法。 我們可以自己寫這樣一個方法 var flag = 1; $('div').click(function () { if (flag == 1) { $(this).css('background', 'red'); flag = 2; } else if (flag == 2) { $(this).css('background', 'blue'); flag = 3; } else if (flag == 3) { $(this).css('background', 'green'); flag = 1; } }); }) </script>

轉載于:https://www.cnblogs.com/gengxinnihaoma/p/7596987.html

總結

以上是生活随笔為你收集整理的jquery-基础事件[下]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。