为网页的元素添加事件有两种方法，需要注意的是，这两种方法添加的响应函数，都会作用到jQuery数组的每一个对象中去，如果jQuery对象不是唯一的，有时可能会出现意外的效果。

定义元素监听事件

语法：$(选择器).监听事件名称(处理函数);
事件名称：就是js中事件去掉on的部分，如：单击事件onclick -> jQuery中的事件click，都是小写的。
事件的处理函数：就是一个function，当事件发生时，执行这个函数。
例如：//给btn按钮绑定单击事件

  1. $("#btn").click(function(){
  2.     alert("hello world!");
  3. })

on()绑定事件

on()方法在被选元素上添加事件处理程序，该方法给API带来很多便利，推荐使用该方法。

语法：$(选择器).on(事件,function(){ 处理函数 })

  • 这里绑定的事件可以一个也可以多个，多个之间空格分开。
  • function是事件触发时执行的函数，可选。

举个例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
  9.     <style>
  10.         div{
  11.             width: 400px;
  12.             height: 50px;
  13.             background: brown;
  14.         }
  15.     </style>
  16.     <script type="text/javascript">
  17.         $(function(){
  18.               //使用on()为第一个按钮添加响应函数
  19.             $("#one").on("click",function(){
  20.                   //添加新按钮
  21.                 $("div").append("<button id='two'>我是新的button朋友</button>");
  22.                   //为新按钮添加响应函数
  23.                 $("#two").on("click",function(){
  24.                     alert("初次见面，多多关照！");
  25.                 });
  26.             });
  27.         });
  29.     </script>
  30. </head>
  31. <body>
  32.     <div>
  33.         我是一个div，我想要一个button陪我。
  34.     </div>
  35.     <button id="one">创建一个button给div，并绑定单击相应函数</button>
  36. </body>
  37. </html>

Ajax内容参考文档：jQuery中的Ajax请求，这里不做演示