jQuery选择器的那些事

2020-04-06  本文已影响0人  毅冷锋

在页面的实际开发中,我们利用js来操作页面dom,来实现渲染,但js自带的document.getElementById等方法去选取dom对象,但这种原生方法使用起来,代码很长,写起来很麻烦,而且有些复杂的功能实现起来很是复杂,不像同样具有选取作用的CSS选择器,用起来灵活且功能强大, 这种情况下,jQuery定义了一套选择器规则,和CSS选择器目的一样,都是为了选择出符合特定规则的元素,这里对于选择器做一个基本的总结, 仅做学习参考,如有不对还请指出。

基本选择器 功能
$('*') 匹配页面所有元素
$('#id') id选择器
$('.class') 类选择器
$('element') 标签选择器
组合层次选择器 功能
$('E,F') 多元素选择器,用“,”隔开,同时匹配元素E或元素F
$('E F') 后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素,子元素向下递归)元素F
$(E>F) 子元素选择器,用“>”分隔,匹配E元素的所有直接子元素
$('E+F') 直接相邻选择器,匹配E元素之后的相邻的同级元素F
$('E~F') 普通相邻选择器(弟弟选择器),匹配E元素之后的同级元素F(无论相邻与否)
$('.class1.class2') 匹配类名中既包含class1又class2的元素
基本过滤选择器 功能
$("E:first") 所有E中的第一个
$("E:last") 所有E中的最后一个
$("E:not(selector)") 按照selector过滤E
$("E:even") 所有E中index是偶数
$("E:odd") 所有E中index是奇数
$("E:eq(n)") 所有E中index为n的元素
$("E:gt(n)") 所有E中index大于n的元素
$("E:lt(n)") 所有E中的index小于n的元素
$(":header") 选择h1-h6元素
$("div:animated") 选择正在执行动画效果的元素
内容过滤器 功能
$('E:contains(value)') 内容中包含value值的元素
$('E:empty') 内容为空的元素
$('E:has(F)') 子元素中有F的元素,比如$('div:has(a)'),就是选取元素含有a标签的div元素
$('E:parent') 父元素是E的元素,比如$('td:parent'),就是选取父元素是td的元素
可视化选择器 功能
$('E:hidden') 所有隐藏的E
$('E:visible') 所有可见的E
属性过滤选择器 功能
$('E[attr]') 含有属性attr的E
$('E[attr=value]') 属性attr=value的E
$('E[attr!=value]') 属性attr!=value的E
$('E[attr^=value]') 属性attr以value开头的E
('E[attr=value]') 属性attr以value结尾的E
$('E[attr*=value]') 属性attr包含value的E
$('E[attr][attr*=value]') 复合型选择器,需同时满足条件
子元素过滤器 功能
$('E:nth-child(n)') E的第n个子节点
$('E:nth-child(3n+1)') E的index符合3n+1表达式的子节点
$('E:nth-child(even)') E的index为偶数的子节点
$('E:nth-child(odd)') E的index为奇数的子节点
$('E:first-child') 所有E的第一个子节点
$('E:last-child') 所有E的最后一个子节点
$('E:only-child') 只有唯一子节点的E的子节点
表单元素选择器 功能
$('E:type') 特定类型的input
$(':checked') 被选中的checkbox或radio
$('option:selected') 被选中的option

jQuery除了选择器还提供了一些方法帮助我们查找当前元素相关元素

$('li').filter(':even') //获取li集合中index是偶数的li
$('li').filter(function(index){
    return index%3 == 2
})  //获取li集合中index值余3结果为2的li
if($target.is('li')){
   $target.css("background-color" , "red");
}
上一篇 下一篇

猜你喜欢

热点阅读