JQuery选择器

作者：Q

撰写时间：2021/7/17

Jquery选择器

基本选择器：

• • • id选择器
    • 类选择器
    • 元素选择器
    • * 和多种混合

层次选择器：
 

• • • 所有后代选择器 $('body div')
    • 多元素选择器 $(".one，.two")
    • 直接后代选择器 $('body > div')
    • 下一个兄弟选择器 $('.one + div') === $('.one').next();
    • 后面全部兄弟选择器 $('#two ~ div') === $('.two').nextAll();

过滤选择器：
 

• • • 选取第一个元素 $('div:first')
    • 选取最后一个元素 $('div:last')
    • 去除特定元素 $('div:not(.one)')
    • 选取索引为index元素 $('div:eq(0)')
    • 选取索引 > index元素 $('div:gt(0)')
    • 选取索引 < index元素 $('div:lt(0)')
    • 选取索引偶数元素 $('div:even') （计算时考虑div中的div）
    • 选取索引奇数元素 $('div:odd')
    • 选取所有标题元素 $(':header')
    • 选取正在动画元素 $(':animate')
    • 选取焦点元素 $(':focus')

 

内容过滤选择器：

• • • 选取文本内容含有xx的元素 $("div:contains(cwg)")
    • 选取含有选择器匹配结果的元素 $("div:has('.mini')")
    • 选取空元素 $("div:empty")
    • 选取不空元素 $("div:parent")

可见性过滤器：

• • • 选取所有可见元素 $("div:visible")
    • 选取所有不可见元素 $("div:hidden")

属性过滤器：

• • • 选取含有属性的元素 $("div[title]")
    • 选取属性值等于xx的元素 $("div[title='test']")
    • 选取属性值不等于xx的元素 $("div[title!='test']")
    • 选取属性值以xx开头的元素 $("div[title^='te']")
    • 选取属性值以xx结尾的元素 $("div[title$='te']")
    • 选取属性值含有xx的元素 $("div[title*='te']")
    • 选取属性值为xx或以xx-开头的元素 $("div[title|='te']")
    • 选取属性值为空格分开的值中带 xx 的元素 $("div[title]~='te'")（多个类中可能用到）

子元素过滤器（空格很重要！！！）：

• • • $("div :nth-child(index/even/odd/3n+1之类的表达式)") （index从1开始）
    • $("div :first-child")
    • $("div :last-child")
    • $("div :only-child") （匹配唯一子元素）

表单元素过滤器：

• • • 选取所有可用元素 $("#form input:enabled")
    • 选取所有不可用元素 $("#form input:disabled")
    • 选取所有被选中元素（radio、checkbox） $("#form input:checked")
    • 选取所有被选中的选项元素（select） $("#form input:selected") 

 

表单元素选择器：

• • • 选择所有input（input + textarea + select + button） $("#form :input")
    • 各种分类
    • $("#form :text")
    • $("#form :password")
    • $("#form :radio")
    • $("#form :checkbox")
    • $("#form :submit")
    • $("#form :reset")
    • //图像按钮
    • $("#form :image")
    • $("#form :button")
    • //上传域
    • $("#form :file")
    • //不可见元素
    • $("#form :hidden")

$("input[name='xx']")