JQuery中的OnClick函数用例子解释

jQuery 是 JavaScript 中快速、小型且功能丰富的库之一。 jQuery 用于制作 HTML 文档、事件处理、遍历和操作等。

每当单击 HTML 元素时，都会发生 jQuery click 事件。 要触发jQuery 中的 onclick 函数，使用了click() 方法。 例如，单击文档上的段落时，单击事件将由 $(“p”).click() 方法触发。 每当发生单击事件时，用户可以将函数附加到单击方法以运行该函数。 每当触发 click() 事件时，就会执行一段代码。

通过 HTMLElement.click() 方法模拟鼠标点击。

Click() 函数是 jQuery 中的一个内置函数，用于启动单击事件。 每当单击相关元素时，click() 方法都会触发一个事件。 然后，该事件会触发文档树（或事件链）中更高元素的单击事件。

顾名思义，它只是用户在元素上按下和释放鼠标按钮。

一个或多个事件处理程序通过 on() 方法附加到所选元素。 单击元素时，会发生 click() 事件。 一旦发生 click() 事件，就会执行 click() 方法。 一个函数附加到 click() 方法并被执行。 click() 方法与 jQuery 的其他事件一起使用。

因此 .click() 将事件处理程序绑定到 JavaScript 事件“click”，或者在元素上触发事件。 JavaScript onclick方法的变体是：

1. .click（处理程序）。
2. .click（[事件数据]，处理程序）。
3. 。点击（）。

第一个和第二个变体是 .on( “click”, handler ) 的缩写形式和最后一个变体中 .trigger( “click” ) 的快捷方式。

每当鼠标指针悬停在元素上并且按下并释放按钮时，就会将事件 click() 发送到该元素。 该事件可以被 HTML 的任何元素接收。

如果通过以下代码点击其他元素，也可以触发 Click() 事件。

使用此代码，消息将由元素发出警报

通过以下事件，只触发了一个click()事件。

• 当鼠标指针位于元素内部并且按下鼠标按钮时。
• 当鼠标指针位于元素内并释放鼠标按钮时。

在采取行动之前，上述事件通常是所需的顺序。 否则，另一个合适的事件是鼠标按下或鼠标抬起事件。

由于 .click() 方法是 .on( “click”, handler ) 的快捷方式，因此可以通过使用 .off( “click” ) 来实现分离。

用法

有两种方法可用于调用 click() 方法：

• 使用给定的函数参数
• 没有给定的论点

jQuery 中的onclick 函数可用于 HTML 元素，如 div、段落、超链接等，以完成所需的任务。 单击是在按下鼠标按钮时发生的鼠标事件。 但是，如果鼠标中的指针位于元素内，则会发生该事件。

句法：

$(选择器).click() ; -> 用于触发选定元素的点击事件。

$(选择器).click(函数); -> 用于将函数附加到单击事件。

• 使用的可选参数是“函数”，用于在点击事件发生时执行。
• 返回值：返回与要执行的函数一起指定的选定元素。

方法click()的实现

1. 给定函数参数时

在这种类型的实现中，将一个函数作为输入，并在调用 click() 方法时执行。

• 代码的编写是在脚本标记之间和代码的 HTML正文中。
• 函数的调用是作为 h1 样式属性完成的。
• 参数与函数一起声明，并单独作为函数使用。
• 使用此运算符以 1000 毫秒延迟将方法切换应用于对象。
• 具有给定函数参数的实现方法示例如下所示。

代码的输出将是“单击我将切换文本！”

2.当没有给出论据时

javascript onclick方法触发一个元素已分配给该方法。 因此一个元素可以单独调用另一个元素的onclick事件。 这可以通过以下步骤来实现：

1. 必须首先使用可单击的特定样式的属性声明对象。 必须为该对象声明一个onclick操作。
2. 将在代码主体中创建一个脚本块，其中方法 click() 的属性是针对不同样式的格式p完成的。
3. 已经定义的 h1 onclick 方法将在函数调用中被调用。
4. 然后为属性调用相同的 onclick 方法。
5. 下面显示了一个代码示例，该示例显示了没有给定参数的 click() 方法的实现。

代码的输出是“点击我会发出警报！”。

• • 许多事件可以在 $.on 方法中使用，例如 dblclick、change 等。

3. 呈现 HTML 按钮并在单击按钮时向页面添加文本。 Click() 方法最常附加到按钮上，但是，它可以附加到网页中的任何其他元素。

• • 一个基本按钮以“btn-primary”的 id 呈现，它位于 <div> 内，id 为“main.
  • 通过代码，在点击按钮后，新内容将在<p>标签中以一类“新内容”的形式显示出来。
  • jQuery 包含在 <script> 标记中。

• • 方法 click() 附加到按钮的 id 上，并且将参数作为匿名函数的回调函数。
  • 回调函数返回字符串“Button clicked”。

• • 没有名称的函数被简单地称为匿名函数，并用作回调函数作为方法的参数。 对于构建任何响应式网站和应用程序，匿名函数和回调方法是基石。

• • 代码将从 <div> “main” 中的按钮开始。
  • 单击按钮后，事件处理程序将调用回调函数，因为 click() 方法附加到按钮选择器。
  • 将显示字符串“Button clicked”。
  • 上面的代码只会渲染一次内容，但是每次点击代码时都显示字符串，使用 append() 而不是 HTML()。

• • 它将在 <p> 标记内生成三倍作为新内容的字符串。
  • 每次单击按钮时都会调用回调函数。

结论

文章中已经讨论了jquery 中 onclick 函数的功能及其用法和示例。 只需几行代码，就可以通过JavaScript onclick方法创建网页功能。

如果您想了解更多有关 Web 开发的知识并专攻其他相关领域，那么您可以查看upGrad提供的“计算机科学理学硕士”课程。 该课程专为入门级专业人士（21至45岁的男女）设计，将在一个在线平台上进行，并提供现场课程，以方便长途通勤者。 通过 30 多个项目和作业，学生将获得IIIT-Bangalore 和 LJMU 校友身份的好处。 如有任何帮助，请随时联系我们的团队。