1. 程式人生 > >jQuery筆記-事件

jQuery筆記-事件

兩種頁面載入後執行任務方法:

    $(document).ready(function(){}); ==> $(function(){}); 在頁面解析完成html後執行

    window.onload=function(){};  在頁面載入完所有的檔案後執行

    $為jQuery的識別符號,如果使用多個框架可能造成$衝突,這時候可以在head中新增一個

    <script>jQuery.noConflict();</script> 並且在後面的程式碼中需要用jQuery('#id').addClass('className');

處理簡單的事件

    toggleClass()方法

    $(document).ready(function(){

        $('#id').on('click',function(){

             $('#id').toggleClass('hidden'); 如果id元素被隱藏 則顯示,如果顯示就隱藏

        });

    });

偽類選擇器

    hover:滑鼠指標停留在某個標籤上,標籤樣式改變

    $(document).ready(function(){

        $('#id h2').hover(function(){},function(){}); //hover方法有兩個回撥函式,第一個是進入的時候,第二個是出去的時候

    });

點選事件

    $('#id').click(function(event){});

    event.target == this  確保事件執行在正確的標籤上

    移除點選事件: $('#id').off('click');//會講id和子標籤的都清理掉click事件

    新增名稱空間  在click後面加上.space就可以

    只觸發一次的事件把.on切換成.one就可以

終止事件

    event.stopPropagation();終止事件的傳播

模擬使用者操作

    $('#switcher').trigger('click');模擬執行switch的click事件

響應鍵盤事件

    var key = String.fromCharCode(event.which);