jquery系列之选择器

绝地灬酷狼 2022-07-13 12:48 153阅读 0赞

第二天，昨天总结checkbox时突然遇到了JQuery(“：input:checkbox:checked”)以及$(“input\[type=checkbox\]”)两种选择器的语法，因为好久没写前端了，突然有点蒙了，乘此机会把这些非常用的选择器再记录一下：  
先普及一下后代元素和子元素的区别：后代元素指的是它的儿子，而子元素则是它的子孙后代（这样理解可还行？哈哈）

开始讲jquery的选择器，大概分成4类：基本选择器、层次选择器、过滤选择器、表单选择器；（本文开头提出的两种选择器就都属于过滤选择器）  
1.基本选择器分为这么几种：  
jquery(“\#one”) (".two")(“div”),("∗"),(“.one,.two”)  
相信前三种大家常用，没什么讲的，而\*在好多语言中都当做是通配符，在jquery也可以这么理解，相当于所有元素；最后一个逗号分隔的则是相当于这两种元素同时选择；  
2.层次选择器分为4种，其实感觉一般也很少用，它的这种写法都有相对应的方法代替了，先讲讲吧  
a).(“ancestordescendant”)选取ancestor元素的所有descentdant（后代）元素；有点像(“ancestor”).find(descendant);与parents()对应；  
b).(“parent>child”)选取parent元素的子元素（只是parent的儿子元素）；有点像(“parent”).children(“child”),与parent（）对应；  
c)(“prev\+next”)选取紧跟在prev后面的next元素有点像(“prev”).next(“next”)  
d)(“prev siblings”)选取prev元素之后的所有siblings元素有点像(“prev”).siblings(),但siblings不管前后都匹配；  
3.过滤选择器  
a)基本过滤选择器（位数以及索引，都是找第n个元素或范围）  
：first，：last，：not(selector),:even\[偶数\]，：odd\[奇数\],:eq(index)，：gt(index)\[greater,索引大于index的元素\]，：lt(index)\[lesster,索引小于index的元素\]，：header\[所有标题元素\]，：animated\[选取当前正在执行动画的所有元素\]，：focus\[获取当前获取焦点的元素\]  
b)内容过滤  
：contains(text),:empty,:has(selector),parent;  
c)可见性过滤  
:hidden,:visible;  
d)属性过滤  
\[attribute\],\[attribute=value\],\[attribute!=value\],\[attribute^=value\],\[attribute$=value\],\[attribute\*=value\],\[attribute|=value\],\[attribute~=value\],\[attribute1\]\[attribute2\]\[attributeN\]

![这里写图片描述][SouthEast]  
e)子元素过滤  
：first-child,:last-child;:only-child;:nth-child(even/odd/index/equation)  
f)表单对象属性过滤  
：enabled,:disabled,:checked,:selected;  
**注：过滤选择器与元素之间不能加空格，需要close元素**  
4.表单选择器  
:input,:text,:password,:radio,:checkbox,:submit,:image，：reset,:button,:file,:hidden;

总结：  
上面总结的jquery的选择器，除了最基本的之外，其它的过滤器其实jquery都定义好了各自对应的方法，可以按照个人的习惯来使用，上面这些过滤器只需要知道其各自的用法即可；

参考：锋利的jquery（book）

[SouthEast]: /images/20220713/a4c2e788a3044f248103bf36ec8365d7.png