jQuery绑定事件

jQuery绑定事件

常用事件：click:左键点击事件、hover:鼠标悬浮事件、 blur:失去焦点事件、 focus:获取光标事件、 change: 与内容发生改变时事件、keyup:键盘抬起 、mouseout:鼠标离开 、mouseenter:鼠标悬浮、mouseover:鼠标悬浮。

jquery绑定事件的两种方式：

　　方式一：

    $('#d1').click(function () {
        // $(this).css('background-color','red');
        $(this).css({'background-color':'red'});
    });

　　方式二：on可以绑定多个事件，用逗号隔开。

<script>
    $('.c1').on('click',function () {
        $('.c1').css({'background-color':'pink'});
    })
</script>
<script>
    $('.inp').on('focus',function () {
       $('.c1').addClass('c2');
    });
    $('.inp').blur(function () {
        $('.c1').removeClass('c2');
    });

    $('#python').change(function () {
        $('.c1').toggleClass('c2');

    })

    $('.c1').hover(
        function () {
            $(this).css({'background':'pink'});
        },
        function () {
            $(this).css({'background':'yellow'});
        },
    );

    $('.c1').mouseenter(function () {
            $(this).css({'background': 'pink'});
        });

    $('.c1').mouseout(function () {
            $(this).css({'background': 'yellow'});
        });

</script>
代码演示
<script>
    //键盘按下事件  匿名函数参数e|event是当前事件对象
    $(window).keydown(function (event) {
        console.log(event.keyCode);      //每个键都有keyCode值，通过不同的值来触发不同的事件
        if (event.keyCode === 37){
            $('.c1').css({'background-color':'red'});
        }else if (event.keyCode === 39){
            $('.c1').css({'background-color':'green'});
        }else {
            $('.c1').css({'background-color':'black'});
        }

    })

</script>
keyup和keydown事件演示代码

input事件，绑定必须用on

<script>
    $('#search').on('input',function () {
        console.log($(this).val());

    })
</script>

事件冒泡

什么是事件冒泡： 点击子级标签一个click事件的时候，子级标签的click事件执行完成之后父级标签的click事件也会执行，这种就是冒泡事件。

阻止冒泡事件发生：

<script>
    $('#d1').click(function () {
        alert('我说父级标签');
    });
    // $('#d2').click(function () {
    //     alert('我是子级标签');
    //     return false;
    $('#d2').click(function (event) {
        alert('我是子级标签');
        event.stopPropagation();

    });

</script>
代码

 

事件委托

事件委托就是通过事件冒泡的原理，利用父级标签去捕获子级标签的事件，将未来添加进来的子标签自动绑定上事件。

注意：$(this)的这个this还是自己绑定的那个标签！

<script>
    $('#d1').on('click','.c1', function () {
        alert('button按钮的弹出框');
        var btn = document.createElement('button');
        $(btn).text('自己建的button标签');
        $(btn).addClass('c1');
        console.log(btn);
        //添加到div标签的里面的后面
        $('#d1').append(btn);
    });

</script>

 

页面载入

等到整个页面中的内容都全部加载完成之后，触发window.onload对应的函数里面的内容。弊端是window.onload有覆盖现象，会被后面的window.onload给重新赋值。

    <script>
        window.onload = function () {
            $('.c1').click(function () {
                $(this).css({'background-color': 'red'});
            })
        }
    </script>

jquery页面载入的写法：

　　

　　

 

 

 

动画：

each循环：循环标签对象、数组。

<body>
<ul type="none">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
<script src="jquery.js"></script>
<script>
    $('li').each(function (k,v) {
        console.log(k,v.innerText);
    })
</script>

也可以循环普通数组：

 注意：

　　在遍历过程中可以使用return false提前结束each循环，类似于break。

　　而直接使用return；后面什么也不加，不写false，就是跳过本次循环的意思，类似于continue。

 

data（）：

 

 

插件：

 

 

 

posted @ 2020-04-02 01:13  张仁国  阅读(369)  评论(0)  编辑  收藏  举报
目录代码