jquery事件触发

2021-04-04 10:33:16 阅读：179 来源： 互联网

标签：jquery 触发 function color 事件 background click css

一事件绑定的两种方式

$('xx').click(function(){
    })
$('xx').on('click',function(){
})

二常用事件

1.click() 点击事件

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

2.focus() 聚焦事件

$('#username').focus(function () {
        $('.d1').css({'background-color':'green'});
    });

3.blur() 失去焦点事件

$('#username').blur(function () {
        $('.d1').css({'background-color':'pink'});
    });

4.change() 区域内容发生改变

 $('select').change(function () {
        $('.d1').toggleClass('cc');
    });

5.hover() 是对mouseenter()事件和mouseout()事件的封装

//鼠标悬浮发生的事件,有两步是对mouseenter和mouseout的封装 里边有两个匿名函数
    // $('.d1').hover(function () {
    //     $(this).css({'background-color':'blue'});
    // },
    // function(){
    //     $(this).css({'background-color':'yellow'});
    //
    // })

6.mouseover() 鼠标悬浮等同于hover事件

//mouseover 和 mouseenter事件的区别是 mouseover事件 如果标签有子标签,那么移入到
子标签时会连续触发, mouseenter事件不管有没有子标签只触发一次,表示鼠标进入这个对象
//鼠标进入
// $('.d2').mouseenter(function () {
    //     console.log('亚太应绿了')
    // });

    //鼠标悬浮
    $('.d2').mouseover(function () {
        console.log('绿了');

7. window之keydown()事件

// function函数的 e/event参数 表示的是事件 keydown/keyup keycode表示的是属性
按键值
$(window).keydown(function (e) {
        // console.log(e.keyCode);
        if (e.keyCode === 37){
            $('.d1').css({'background-color':'orange'});
        } else if (e.keyCode === 39){
            $('.d1').css({'background-color':'green'});
        }else {
            $('.d1').css({'background-color':'black'});

        }
    });

8.window之keyup()事件

 $(window).keyup(function (e) {
        console.log(e.keyCode);
    })

9.input事件必须用on的绑定事件

针对百度搜索引擎
//input事件监听输入内容 必须用on触发事件 propertychange 用来兼容ie浏览器的
 $('#username').on('input propertychange',function(){
        console.log($(this).val());
    })

三事件冒泡

//事件冒泡是指多个事件会一直往父级标签触发
 $('#d1').click(function () {
        alert('父级标签')
    });
    // $('#d2').click(function () {
    //     alert('子级标签');
    //     //消除事件冒泡方式一
    //     return false;
    //
    // });
    $('#d2').click(function (e) {
        alert('自己标签');
        e.stopPropagation();
    })

四事件委托必须用on的绑定方式

//事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件,将未来添加进来的某些子标签
自动绑定上事件
//将点击事件委托给父级了,但是$(this)还是当前的点击对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>
<body>
<div class="c1">
    <input type="button" value="解压小按钮">
    <button class="c2">点击就送</button>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
    $(':button').click(
       function () {
           alert('周雅婷跟我笑,哈哈哈哈哈');
           var a = $(this).clone(true);
           $('div').append(a);
                      }
    );
    $('.c1').on('click','.c2',function () {
        alert('臭屁在');
        var a = document.createElement('button');
        $(a).text('点击就送');
        console.log($(this)) //还是我们点击的这个对象
        $(a).addClass('c2');
        $('div').append(a);
    })
</script>
</body>
</html>

五页面载入

方式一 DOM对象window操作

script 统一放在最下面
window.onload =  function(){}
// window.onload = function () {
    //     $('.c1').click(function(){
    //         $(this).css({'background-color':'blue'});
    //     })
    // }

方式二 jquery对象操作

1.$(document).ready(function(){})
2. $(function(){})
$(function () {
        $('.c1').click(function () {
            $(this).css({'background-color':'black'});
        })
    })

区别

1.window.onload()函数有覆盖现象,必须等待图片资源加载完成后才能够调用
2.jquery的这个入口函数没有函数覆盖现象,文档加载完就可以使用,建议使用次函数

标签：jquery,触发,function,color,事件,background,click,css
来源： https://www.cnblogs.com/learn-record/p/14615685.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9