下面是jQuery如何使用自动触发事件trigger的完整攻略。

什么是trigger事件

在jQuery中，trigger()是一个触发一个特定事件的方法，可以绑定到指定元素上。当触发trigger时，程序会立即执行添加到事件队列中的所有函数。

如何使用trigger事件

一、基本语法

$(selector).trigger(event, [param1, param2 ...]);

• selector：是指一个元素的选择器；
• event：是指要触发的事件名称；
• param1, param2 ...：可选参数，传递到处理程序的额外参数。

二、示例说明

1. 点击按钮后，自动触发弹出框的关闭按钮

HTML代码

<p class="modal">  <p class="modal-dialog">    <p class="modal-header">      <h4 class="modal-title">提示</h4>      <a href="#" class="close">&times;</a>    </p>    <p class="modal-body">      <p>这是一个模态框</p>    </p>    <p class="modal-footer">      <button type="button" class="btn btn-secondary close-btn">关闭</button>    </p>  </p></p><button type="button" class="btn btn-primary show-btn">弹出模态框</button>

JS代码

$(document).ready(function() {  // 点击按钮弹出模态框  $(".show-btn").click(function() {    $(".modal").show();  });  // 点击关闭按钮隐藏模态框  $(".close-btn").click(function() {    $(".modal").hide();  });  // 点击模态框外隐藏模态框  $(".modal").click(function() {    $(".modal").hide();  });  // 防止模态框外点击事件的冒泡  $(".modal-dialog").click(function(e) {    e.stopPropagation();    });  // 点击按钮触发关闭按钮的点击事件，实现自动关闭  $(".show-btn").click(function() {    $(".close-btn").trigger("click");  });});

在这个示例中，我们首先为一个按钮添加了一个点击事件，该事件能够弹出模态框。接着，我们又添加了另一个点击事件，该事件会关闭模态框。

最后，我们通过另一个按钮的点击事件来触发“关闭”按钮的点击事件，从而实现了自动关闭模态框。

2. **input输入框的内容，触发更新面板的操作

HTML代码

<form>  <p class="form-group">    <label for="inputName">姓名</label>    <input type="text" class="form-control" id="inputName" placeholder="请输入姓名">  </p>  <p class="form-group">    <label for="inputAge">年龄</label>    <input type="text" class="form-control" id="inputAge" placeholder="请输入年龄">  </p>  <p class="form-group">    <label for="inputAddress">地址</label>    <input type="text" class="form-control" id="inputAddress" placeholder="请输入地址">  </p></form><p class="panel panel-default">  <p class="panel-heading">用户信息</p>  <p class="panel-body">    <p>姓名：</p>    <p>年龄：</p>    <p>地址：</p>  </p></p>

JS代码

$(document).ready(function() {  // **input输入框的输入内容  $("input").on("input", function() {    // 获取输入框的值    var name = $("#inputName").val();    var age = $("#inputAge").val();    var address = $("#inputAddress").val();    // 更新面板内容    $(".panel-body p:eq(0)").text("姓名：" + name);    $(".panel-body p:eq(1)").text("年龄：" + age);    $(".panel-body p:eq(2)").text("地址：" + address);  });  // 自动触发更新面板操作  $("input:first").trigger("input");});

在这个示例中，我们首先为三个输入框添加了一个输入事件，当输入框的值发生改变时，会立即更新面板内容。

接着，我们使用了trigger()方法，来自动触发更新面板操作。在这里，我们使用了":first"选择器，来选中页面上第一个input输入框。当页面加载完毕时，就触发了第一个输入框的输入事件，从而自动更新了面板内容。