jQuery常见事件的监听方式
在 Web 页面经常会有各种事件发生，事件发生后需要进行一些特定处理，即执行特定的函数或者语句。这就需要对事件进行监听，监听事件的常见方式有以下三种，本人将通过实例来具体介绍。
实例1：单击页面 \”Hello\” 按钮，弹出提示框显示 Hello world！
注：在实例1中，事件的监听代码是放在 HTML 标签中，这种方式看起来比较直观，但是这是一种不大提倡的事件监听方式。首先，将视图代码（HTML）与交互代码（Javascript）相结合，意味着每当需要更新功能时，都必须编辑 HTML，这将给代码后期的维护带来很烦。其次，它不具备可扩展性。如果我们要将这个单击功能附加到许多按钮上，那么不仅要用一堆重复的代码来增加页面量，而且还会破坏可维护性。
实例2：单击页面\”Hello\”按钮，弹出提示框显示Hello world！
使用jQuery监听事件有很多种方法，如实例3所示。
实例3：单击页面 \”Hello\” 按钮，弹出提示框显示 Hello world！
注：下面具体分析实例3中用到的 jQuery 事件监听方法。（1）第一种事件监听方法click()，是一种比较常见的、便捷的事件监听方法。（2）第二种事件监听方法bind()，已被jQuery 3.0弃用。自jQuery 1.7以来被 on() 方法（即第三种事件监听方法）所取代，虽然在这里也能使用且不报错，而且此方法之前比较常见，但是不鼓励使用它。（3）第三种事件监听方法on()，从jQuery 1.7开始，所有的事件绑定方法最后都是调用on() 方法来实现的，使用on() 方法实现事件监听会更快、更具一致性。（4）第四种和第五种方法，监听的是 body 上所有 button 元素的 click 事件。DOM 树里更高层的一个元素监听发生在它的 children 元素上的事件，这个过程叫作事件委托（event delegation）。感兴趣的读者可以查看官方帮助文档。
在vue中使用jquery
首先默认你已经有了一个vue程序，如果你想在vue中使用jquery，那么请继续阅读。
当然，加入你没有一个vue程序，这里也给出创建一个vue程序的命令。当然，你肯定装了vue-cli，不然你不会点进这篇博客
项目的目录类似如下：
对了，这个demo里使用了element-ui
安装方式：
配置方式：
可以直接拷走
jquery安装
直接运行下面的命令
jquery引用
在需要使用jquery的组件里，引入jquery后，即可正常使用
举例
运行效果：
如果需要源码，在下面下载
下载地址：https://download.csdn.net/download/iiiliuyang/12127883
如果这篇博客对你有用，点个赞再走呗~
jQuery children() 方法用法详解
jQuery 的 children() 方法用于获取匹配元素集合中每个元素的直接子元素。它返回一个新的 jQuery 对象，包含所有匹配元素的直接子元素。
- selector: 选择器，用于选择目标元素。
- filter (可选): 一个选择器表达式，用于过滤子元素。如果省略，则返回所有直接子元素。
- 直接子元素: children() 方法只返回直接子元素，不会返回嵌套更深层级的子元素。例如，如果你有一个嵌套结构，children() 只会返回第一层的子元素。
- 性能考虑: 在大型文档中使用 children() 方法时，要注意性能问题，因为它会遍历所有匹配元素的直接子元素。
- 兼容性: 确保你的项目已经引入了 jQuery 库，否则 children() 方法无法正常工作。
通过合理使用 children() 方法，你可以方便地操作和筛选 DOM 元素的子元素，从而实现更复杂的页面交互效果。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
