JS_jq选择器合集

基本选择器

|-------------------------|--------|-------------------------------|
| 选择器 | 返回 | 示范描述 |
| #id | 单个元素 | ("#test") | | .class | 集合元素 | (".test") |
| element | 集合元素 | ("p") 所有p原素 | | \* | 集合元素 | ("*")所有原素 |
| select1,select2,selectn | 集合元素 | $("div,span,p.myClass")所有匹配原素 |

层次选择器

|--------------------------|--------|----------------------------------------------------|
| 选择器 | 返回 | 示范描述 |
| ("ancestor descendant") | 集合元素 | ("div span") |
| ("parent\>child") | 集合元素 | ("div>span") 所有子元素 |
| ("prev+next") | 集合元素 | (".one + div") 选取类名为one的下一个div同辈原素 |
| | | 可用next()方法代替(".one").next("div") | | ("prev~siblings") | 集合元素 | (".two + div") 选取类名为two的所有div同辈原素 可用nextAll()方法代替 | | | | 可用nextAll()方法代替(".one").nextAll("div") |

基本过滤选择器

|----------------|--------|-------------------------------------------|
| 选择器 | 返回 | 示范描述 |
| :first | 单个元素 | ("div:first") 选取第一个元素 | | :last | 单个元素 | ("div:last") 选取最后一个元素 |
| :not(selector) | 元素合集 | ("input:not(.myclass)") 选取类名不是myclass的原素 | | :even | 元素合集 | ("input:even") 选取索引是偶数的匹配元素 |
| :odd | 元素合集 | ("input:odd") 选取索引是奇数的匹配元素 | | :eq(index) | 单个元素 | ("input:eq(1)") 选取索引是1的匹配元素 |
| :gt(index) | 元素合集 | ("input:gt(1)") 选取索引大于1的匹配元素 | | :lt(index) | 元素合集 | ("input:lt(1)") 选取索引小于1的匹配元素 |
| :header | 元素合集 | (":header") 选取标题元素 如h1,h2等 | | :animated | 元素合集 | ("div:animated") 当前正在执行动画的所有元素 |
| :focus | 元素合集 | $(":focus") 当前获取焦点的元素 |

内容过滤选择器

|-----------------|--------|----------------------------------------|
| 选择器 | 返回 | 示范描述 |
| :contains(text) | 集合元素 | ("div:contains("我")") 选取含有文本"我"的div元素 | | :empty | 集合元素 | ("div:empty)") 选取不包含子元素(包括文本元素)的div元素 |
| :has(selector) | 集合元素 | ("div:has(p))") 选取含有p元素的div元素 | | :parent | 集合元素 | ("div:parent)") 选取拥有子元素(包括文本元素)的div元素 |

可见性过滤选择器

|----------|--------|------------------------------------------------------------------------------------------------------------------|
| 选择器 | 返回 | 示范描述 |
| :hidden | 集合元素 | (":hidden") 选取不可见元素包括\ \

\
| | :visible | 集合元素 | (" div:visible)") 选取可见的div元素 |

属性过滤选择器

|-----------------------|--------|----------------------------------------------------------|
| 选择器 | 返回 | 示范描述 |
| attribute | 集合元素 | ("div\[id\]") 选取拥有id属性等div元素 | | \[attribute=value\] | 集合元素 | ("divtitle=test") 选取拥有title属性为test的div元素 |
| attribute!=value | 集合元素 | ("div\[title=test\]") 选取拥有没有title属性和title属性不为test的div元素 | | \[attribute\^=value\] | 集合元素 | ("divtitle\^=test") 选取属性和title属性以test为开始的div元素 |
| attribut$\^=value | 集合元素 | $("divtitle\^=test") 选取属性和title属性以test为结束的div元素 |

还有其他多种不常用属性过滤选择器

注意1.3.1之前的版本属性选择器需要加@符号 注意代码报错的问题

之前("div@title = 'test'");之后 ("divtitle='test'");

子元素过滤选择器

|-------------------------------------|--------|---------------------------------------------------------------|
| 选择器 | 返回 | 示范描述 |
| :nth-child(index/even/odd/equation) | 集合元素 | :eq()只匹配一个元素 index值 从0开始 :nth-child()为每一个父元素匹配子元素 且index值从1开始 |
| :first-child | 集合元素 | :first只返回单个元素 而:first-child将为每一个父元素匹配第一个字节 |
| :last-child | 集合元素 | 同上 |
| :only-child | 集合元素 | $("ul li:only-child")在ul中选取是唯一子元素li 的li标签 |

:nth-child是常用选择器

  • :nth-child(even)选取偶数元素
  • :nth-child(odd)选取奇数元素
  • :nth-child(2)选取每个父元素下索引值为2的元素
  • :nth-child(3n)选取每个父元素下索引值是3的倍数的元素(n从1开始)
  • :nth-child(3n+1)选取每个父元素下索引值是3的倍数的元素(n从1开始)

表单对象属性过滤选择器

|-----------|--------|-------------------------------------------|
| 选择器 | 返回 | 示范描述 |
| :enabled | 集合元素 | ("#form1:enabled")选取id为form1的表单内的所有可用元素 | | :disabled | 集合元素 | ("#form1:enabled")选取id为form1的表单内的所有不可用元素 |
| :checked | 集合元素 | ("input:checked")选取所有被选中的元素(单选框 复选框) | | :selected | 集合元素 | ("input:checked")选取所有被选中的元素(下拉列表) |

表单选择器

|-----------|--------|-----------------------------------------------------------|
| 选择器 | 返回 | 示范描述 |
| :input | 集合元素 | ("input")选取所有\\\\元素 | | :text | 集合元素 | (":text")选取所有单行文本框 |
| :password | 集合元素 | (":password")选取所有密码框 | | :radio | 集合元素 | (":radio")选取所有单选框 |
| :checkbox | 集合元素 | (":checkbox")选取所有复选框 | | :submit | 集合元素 | (":submit")选取所有提交按钮 |
| :image | 集合元素 | (":image")选取所有图像按钮 | | :reset | 集合元素 | (":reset")选取所有重置按钮 |
| :button | 集合元素 | (":button")选取所有按钮 | | :file | 集合元素 | (":file")选取所有上传域 |
| :hidden | 集合元素 | $(":hidden")选取所有不可见元素 |

.

相关推荐
IT_陈寒几秒前
SpringBoot自动配置的坑:你以为的捷径可能是弯路
前端·人工智能·后端
paopaokaka_luck1 分钟前
高校社团管理(AI辅助任务分配、协同过滤算法推荐、ECharts数据可视化、活动参与闭环、校园交流与反馈、器材借还管理)
java·前端·javascript·spring boot·数据分析·echarts
听风3476 分钟前
windplay网页创意实验场
css·html·创意·website·windplay
Dovis(誓平步青云)25 分钟前
导览音频切换太快,旧讲解不能覆盖新展品
android·前端·javascript·ecmascript·音视频·宠物
福兮说11 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理12 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
小呆呆66612 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
Dovis(誓平步青云)13 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan13 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_14 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线