2024年最新jQuery入门到精通（五）连载(2)，【严选】

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

点击儿子元素的块盒在弹出son之后又弹出父元素father

在企业开发中，有时我们需要子元素执行某种功能，但不需要父元素执行，这个时候我们就需要用到阻止事件冒泡的产生。

阻止事件冒泡的有两种方式

<script>

    $(function (){

        $('.son').click(function (event){

            alert('son');

        });    

        $('.father').click(function (event){

            alert('father');

            //return false;

            event.preventDefault(); //在function在传递参数并调用preventDefault()

        });

    });

</script>

1.2 默认行为：用户某些动作后，标签自动发生的行为。

$('a').click(function (){

    alert('弹出注册框');

});

<a href="http://www.baidu.com">注册</a>

阻止默认行为的两种方式

$('a').click(function (event){

    alert('弹出注册框');

    //阻止默认行为的两种方式

    // return false;

    event.preventDefault();

});

<a href="http://www.baidu.com">注册</a>

2.事件自动触发

========

<script src="/js/jquery-1.10.1.min.js"></script>

<script>

    $(function (){

        $('.father').click(function (){

            alert('father');

        });

        $('.son').click(function (){

            alert('son');

        });  

        /*

        两种事件触发的方式和区别:

        1.trigger: 如果使用trigger自动触发事件，会触发事件冒泡

        2.triggerHandler：如果使用triggerHandler自动触发事件，不会触发事件冒泡

        */

        $('.father').trigger('click');

        // $('.father').triggerHandler('click');





        $("input[type='submit']").click(function (){

            alert('submit');

        });



        /*

        1.trigger：如果使用trigger自动触发事件，会触发默认行为

        2.triggerHandler：如果使用triggerHandler自动触发事件，不会触发默认行为

        */

        // $("input[type='submit']").trigger('click');

        // $("input[type='submit']").triggerHandler('click');



        $('span').click(function (){

            alert('a')

        });

        // $('span').trigger('click');



    });

    });

</script>

<div class="father" style="width: 200px;height: 200px;background: red">

    <div class="son" style="width: 100px;height: 100px;background: blue"></div>

</div>

<a href="http://www.baidu.com"><span>注册</span></a>

3.自定义事件

---

想要自定义事件，必须满足两个条件

1.事件必须是通过on绑定的

2.事件必须通过trigger来触发

$('.son').on('myclick',function (){

    alert('son');

});

$('.son').trigger('myclick');

4.事件命名空间

---

1.利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

r。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-F4UO0j2o-1715064223029)]

[外链图片转存中…(img-DNf0HBjv-1715064223030)]

[外链图片转存中…(img-N6pwg4Gd-1715064223031)]

[外链图片转存中…(img-UYXjsChk-1715064223032)]