前端基础之jQuery重要补充

合集 - 前端炒米粉(25)

23.前端基础之jQuery重要补充2024-03-23

24.前端框架之Bootstrap2024-03-24 25.前端补充：url编码2024-04-09

一、阻止事件默认行为和阻止事件冒泡

1、阻止事件默认行为

阻止事件的默认行为是指阻止浏览器在特定事件发生时执行的默认操作。这对于定制用户交互体验非常有用，可以通过阻止默认行为来实现自定义行为或效果。

 <script>
    $('#d2').click(function (){
        $('#d1').text('你看不见我')
        // 阻止标签后续事件的执行  方式一
        return false
        // 阻止标签后续事件的执行  方式二
        e.preventDefault()
    })
</script>

以下是一些常见事件的默认行为以及如何阻止它们的示例：

（1）点击链接的默认行为：

当用户点击一个链接时，浏览器会默认跳转到链接指定的页面。
使用 event.preventDefault() 可以阻止这种默认行为，从而在点击链接时执行你自定义的操作，而不跳转到新页面。

 $('a').on('click', function(event) {
    event.preventDefault(); // 阻止链接的默认跳转行为
    // 执行你想要的操作
});

（2）表单提交的默认行为：

当用户提交表单时，浏览器会默认刷新页面或跳转到指定的 URL。
使用 event.preventDefault() 可以阻止表单的默认提交行为，从而在提交表单时执行你自定义的操作，而不刷新页面或跳转到新页面。

 $('form').on('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    // 执行你想要的操作
});

（3）键盘事件的默认行为：

比如在输入框按下回车键会触发表单提交。
使用 event.preventDefault() 可以阻止键盘事件的默认行为，从而在按下回车键时执行你自定义的操作，而不触发表单提交。

 $('input').on('keydown', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault(); // 阻止回车键的默认提交行为
        // 执行你想要的操作
    }
});

通过阻止事件的默认行为，你可以完全控制事件的处理方式，实现更加灵活和个性化的交互效果。

2、阻止事件冒泡

事件冒泡是指当一个事件发生在嵌套的元素上时，它会沿着DOM树从最内层的元素向外层元素逐级传播的过程。这意味着如果你在一个子元素上触发了一个事件，它会一直向上冒泡，直到达到文档根节点或者直到有一个处理程序调用了 event.stopPropagation() 方法来停止冒泡。

阻止事件冒泡的常见方法是使用 event.stopPropagation() 方法。当你调用这个方法时，它会阻止事件继续向父元素传播，即停止冒泡。这样可以防止事件影响到其他父元素上绑定的相同类型事件处理程序。

简单示例：

 <script>
    $('#d1').click(function (){
        alert('div')
    })
    $('#d2').click(function (){
        alert('p')
    })
    $('#d3').click(function (){
        alert('span')
        // 阻止事件冒泡的方式1
        return false
        // 阻止事件冒泡的方式2
        // e.stopPropagation()
    })
</script>

下面是一个比较完善的示例，演示如何阻止事件冒泡：

 <!DOCTYPE html>
<html>
<head>
    <title>Event Bubbling Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.inner').on('click', function(event) {
                event.stopPropagation(); // 阻止事件冒泡
                console.log('Inner div clicked');
            });
 
            $('.outer').on('click', function() {
                console.log('Outer div clicked');
            });
        });
    </script>
</head>
<body>
    <div class="outer" style="padding: 20px; background-color: lightblue;">
        Outer Div
        <div class="inner" style="padding: 20px; background-color: lightcoral;">
            Inner Div
        </div>
    </div>
</body>
</html>

在这个例子中，当你点击内部的 div 元素时，会触发内部 div 的点击事件处理程序，并且会阻止事件继续向外传播到外部 div。因此，只会看到 "Inner div clicked" 这条日志，而不会看到 "Outer div clicked"。这就是事件冒泡被阻止的效果。

通过阻止事件冒泡，你可以更精确地控制事件的传播，避免意外触发其他元素上的事件处理程序，从而实现更加可靠和灵活的交互效果。

3、两者的区别

在 jQuery 中，阻止事件的执行和阻止事件冒泡是两个不同的概念，它们的作用也不同：

阻止事件的执行（event.preventDefault()）：
- 使用 event.preventDefault() 方法可以阻止事件的默认行为。比如，当点击一个链接时，浏览器会默认跳转到链接指定的页面，使用 event.preventDefault() 可以阻止这种默认行为，从而在点击链接时执行你自定义的操作，而不跳转到新页面。
- 这个方法主要用于阻止浏览器对事件的默认处理方式。
阻止事件冒泡（event.stopPropagation()）：
- 使用 event.stopPropagation() 方法可以阻止事件在DOM树中的传播，即阻止事件冒泡到父元素或祖先元素。
- 这个方法主要用于阻止事件继续向上冒泡，从而防止其他元素的事件处理程序被触发。

示例：

 $('#myElement').on('click', function(event) {
    event.preventDefault(); // 阻止默认行为
    event.stopPropagation(); // 阻止事件冒泡
    // 执行你想要的操作
});

在上面的示例中，同时使用了 event.preventDefault() 和 event.stopPropagation()，这样既阻止了事件的默认行为，也阻止了事件冒泡，从而完全控制了事件的处理方式。

二、事件委托

事件委托（Event delegation）是一种常用的JavaScript编程技术，它利用事件冒泡的特性，通过将事件处理程序绑定到一个父元素上来管理子元素的事件。这样做的好处是可以减少事件处理程序的数量，提高性能，并且可以处理动态生成的子元素。

基本思想是将事件处理程序绑定到父元素，然后利用事件冒泡的机制，当子元素上的事件被触发时，事件会冒泡到父元素，父元素上的事件处理程序就会捕获到这个事件，从而实现对子元素事件的处理。

下面是一个简单的示例来说明事件委托的工作原理：

 <!DOCTYPE html>
<html>
<head>
    <title>Event Delegation Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 绑定事件处理程序到父元素
            $('#parent').on('click', 'button', function() {
                alert('Button clicked: ' + $(this).text());
            });
 
            // 动态添加子元素
            $('#parent').append('<button>Button 1</button>');
            $('#parent').append('<button>Button 2</button>');
        });
    </script>
</head>
<body>
    <div id="parent">
        <!-- 这里没有任何按钮 -->
    </div>
</body>
</html>

在这个例子中，我们将事件处理程序绑定到 #parent 元素上，但是事件处理程序是针对子元素 button 的点击事件。当点击 #parent 元素下的任何 button 元素时，事件会冒泡到 #parent 元素，然后由 #parent 元素上的事件处理程序来处理这个事件。

通过事件委托，我们可以避免为每个子元素都绑定事件处理程序，而是在父元素上统一管理。这样不仅可以减少代码量，还可以提高性能，特别是当有大量子元素时，事件委托可以显著减少内存消耗和提高页面性能。

总的来说，事件委托是一种优化和简化事件处理的方法，特别适用于动态生成的元素或者大量相似元素的情况。

三、页面加载

1、原生js代码页面加载

window.onload 是原生 JavaScript 中用于在页面加载完成后执行指定函数的方法。类似于 jQuery 中的 $(window).load()，window.onload 会等待页面上所有资源（包括图片）加载完成后执行指定的函数。

下面是代码的示例：

 window.onload = function(){
    // 在页面上所有资源加载完成后执行的代码
    // 可以在这里进行页面元素的操作，绑定事件等
};

在这个函数内部，你可以执行任何 JavaScript 代码，包括操作页面元素、绑定事件等。这种方式确保你的代码在页面加载完成后执行，以确保操作的元素已经被完全加载到 DOM 中。

需要注意的是，如果你同时使用了 jQuery 和原生 JavaScript 来处理页面加载事件，最好保持一致性，不要混合使用，以避免可能出现的冲突或不一致性。

2、jQuery页面加载

在 jQuery 中，你可能想要做一些操作来处理页面加载的事件或者在页面加载完成后执行一些操作。以下是一些在 jQuery 中处理页面加载的常见方法：

（1）$(document).ready()

$(document).ready() 是 jQuery 提供的一个方法，用于在文档加载完成后执行指定的函数。这个方法确保在 DOM 完全加载后执行代码，而无需等待其他资源的加载完成。

 $(document).ready(function(){
    // 在文档加载完成后执行的代码
});

（2）$(window).load()

$(window).load() 用于在页面上所有资源（包括图片）加载完成后执行指定的函数。这与 $(document).ready() 不同，后者只等待 DOM 加载完成。

 $(window).load(function(){
    // 在页面上所有资源加载完成后执行的代码
});

（3）简化的 $(function() {})

这是 $(document).ready() 方法的简化写法，等同于 $(document).ready(function() {})。

 $(function(){
    // 在文档加载完成后执行的代码
});

（4）最暴力的方法

直接写在 body 标签内部！

3、示例：

 $(window).load(function(){
    // 在页面上所有资源加载完成后执行的代码
});
 
$(document).ready(function(){
    // 在文档加载完成后执行的代码
    // 可以在这里进行页面元素的操作，绑定事件等
});
 
$(function(){
    // 在文档加载完成后执行的代码
});

通过以上方法，你可以在页面加载完成后执行相应的操作，确保你的 JavaScript 代码在正确的时机执行，提高用户体验和页面交互的效果。

四、动画效果

jQuery 是一个流行的 JavaScript 库，它提供了许多简单易用的方法来操作 HTML 元素、处理事件和执行动画效果。以下是一些常用的 jQuery 动画效果：

1、.show() 和 .hide()

这两个方法可以用来显示和隐藏元素，可以添加参数来控制动画的速度和效果。

 $('.element').show(1000); // 显示元素，动画持续 1 秒
$('.element').hide(500); // 隐藏元素，动画持续 0.5 秒

2、.fadeIn() 、 .fadeOut() 和 fadeTo ()

这三个方法可以实现元素的淡入和淡出效果。

 $('.element').fadeIn(1000); // 淡入元素，动画持续 1 秒
$('.element').fadeOut(500); // 淡出元素，动画持续 0.5 秒
$('.element').fadeTo(5000,0.5); // 元素将在 5 秒的时间内淡入到指定的不透明度 0.5

3、.slideDown()、.slideUp() 和 .slideToggle()

这些方法可以实现元素的下拉、上升和切换效果。

 $('.element').slideDown(1000); // 下拉显示元素，动画持续 1 秒
$('.element').slideUp(500); // 上升隐藏元素，动画持续 0.5 秒
$('.element').slideToggle(800); // 切换元素的显示状态，动画持续 0.8 秒

五、补充

（1）each方法

该方法接受一个回调函数作为参数，在每个元素上执行此回调函数。

回调函数提供两个参数：

第一个参数是当前处理的元素

第二个参数是该元素在集合中的索引位置。

通过在回调函数中对每个元素进行操作，可以实现批量处理元素的目的

一个参数

 $("div")
// S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$("div").each(function (params) {console.log(params)  
})
/* VM271:1 0
VM271:1 1
VM271:1 2
VM271:1 3
VM271:1 4
VM271:1 5
VM271:1 6
VM271:1 7
VM271:1 8
VM271:1 9
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)] */

两个参数

 $("div").each(function (params,obg) {console.log(params,obg)    
})
/* VM302:1 0 <div>1</div>
VM302:1 1 <div>2</div>
VM302:1 2 <div>3</div>
VM302:1 3 <div>4</div>
VM302:1 4 <div>5</div>
VM302:1 5 <div>6</div>
VM302:1 6 <div>7</div>
VM302:1 7 <div>8</div>
VM302:1 8 <div>9</div>
VM302:1 9 <div>10</div>
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)] */

数组作为参数

 $.each([11,22,33,44,55,66],function (params,obg) {console.log(params,obg)})
 
/* VM368:1 0 11
VM368:1 1 22
VM368:1 2 33
VM368:1 3 44
VM368:1 4 55
VM368:1 5 66
(6) [11, 22, 33, 44, 55, 66] */

each 可以帮我们省略 for 循环

（2）data方法

能让我们的标签帮我们存储数据，但是标签看不见

给标签 div 添加了一个属性是 info 值是信息

 $('div').data('info','这是一条咪咪信息!')
 
// S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]

在标签本身的代码中看不到，但是可以通过以下方法进行取值

 $('div').first().data()
// {info: '这是一条咪咪信息!'}
$('div').last().data()
// {info: '这是一条咪咪信息!'}

删除某个标签 data 中对应的数据

 $('div').first().removeData('info')
// S.fn.init [div, prevObject: S.fn.init(10)]
$('div').first().data()
// {}

posted @ 2024-03-23 17:32 Xiao0101 阅读(13) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端基础之jQuery事件

· 前端基础之jQuery进阶

· 前端三件套系例之JQuery——JQuery动画效果、JQuery插件、

· jQuery基础

· 前端jquery

公告

一个不像技术博客的博客

-------------------------------

时钟canvas

昵称： Xiao0101
园龄： 1年3个月
粉丝： 6
关注： 9

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. 爬虫之requests模块请求方式(1)

xiao