jquery 选择器用法大全附实例代码

学习jquery必不可少的一项技能就是需要学会使用jquery查找和操作html元素,这就是jquery选择器,小叶总结了下面一篇文章在我们开发中常用的jquery选择器的方法,欢迎收藏。

以下是一些常用的 jQuery 选择器及其实例代码:

  • $(\”element\”): 选择所有指定的元素。
  • $(\”#id\”): 选择具有指定 ID 的元素。
  • $(\”.class\”): 选择具有指定类的所有元素。
  • $(\”[attribute]\”): 选择具有指定属性的所有元素。
  • $(\”[attribute=value]\”): 选择具有指定属性值的元素。
  • $(selector1, selector2): 在第二个选择器中查找第一个选择器。
  • $(ancestor descendant): 选择祖先元素下的所有后代元素。
  • $(prev + next): 选择紧接在 prev 元素后的 next 元素。
  • $(prev ~ siblings): 选择 prev 元素之后的所有 siblings 元素。
  • $(parent > child): 选择父元素下的所有子元素。
  • $(\”:input\”): 选择所有表单输入元素(如 input、textarea、select)。
  • $(\”:text\”): 选择所有单行文本框。
  • $(\”:password\”): 选择所有密码框。
  • $(\”:radio\”): 选择所有单选按钮。
  • $(\”:checkbox\”): 选择所有复选框。
  • $(\”:submit\”): 选择所有提交按钮。
  • $(\”:reset\”): 选择所有重置按钮。
  • $(\”:contains(text)\”): 选择包含指定文本的元素。
  • $(\”:empty\”): 选择不包含子元素或文本的元素。
  • $(\”:has(selector)\”): 选择包含特定后代元素的元素。
  • $(\”:parent\”): 选择至少有一个子元素的元素。

如果你觉得这篇文章对你有用,欢迎点赞收藏加关注哦。

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)。感兴趣的读者可以查看官方帮助文档。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。