jQuery | on() 示例

在 jQuery 中，on() 方法是用于在一个或多个事件上绑定事件处理程序的函数。它可以像下面这样使用：

$(selector).on(event, childSelector, data, handler);

• event：必需，规定要绑定的一个或多个事件。
• childSelector：可选，规定只能添加到指定的子元素上的事件处理程序。
• data：可选，规定传递到事件处理程序的额外数据。
• handler：必需，规定要绑定到被选元素的事件处理函数。

下面是一些 on() 方法的示例：

示例 1

HTML 代码：

<button>点击我</button>

jQuery 代码：

$("button").on("click", function(){
  alert("Hello World!");
});

这个示例中，当用户点击按钮时，弹出一个警告框。

示例 2

HTML 代码：

<button>点击我</button>

jQuery 代码：

$("button").on({
  mouseenter: function(){
    $(this).css("background-color", "yellow");
  },
  mouseleave: function(){
    $(this).css("background-color", "gray");
  },
  click: function(){
    $(this).css("background-color", "green");
  }
});

这个示例中，当鼠标进入按钮时，背景色变成黄色；当鼠标离开按钮时，背景色变成灰色；当用户点击按钮时，背景色变成绿色。

示例 3

HTML 代码：

<p>点击下面任意一段文字！</p>
<p>这是段落 1。</p>
<p>这是段落 2。</p>
<p>这是段落 3。</p>

jQuery 代码：

$("p").on("click", function(){
  $(this).hide();
});

这个示例中，当用户点击任意一个段落时，此段落被隐藏起来。

示例 4

HTML 代码：

<ul id="myList">
  <li>点这里</li>
  <li>点这里</li>
  <li>点这里</li>
</ul>

jQuery 代码：

$("#myList").on("click", "li", function(){
  $(this).css("color", "red");
});

这个示例中，当用户点击列表中的任意一个项目时，此项目的字体颜色变成红色。

以上就是 on() 方法的一些常见用法。需要注意的是，on() 方法也可以用于动态绑定事件处理程序。