선택기에는 고정된 정의가 없습니다. 어느 정도 jQuery의 선택기는 스타일 시트의 선택기와 매우 유사합니다. 선택자의 특징은 다음과 같습니다.
1. 코드 작성을 단순화
2. 암시적 반복
3. 객체가 존재하는지 판단할 필요가 없습니다
여기서 "$"는 선택기의 필수 부분입니다. jQuery 라이브러리에서 $는 $("#foo") 및 jQuery("와 같이 jQuery의 약어입니다. #foo") 마찬가지로 $.ajax와 jQuery.ajax는 동일합니다. 특별한 지시사항이 없다면 프로그램 내 $ 기호는 jQuery의 약어로 이해하시면 됩니다.
이제 공식적으로 jQuery 선택기 연구에 들어갑니다. 선택자는 기능적 습관에 따라 분류됩니다. 다양한 유형의 분류자가 아래에 분류되어 독자가 이를 익힐 수 있도록 각각 설명됩니다.
1. 기본 선택기
기본 선택기에는 #id, element, .class, * 및 selectorl, selector2.selectorN 5가지 유형의 선택기가 포함되어 있으며, 각 선택기의 역할과 사용법을 예와 함께 소개합니다.
1． #id 선택기
#id 선택기는 주어진 ID를 기반으로 요소를 일치시킵니다. 선택기에 특수 문자가 포함된 경우 두 개의 슬래시로 이스케이프할 수 있으며 반환 값은 Array
2． 요소 선택자
요소 선택자는 검색에 사용되는 요소입니다. DOM 노드를 가리키는 태그 이름입니다. 그 반환 값은 Array
3． 클래스 선택자
. 클래스 선택자는 주어진 클래스를 기준으로 요소를 일치시키며 검색할 클래스입니다. 요소는 여러 클래스를 가질 수 있습니다. 일치하는 항목이 하나만 있으면 일치할 수 있습니다. 반환 값은 Array
예를 들어
<input type="text" id="ID" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素css类名选择" />
jQuery("#ID").val();
jQuery("a").text();
jQuery(".classname").val();은 요소의 값을 각각 가져올 수 있습니다. 위의 3개는 가장 일반적인 선택자이며, 그 중 ID 선택자가 가장 효율적이므로 가능할 때마다 사용해야 합니다.
4. *선택기
*선택기는 대부분 컨텍스트를 기반으로 검색하고 모든 요소를 일치시키는 데 사용됩니다. 그 반환 값은 Array
5． selector1, selector2, selectorN selector
각 선택기와 일치하는 요소를 결합하여 함께 반환하는 유형의 선택기입니다. 원하는 수의 선택기를 지정하고 일치하는 요소를 하나의 결과로 병합할 수 있습니다. 반환 값은 Array
2. 레벨 선택기
레벨 선택기에는 상위, 하위, 상위 > 하위, 이전 + 다음, 이전 ~ 형제 등 5가지 형식이 있습니다. 다음에서는 예제를 사용하여 각 선택기의 역할과 사용법을 자세히 소개합니다.
1． 조상 자손 선택자
는 주어진 조상 요소 아래의 모든 자손 요소를 일치시키는 것을 참조하며, 매개변수로서의 조상은 유효한 선택자를 나타내며, 자손은 요소의 선택자와 일치하는 데 사용되며 선택자의 첫 번째 자손입니다. . 반환 값은 Array
2． 부모>자식 선택기
부모>자식 선택기는 주어진 부모 요소 아래의 모든 자식 요소를 일치시키는 것을 의미합니다. 두 매개변수의 의미는 다음과 같습니다. parent는 유효한 선택기를 나타냅니다. child는 요소를 일치시키는 데 사용되는 선택기이며 첫 번째 선택기의 하위 요소입니다. 그 반환 값은 Array
3． prev+next 선택기
이 유형의 선택기는 이전 요소 바로 다음의 모든 다음 요소를 일치시키는 데 사용됩니다. 두 매개변수의 의미는 다음과 같습니다. prev는 유효한 선택기를 나타내고, next는 첫 번째 선택기 바로 다음에 오는 유효한 선택기를 나타냅니다. 그 반환 값은 Array
4． prev ~ siblings 선택자
prev ~ siblings 선택자는 prev 요소와 일치한 후 모든 형제 요소를 나타냅니다. 두 매개변수의 의미는 다음과 같습니다. prev는 유효한 선택자를 나타냅니다. siblings는 선택자를 나타내며 첫 번째 선택자의 형제 역할을 합니다. 그 반환 값은 Array
예:
<div id="divTest">
<input type="text" value="投资" />
<input id="next" type="text" />
<input type="text" value="担当" />
<input type="text" title="学习" value="学习" />
<a>1</a>
<a>2</a>
</div>
//得到div中的a标签内容 结果为12
jQuery("#divTest a").text();
//输出div直接子节点 结果为投资
jQuery("#divTest>input").val();
//输出id为next的后一个同级别元素 结果为担当
jQuery("#next+input").val();
//同上，并且是有title的元素 结果为学习
jQuery("#next~[title]").val();3. 필터 선택기
필터 선택기는 주로 CSS의 특정 필터링 규칙, 필터링 규칙 및 의사 클래스를 통해 필요한 DOM 요소를 필터링합니다. 즉, 선택자는 콜론으로 시작합니다.
필터 선택기는 총 6가지 종류로 많은 내용을 담고 있지만 분류가 가능합니다. 아래에서는 다양한 유형의 선택자에 대해 자세히 설명합니다.
1． 기본 필터 선택기
기본 필터 선택기는 가장 일반적으로 사용되는 필터 선택기 유형으로 주로 다음과 같은 형식을 포함하며 여기에 자세히 설명되어 있습니다.
(1): 첫 번째/: 마지막 선택기.
(2):선택자가 아닙니다.
(3):짝수 및 :홀수 선택기.
(4):eq:gt, :lt, 선택기.
(5): 헤더 선택기.
(6):애니메이션 선택기.
예:
<div id="divTest">
<ul>
<li>投资</li>
<li>理财</li>
<li>成熟</li>
<li>担当</li>
<input type="radio" value="学习" checked="checked" />
<input type="radio" value="不学习" />
</ul>
</div>
//第一个li内容 结果为投资
jQuery("li:first").text();
//最后一个li内容 结果为担当
jQuery("li:last").text();
//input未被选中的值 结果为不学习
jQuery("li input:not(:checked)").val();
//索引为偶数的li 结果为投资 成熟
jQuery("li:even").text();
//索引为奇数的li 结果为理财 担当
jQuery("li:odd").text();
//索引大于2的li的内容 结果为担当
jQuery("li:gt(2)").text();
//索引小于1的li的内容 结果为投资
jQuery("li:lt(1)").text();2.内容过滤选择器
内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器，这部分过滤器是对上面介绍基本过滤选择器的一个补充，对于页面选取、设置元素显示等方面发挥着重要的作用。下面将对各选择器进行详细的介绍。
（1）:contains选择器。
（2）:empty选择器。
（3）:has选择器。
（4）:parent选择器。
举例：
<div id="Test">
<ul>
<li>hyip投资</li>
<li>hyip</li>
<li></li>
<li>理财</li>
<li><a>投资</a></li>
</ul>
</div>
//包含hyip的li的内容 结果为hyip投资 hyip
jQuery("li:contains('hyip')").text();
//内容为空的li的后一个li内容 结果为理财
jQuery("li:empty+li").text();
//包含a标签的li的内容 结果为投资
jQuery("li:has(a)").text();3．可见性过滤选择器
可见性过滤选择器比较简单，其包含两种选择器，主要是用来匹配所有可见元素和不可见元素。下面将会对这两种选择器进行详细介绍。
（1）:hidden选择器。
（2）:visible选择器。
举例：
<ul>
<li>可见</li>
<li style="display:none;">不可见</li>
</ul>
//不可见的li的内容 结果为不可见
jQuery("li:hidden").text();
//可见的li的内容 结果为可见
jQuery("li:visible").text();4．属性过滤选择器
属性过滤选择器是用于匹配包含给定属性的元素，当然也可以匹配不包含此属性的元素等。属性过滤选择器共含有以下7种选择器。
（1） [attribute]选择器。
（2）[attribute=value]、[attribute!=value]选择器（此处包含两种）。
（3）[attribute^=value]、[attribute$=value]、[attribute*=value]选择器（此处包含三种）。
（4）[selector][selector2]选择器。
举例：
<input type="text" name="hyipinvest" value="hyip投资" />
<input type="text" name="investhyip" value="投资hyip" />
<input type="text" name="google" value="HYIP" />
//name为hyipinvest的值 结果为hyip投资
alert(jQuery("input[name='hyipinvest']").val());
//name以hyip开始的值 结果为hyip投资
alert(jQuery("input[name^='hyip']").val());
//name以hyip结束的值 结果为投资hyip
alert(jQuery("input[name$='hyip']").val());
//name包含oo的值 结果为HYIP
alert(jQuery("input[name*='oo']").val());5．子元素过滤选择器
html由层层嵌套在一起的标签组成，由于一些标签需要进行单独处理，如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器，具体内容将在下面详细讲解。
（1）:nth-child选择器。
（2）:first-child、:last-child选择器（两种）。
（3）:only-child选择器。
6．表单对象属性过滤选择器
这部分内容相当简单，只包含四种类型的选择器，这些选择器分别用来匹配可用元素或者不可用元素、选中元素等。下面将以实例的形式对此部分内容进行讲解。
（1）:enabled、:disabled选择器。
（2）:checked选择器。
（3）:selected选择器。
表单过滤选择器是用于处理html中表单的选择器，其中不仅仅包括经常用到的按钮、文本域、单选框、复选框等，还涉及了很少用到的图片、隐藏域、文件上传等标签。下面将会对这些选择器进行具体介绍。
（1）:input选择器。
（2）:text、:password选择器。
（3）:radio、:checkbox选择器。
（4）:submit、:image、:reset、:button、:file选择器。
（5）:hidden选择器。
Query选择器就总结到这里，这些基本上都是在学习过程中遇到的，还有极少部分没有总结出来。经过一段时间实践，相信大家就能够熟练的使用jQuery选择器了。
更多jquery选择器大全 全面详解jquery选择器相关文章请关注PHP中文网！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
