jQuery事件

時間 2019-12-09

標籤 jquery 事件欄目 JQuery 简体版

原文原文鏈接

事件

事件綁定方式

<script src="jquery.js"></script>
<script>
    //方式1
    // $('#d1').click(function () {
    //     $(this).css({'background-color':'green'});
    // });
    //方式2
    $('#d1').on('click',function () {
        $(this).css({'background-color':'green'});
    })

</script>

經常使用事件

click  左鍵點擊事件
    //獲取光標觸發的事件
    $('[type="text"]').focus(function () {
        $('.c1').css({'background-color':'black'});
    });
    //失去光標(焦點)觸發的事件
    $('[type="text"]').blur(function () {
        $('.c1').css({'background-color':'purple'});
    });

    //域內容發生改變時觸發的事件
    $('select').change(function () {
        $('.c1').toggleClass('cc');
    });

    //鼠標懸浮觸發的事件
    $('.c1').hover(
        第一步:鼠標放上去
        function () {
            $(this).css({'background-color':'blue'});
        },
        第二步,鼠標移走
        function () {
            $(this).css({'background-color':'yellow'});
        }
    )

    // 鼠標懸浮  等同於hover事件
    // 鼠標進入
    $('.c1').mouseenter(function () {
        $(this).css({'background-color':'blue'});
    });
    // 鼠標移出
    $('.c1').mouseout(function () {
        $(this).css({'background-color':'yellow'});
    });
    
    $('.c2').mouseenter(function () {
        console.log('得港綠了');
    });
    // 鼠標懸浮事件
    $('.c2').mouseover(function () {
        console.log('得港綠了');
    });
    // mouseover 和 mouseenter的區別是：mouseover事件是若是該標籤有子標籤，那麼移動到該標籤或者移動到子標籤時會連續觸發，mmouseenter事件無論有沒有子標籤都只觸發一次，表示鼠標進入這個對象


//鍵盤按下觸發的事件  e\event事件對象
    $(window).keydown(function (e) {
        // console.log(e.keyCode); //每一個鍵都有一個keyCode值,經過不一樣的值來觸發不一樣的事件
        if (e.keyCode === 37){
            $('.c1').css({'background-color':'red'});
        }else if(e.keyCode === 39){
            $('.c1').css({'background-color':'green'});
        }
        else {
            $('.c1').css({'background-color':'black'});
        }
    })
    // 鍵盤擡起觸發的事件
    $(window).keyup(function (e) {
        console.log(e.keyCode);
    })

    
    input事件:
        22期百度:<input type="text" id="search">
        <script src="jquery.js"></script>
        <script>
            $('#search').on('input',function () {
                console.log($(this).val());
            })

        </script>

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-color: red;
            height: 200px;
        }
        #d2{
            background-color: green;
            height: 100px;
            width: 100px;
        }

    </style>

</head>
<body>

<div id="d1">
    <div id="d2"></div>

</div>


<script src="jquery.js"></script>
<script>
    $('#d1').click(function () {
        alert('父級標籤');
    });
    $('#d2').click(function () {
        alert('子級標籤');
    });
    

</script>

</body>
</html>

阻止後續事件發生

$('#d1').click(function () {
        alert('父級標籤');
    });
    $('#d2').click(function (e) {
        alert('子級標籤');
        return false;
        // e.stopPropagation();
    });

事件委託

//事件委託是經過事件冒泡的原理，利用父標籤去捕獲子標籤的事件，將將來添加進來的某些子標籤自動綁定上事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="d1">
    <button class="c1">愛的魔力轉圈圈</button>

</div>

<script src="jquery.js"></script>
<script>
    $('.c1').on('click',function () {
        alert('得港被雪飛調教了,大壯很難受!');
        var btn = document.createElement('button');
        $(btn).text('愛的魔力轉圈圈');
        $(btn).addClass('c1');
        console.log(btn);
        //添加到div標籤裏面的後面
        $('#d1').append(btn);
       });

    #將'button' 選擇器選中的標籤的點擊事件委託給了$('#d1');
    $('#d1').on('click','button',function () {
        alert('得港被雪飛調教了,大壯很難受!');
        var btn = document.createElement('button');
        $(btn).text('愛的魔力轉圈圈');
        $(btn).addClass('c1');
        console.log(btn);
        console.log($(this)) //仍是咱們點擊的那個button按鈕
        //添加到div標籤裏面的後面
        $('#d1').append(btn);

    });


</script>
</body>
</html>

頁面載入和window.onload

1. jquery文件要在使用jquery的代碼以前引入

2. js代碼最好都放到body標籤下面或者裏面的最下面來寫

3.window.onload
    window.onload = function () {
        $('.c1').click(function () {
            $(this).css({'background-color':'green'});
        })
    }
4.頁面載入,$(function (){alert('xx');}) -- $(document).ready(function(){});
    頁面載入與window.onload的區別
　　　　1.window.onload()函數有覆蓋現象，必須等待着圖片資源加載完成以後才能調用
　　　　2.jQuery的這個入口函數沒有函數覆蓋現象，文檔加載完成以後就能夠調用（建議使用此函數）
　　　　
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        // 等待整個頁面中的內容所有加載完成以後,觸發window.onload對應的函數裏面的內容
        // window.onload 有覆蓋現象,會被後面的window.onload給從新賦值
        window.onload = function () {
            $('.c1').click(function () {
                $(this).css({'background-color':'green'});
            })
        }

        
        $(function () {
            $('.c1').click(function () {
                $(this).css({'background-color':'green'});
            })
        });

    </script>
    <script src="xx.js"></script>


    <style>
        .c1{
            background-color: red;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>

<div class="c1"></div>

<img src="" alt="">


</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。