이 글의 내용은 jQuery의 선택자가 무엇인지에 관한 것입니다. jquery 선택기 소개에는 특정 참고 가치가 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.
Selector
selector란 무엇입니까?
jQuery의 선택기는 HTML 페이지에서 요소를 찾는 데 사용되며 원래는 CSS의 선택기에서 파생되도록 설계되었습니다. CSS 선택자보다 훨씬 강력합니다. Basic Selector는 다음과 같은 유형을 가지고 있습니다 레벨 선택기
jQuery의 계층적 선택기에는 다음과 같은 유형이 있습니다. 1. 하위 선택기 주어진 요소의 조상 요소를 기반으로 모든 하위 요소를 일치시킵니다.
2 하위 선택기를 기반으로 상위 요소 아래의 모든 하위 요소를 일치시킵니다.3 . 인접 형제 선택기 주어진 대상 요소를 기반으로 다음 인접 형제 요소를 일치시킵니다
4. 일반 형제 선택기 주어진 대상 요소를 기반으로 다음의 모든 형제 요소를 일치시킵니다
때문에 jQuery 개체는 배열과 같은 개체입니다. 실시간으로 일치할 수 있는 요소이며 반환된 결과는 여전히 배열과 유사한 객체입니다.
샘플 코드는 다음과 같습니다.
<body>
<div id="d1">卧龙学苑</div>
<div id="d2" class="cls">前端开发</div>
<script>
console.log($('#d1'));
console.log($('div'));
console.log($('.cls'));
// 通配符选择器 - 匹配所有
console.log($('*'));
// 组合选择器 - 多个选择器之间使用逗号分隔(并集)
console.log($('#d1, .cls'));
// 组合选择器 - 多个选择器之间没有任何分隔(交集)
console.log($('#d2.cls'));
</script>
</body>jQuery의 기본 필터 선택기에는 다음과 같은 유형이 있습니다. 1.:first filter selector 첫 번째 요소 가져오기
2.:last filter selector 마지막 요소 가져오기3.:even filter selector 0부터 시작하여 짝수 인덱스 값을 갖는 모든 요소와 일치
4.:odd filter selector 0부터 시작하여 홀수 인덱스 값을 갖는 모든 요소와 일치
5.:eq() 필터 선택기 주어진 인덱스 값
6.:gt() 필터 선택기 지정된 인덱스 값보다 큰 모든 요소와 일치
7.:lt() 필터 선택기 지정된 인덱스 값보다 작은 모든 요소와 일치
8 .:not() 필터 선택기 모두 제거 주어진 선택기와 일치하는 요소
9.:header filter selector h1 h2 h3 h4 h5 h6
샘플 코드는 다음과 같습니다. : <body>
<div id="parent">
<div id="child">
<div id="d6"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d4"></div>
<div id="d5"></div>
</div>
<div id="child2">
<div id="d3"></div>
</div>
</div>
<script>
console.log($('#parent div'));
//父子选择器
console.log($('#parent>div'));
// 指定元素的下一个相邻兄弟元素
console.log($('#d1+div'));
// 指定元素的后面所有的兄弟元素
console.log($('#d1~div'));
// siblings()方法 - 获取指定元素所有的兄弟元素(前面+后面)
console.log($('#d1').siblings('div'));
</script>
</body>
다음 콘텐츠 필터 선택기가 jQuery
1에서 제공됩니다.: 포함() 필터 선택기 일치 포함 요소의 지정된 위치 버전
2 :빈 필터 선택기는 수행하는 빈 요소와 일치합니다. 하위 요소 또는 텍스트를 포함하지 않음
3. :parent 필터 선택기는 요소를 하위 요소 또는 텍스트와 일치시킵니다.
4. :has() 일치할 필터 선택
샘플 코드는 다음과 같습니다.
가시성 필터 선택기
<body>
<h1>这是标题</h1>
<h2>这是标题</h2>
<div>卧龙学苑</div>
<div id="d2">
<div id="child"></div>
</div>
<div></div>
<div></div>
<div>前端开发</div>
<div id="animated"></div>
<script>
// 在指定范围匹配的元素中进行筛选
console.log($('div:first'));
console.log($('div:last'));
// 索引值为偶数时 -> 奇数元素；索引值为奇数时 -> 偶数元素
console.log($('div:even'));
console.log($('div:odd'));
// :eq(index) -> index表示索引值
console.log($('div:eq(0)'));// 等于
console.log($('div:gt(2)'));// 大于
console.log($('div:lt(2)'));// 小于
// :header -> 匹配h1~h6元素
console.log($(':header'));
function animated(){
$('#animated').slideToggle(animated);
}
animated();
// :animated -> 只能匹配由jQuery实现的动画
console.log($(':animated'));
console.log($('div:not("#child")'));
</script>
</body>
1. 필터 선택기는 주어진 속성
2을 포함하는 요소와 일치합니다. [attr=value] 필터 선택기는 주어진 속성과 일치합니다. 속성은 특정 값을 가진 요소입니다
3.[attr! =value] 필터 선택기는 특정 속성을 포함하지 않거나 속성이 특정 값과 동일하지 않은 요소와 일치합니다
4.[attr^=value] 필터 선택기는 지정된 속성이 특정 값으로 시작하는 요소와 일치합니다
5.[ attr$=value] 필터 선택기는 특정 값으로 끝나는 요소인 지정된 속성과 일치합니다.
7. 조합 필터링 선택기 일치하는 요소는 동시에 여러 속성 필터를 충족해야 합니다<body>
<div>这是div元素</div>
<div></div>
<div>
<div id="child"></div>
</div>
<script>
console.log($('div:contains("di")'));
console.log($('div:empty'));
console.log($('div:parent'));
// :has() - 表示包含匹配指定选择器元素的父级元素
console.log($('div:has("#child")')[0]);
</script>
</body>
2. ：첫 번째 자식 필터 선택기 첫 번째 자식 요소와 일치 3. ：마지막 자식 필터 선택기 마지막 자식 요소와 일치 4. 요소가 부모의 유일한 자식 요소인 경우 요소, 일치됩니다
<body>
<div id="d1">卧龙学苑</div>
<div id="d2">前端开发</div>
<input type="hidden" value="用户名">
<input type="text" name="username">
<script>
/*
:hidden选择器
* 不能匹配CSS样式属性visibility设置为hidden的隐藏元素
* 还能匹配HTML页面中不做任何显示效果的元素
* 用法 - 尽量确定元素类型或指定范围
*/
console.log($(':hidden'));
/*
:visible选择器
* 匹配CSS样式属性visibility设置为hidden的隐藏元素
* 当visibility设置为hidden时的元素，依旧占有页面空间
* 还能匹配HTML页面中<html>和<body>元素
*/
console.log($(':visible'));
</script>
</body>
양식 개체 속성 필터
1.: 활성화된 필터 선택기 사용 가능한 모든 요소와 일치
2.: 비활성화된 필터 선택기 사용할 수 없는 모든 요소와 일치
3.: 선택됨 필터 선택기가 선택된 모든 요소와 일치
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
