JQuery的选择器总结

选择器是获取元素并进行操作的一种方式,在使用CSS选择器时,开发人员有时候需要考虑浏览器是否支持某些选择器。而在JQuery中,使用选择器则不需要考虑这些问题,与传统的JS获取元素的方式相比,JQuery有着更加完善的机制,即使文档中没有所获取的元素,也不会像JS中的那样报错。

JQuery的选择器主要分为4种,分别是基本选择器,层级选择器,过滤选择器和表单选择器。下面我们对这些选择器一一进行介绍。

一、基本选择器

基本选择器是JQuery中最常用的一些选择器,也是我们开发人员一定要掌握的几个选择器,分别是:

(1)#id 根据给定的id匹配一个元素。

(2).class 根据给定的类名匹配元素。

(3)element 根据给定的元素名匹配元素。

(4)* 匹配所有元素。

(5)selector1,selector2...selectorN 将所有匹配的选择器合并一起匹配操作。

二、层次选择器

层次选择器则是根据DOM元素之间的层级关系获取需要的元素,不需要操作指定的DOM元素,而是根据其所在的位置层级进行获取操作,有效减少了我们元素的命名,让代码更加简洁易读,而层级选择器分别有:

(1)$("A B")

选取A元素里面所有的B(后代)元素。

(2)$("parent>child")

选取parent元素下的child(子)元素。

(3)$("prev+next")

选取紧挨着在prev后面的nex同辈元素。

(4)$("prev~siblings")

选取prev元素之后的所有siblings同辈元素。

注意:在实际开发过程中,我们可以使用next( )方法来代替$("prev+next") 选择器;而nextAll( )方法可以用来替代$("prev~siblings")选择器,但是相比之下方法sinlings()方法则更加方便,无需考虑前后位置关系。

三、过滤选择器

过滤选择器是JQuery中比较复杂的一种方式,它通过特定的过滤规则来筛选出所需的DOM元素,其规则与CSS中的伪类选择器语法相同,而过滤选择器可分为:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤。

(1)$("A B")

选取A元素里面所有的B(后代)元素。

(2)$("parent>child")

选取parent元素下的child(子)元素。

(3)$("prev+next")

选取紧挨着在prev后面的nex同辈元素。

(4)$("prev~siblings")

选取prev元素之后的所有siblings同辈元素。

注意:在实际开发过程中,我们可以使用next( )方法来代替$("prev+next") 选择器;而nextAll( )方法可以用来替代$("prev~siblings")选择器,但是相比之下方法sinlings()方法则更加方便,无需考虑前后位置关系。

jquery 获取id最大的元素_超全整理!JQuery中的选择器集合相关推荐

  1. jQuery获取id相同的元素

    通过jQuery # 选择器可以获取到某个元素,如$("#id").如果存在多个id相同的元素,就不能通过#选择器来获取了,即使使用each()也只能获取到第一个匹配的元素.解决方 ...

  2. linux shell命令行及脚本编程实例详解_超全整理!这些Shell编程必备知识你都掌握了吗?...

    正文最近很多粉丝咨询我,被问到了一些Shell编程的问题,看看大家能否答出来: 1.shell脚本千千万,不知道从哪入手 2.没经验缺方法,面试通不过.做事没头绪 3.野路子.没人教自动化,做了几年基 ...

  3. python excel操作库_超全整理|Python 操作 Excel 库常用操作详解

    来源:早起Python 作者:陈熹.刘早起 大家好,我是早起. 在之前的文章中我们曾详细的讲解了如何使用openpyxl 操作Excel,其实在Python中还有其他可以直接操作 Excel 文件的库 ...

  4. python excel 库 知乎_超全整理|Python 操作 Excel 库 xlwings 常用操作详解!

    来源:早起Python 作者:陈熹.刘早起 大家好,我是早起. 在之前的文章中我们曾详细的讲解了如何使用openpyxl 操作Excel,其实在Python中还有其他可以直接操作 Excel 文件的库 ...

  5. jquery 获取 id 含有 中文、其他特殊字符的元素.html

    <!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...

  6. jQuery获取所有父级元素及同级元素及子元素的方法

    jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...

  7. jquery 获取 id ,但是id 里面不能有. 这个符号

    因为要上传嵌套的变量 例如 rose.roseId,结果jquery 不能读取这个id    -> .jquery 获取 id ,但是id 里面不能有. 这个符号    ,都是坑啊,

  8. JQuery获取第几个元素和判断元素在第几个

    HTML代码: <ul><li>jQuery判断当前元素是第几个元素示例</li><li>jQuery获取第N个元素示例</li><l ...

  9. python excel库pip install_超全整理|Python 操作 Excel 库 xlwings 常用操作详解!

    原标题:超全整理|Python 操作 Excel 库 xlwings 常用操作详解! 来源:早起Python 作者:陈熹.刘早起 大家好,我是早起. 在之前的文章中我们曾详细的讲解了如何使用openp ...

最新文章

  1. 2019年互联网趋势报告
  2. 《Groovy极简教程》第12章 Groovy的JSON包
  3. 两个大数(整数)相加模板
  4. LeetCode Algorithm 面试题 10.05. 稀疏数组搜索
  5. java教程pdf下载百度云,面试题+笔记+项目实战
  6. 数据结构--Go 语言中 Set 的最佳实现方案
  7. vba循环通过键盘某个按键按下退出循环_[VBA]For Next与Do Loop循环
  8. Windows7系统运行hadoop报Failed to locate the winutils binary in the hadoop binary path错误
  9. IMP 导入数据报错 OCI-21500 OCI-22275
  10. MATLAB打不开,只在任务栏闪一下就无反应了怎么办?
  11. 青蛙跳台阶 php,php中青蛙跳台阶的问题解决方法
  12. 前端开发--箭头函数
  13. APP内置H5分享到微信
  14. 电脑卡,电脑比较卡问题都出在这里,怎么解决电脑卡顿方法
  15. 启用vsftpd日志及其解读
  16. Deep Lab 系列总结
  17. MFC生成错误msado15.tlh(3991):fatal error C1003: 错误计数超过100;正在停止编译
  18. 捷联惯导系统学习2.6(圆锥误差补偿多子样算法)
  19. 计算机专业硕士初次认定工程师,深圳职称初次认定条件(初级、中级)
  20. 商米系统升级PDA,PDA自动更新

热门文章

  1. 【Java类加载机制】深入类加载器(二)自定义加密、解密类加载器
  2. Web Storage API的介绍和使用
  3. 分布式系统优势及衡量指标
  4. 蒲公英怎么加入别人的网络_挖蒲公英吃的,抓紧看看吧!
  5. java.lang.reflect.Constructor
  6. JAVA反射系列之Method,java.lang.reflect.Method的使用
  7. spark的内存过小报错
  8. jQuery的val()方法
  9. Linux第二章自测习题——Linux系列学习笔记
  10. 编译原理习题(含答案)——1 绪论——MOOC哈工大陈鄞配套, 1 编译是对()。 A. 机器语言的执行 B. 汇编语言的翻译