jQuery绑定事件on()与弹窗的简要概述

下面是详细的攻略：

1. jQuery 绑定事件 on() 方法

jQuery 的 on() 方法是用来设置元素事件的事件处理程序的方法，可以代替之前的 bind() 和 delegate() 方法。

使用 on() 方法可以让代码更加简洁，同时让元素事件绑定更加灵活。常用的语法如下：

$(selector).on(event, childSelector, data, function)

参数说明：

• selector：必需，需要绑定事件的元素选择器，可以是标签名、类、id、属性等。
• event：必需，需要绑定的事件类型，如 click、mouseover、keydown 等。
• childSelector：可选，用于 selector 下面的后代元素。
• data：可选，传递到事件处理程序的额外数据，可以是任意数据类型。
• function：必需，事件处理函数，可以是普通函数、匿名函数或者事件对象。

示例一：绑定按钮点击事件，弹出提示框

<button id="btn">点击提示</button>

$('#btn').on('click', function() {
  alert('Hello World!');
});

在这个例子中，我们通过 jQuery 的 on() 方法绑定了按钮的点击事件，并且当用户点击按钮时，将会弹出提示框，提示框内容为 "Hello World!"。

示例二：绑定动态加载元素的事件，弹出提示框

<div id="container">
  <button class="btn">点击提示1</button>
</div>

$('#container').on('click', '.btn', function() {
  alert('Hello World!');
});

在这个例子中，我们为容器元素绑定了一个点击事件，在这个事件中，我们使用了 on() 方法并传递了一个选择器 '.btn'，这个选择器会匹配到已经加载的元素以及在未来动态添加的元素，并且当匹配的元素被点击时，就会弹出提示框。

2. 弹窗的简要概述

弹窗，也称为对话框、模态框或者提示框，是网站开发中常用的交互方式之一。使用弹窗可以展示更详细的信息、实现更复杂的操作，同时也可以避免页面跳转或者刷新，提高用户体验度。

弹窗通常有两种类型：

• 模态弹窗：打开弹窗后，要求用户必须先进行操作才能关闭弹窗，如输入或选择某些信息。
• 非模态弹窗：打开弹窗后，用户可以继续在页面上进行其他操作，而不需要先进行操作才能关闭弹窗。

在实现弹窗的过程中，需要使用前端技术（如 HTML、CSS 和 JavaScript），同时还可以使用一些成熟的弹窗插件（如 Bootstrap、jQueryUI 等）来简化操作。

示例三：使用jQueryUI插件实现模态弹窗

<button id="open-dialog">打开弹窗</button>
<div id="dialog" title="提示" style="display:none;">欢迎来到弹窗世界！</div>

$('#open-dialog').on('click', function () {
  $('#dialog').dialog({
    modal: true,
    buttons: {
      "OK": function () {
        $(this).dialog('close');
      }
    }
  });
});

在这个例子中，我们使用了 jQueryUI 插件来创建一个模态对话框。首先，我们为按钮添加了点击事件，当用户点击按钮时，弹出对话框。

对话框的内容是一个 div 元素，我们设置了它的 title 属性为 "提示"，通过 css 设置它的样式为不可见。

在弹出对话框时，我们使用 jQueryUI 的 dialog() 方法，设置了它的参数 modal 为 true，表示这是一个模态对话框，用户必须先进行操作才能关闭。同时，我们还设置了一个按钮 "OK"，当用户点击它时，关闭对话框。

总结

以上就是 "jQuery绑定事件on()与弹窗的简要概述" 的完整攻略。希望对你有所帮助！