jQuery的各种选择器

基本选择器

  • 通配符选择器:匹配所有
console.log($('*'));
  • 组合选择器:多个选择器之间使用逗号分隔(并集)
console.log($('#d1,.cls'));
  • 组合选择器:多个选择器之间没有任何分隔(交集)
console.log($('#d2.cls'));

层级选择器

  • 指定元素的下一个相邻兄弟元素
console.log($('#d1+div'));
  • 指定元素的后面所有的兄弟元素
console.log($('#d1~div'));
  • siblings()方法:获取指定元素所有的兄弟元素(前面+后面)
console.log($('#d1').siblings('div'));

基本过滤选择器

  • 在指定范围匹配的元素中进行筛选
//找到div里第一个元素
console.log($('div:first'));
//找到div里最后一个元素
console.log($('div:last'));
  • 索引值为偶数时:奇数元素;索引值奇数时:偶数元素
//指定div中的偶数元素
console.log($('div:even'));
//指定div中的奇数元素
console.log($('div:odd'));
  • :eq(index):index表示索引值
//指定div元素索引值为0的元素
console.log($('div:eq(0)'));
//指定div元素索引值大于2的元素
console.log($('div:gt(2)'));
//指定div元素索引值小于2的元素
console.log($('div.lt(2)'));
  • :header:匹配h1~h6元素
  • :animated: 只能匹配由jQuery实现的动画
  • :not:不是not里面的元素

内容过滤选择器

  • :contains:元素只要包含此文本即可
  • :empty:匹配所有不包含子元素或者文本的空元素
  • :parent:匹配含有子元素或者文本的元素
  • :has():匹配含有选择器所匹配的元素的元素

可见性过滤选择器

  • :hidden选择器

不能匹配css样式属性visibility设置为hidden的隐藏元素
还能匹配HTML页面中不做任何显示效果的元素
尽量确定元素类型或指定范围

  • :visible选择器

匹配CSS样式属性visibility设置为hidden的隐藏元素
当visibility设置为hidden时的元素,依旧占有页面空间
还能匹配HTML页面中HTML和body元素

属性过滤选择器

  • [attr]过滤选择器:匹配包含给定属性的元素
  • [attr=value]过滤选择器:匹配给定的属性是某个特定值的元素
  • [attr!=value]过滤选择器:匹配所有不含有指定的属性,或者属性不等于特定值的元素
  • [attr^=value]过滤选择器:匹配给定的属性是以某些值开始的元素
  • [attr$=value]过滤选择器:匹配给定的属性是以某些值结尾的元素
  • [attr*=value]过滤选择器:匹配给定的属性是以包含某些值的元素
  • 组合属性过滤选择器:匹配元素需要同时满足多个属性过滤选择器

子元素过滤选择器

  • :nth-child()过滤选择器:匹配其父元素下的第N个子或奇偶元素,它的index位置是从1开始,表示第几个
  • :first-child过滤选择器:匹配第一个子元素
  • :last-child过滤选择器:匹配最后一个子元素
  • :only-child过滤选择器:如果某个元素是父元素中唯一的子元素,那将会被匹配

表单选择器

  • :enabled过滤选择器:匹配所有可用元素
  • :disabled过滤选择器:匹配所有不可用的元素
  • :checked过滤选择器:匹配所有选中的被选中元素(复选框、单选框)
  • :selected过滤选择器:匹配所有选中的<option>元素

由于jQuery对象是类数组对象,即使匹配的元素只有一个,返回的结果依旧是类数组对象

    原文作者:庄国琳
    原文地址: https://segmentfault.com/a/1190000016295480
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞