jQuery에는 어떤 필터 선택기가 있습니까?

jQuery 필터 선택기에는 ":first", ":last", ":not()", ":even", ":odd", ":eq()", ":gt()", "가 포함됩니다. lt()", ":header", ":empty", ":has()", ":hidden" 등

【관련 추천: jQuery 동영상 튜토리얼】

jQuery 필터 선택기

필터링? 반드시 필터 조건을 추가해야 합니다. "$("div:first")"와 같이 ":"를 통해 필터 조건을 추가하여 div 요소 컬렉션의 첫 번째 div 요소를 반환하고 첫 번째는 필터 조건입니다.
다양한 필터링 규칙에 따라 필터 선택기는 기본 필터링, 콘텐츠 필터링, 가시성 필터링, 속성 필터링, 하위 요소 필터링 및 양식 개체 속성 필터링 선택기로 나눌 수 있습니다.

1. 기본 필터 선택기

a) ":first", 첫 번째 요소를 선택합니다. 이 요소도 컬렉션에 배치된다는 점을 잊지 마세요! JQuery는 DOM 객체의 모음이기 때문입니다. 예를 들어, "$("tr:first")"는 컬렉션에 여전히 저장되어 있는 모든 tr 요소 중 첫 번째 tr 요소를 반환합니다.

b) “:last”, 마지막 요소를 선택합니다. 예를 들어, "$("tr:last")"는 컬렉션에 여전히 저장되어 있는 모든 tr 요소 중 마지막 tr 요소를 반환합니다.

c) ":not(selector)", 주어진 선택기와 일치하는 모든 요소를 ​​제거합니다. 예를 들어 "$("input:not(:checked)")"는 모든 입력 요소를 반환하지만 선택한 요소(라디오 버튼, 다중 선택 상자)를 제거합니다.

d) “:even”은 모든 요소 중에서 짝수 요소를 선택합니다. JQuery 객체는 컬렉션이므로 여기서 짝수는 컬렉션의 인덱스를 의미하며 인덱스는 0부터 시작됩니다.

e) ":odd"는 모든 요소 중에서 홀수 요소를 선택하고 인덱스는 0부터 시작합니다.

f) “:eq(index)”, 지정된 인덱스에 있는 요소를 선택하고 인덱스는 0부터 시작합니다.

g) ":gt(index)", 지정된 인덱스보다 인덱스가 큰 요소를 선택하고 인덱스는 0부터 시작합니다.

h) ":lt(index)", 인덱스가 지정된 인덱스보다 작은 요소를 선택하고 인덱스는 0부터 시작합니다.

i) ":header", hq, h2 등과 같은 모든 헤더 요소를 선택합니다.

j) “:animated”, 현재 실행 중인 모든 애니메이션 요소를 선택합니다.

2. 콘텐츠 필터 선택기

요소 및 텍스트 콘텐츠에 대한 작업입니다.

a) ":contains(text)", 텍스트 텍스트 콘텐츠가 포함된 요소를 선택합니다.

b) ":empty"는 하위 요소나 텍스트 노드를 포함하지 않는 빈 요소를 선택합니다.

c) “:has(selector)”, 선택기와 일치하는 요소를 포함하는 요소를 선택합니다.

d) ":parent", 하위 요소나 텍스트 노드가 포함된 요소를 선택합니다. (부모 노드입니다)

3. 가시성 필터 선택기

표시 여부에 따라 요소를 선택합니다.

• ":hidden", 보이지 않는 요소를 모두 선택하세요.

• ":visible"은 보이는 모든 요소를 ​​선택합니다.

Visible 선택기: 숨김에는 스타일 속성 표시가 없음인 요소뿐만 아니라 텍스트 숨김 필드() 및 visible:hidden과 같은 요소도 포함됩니다.

4. 속성 필터 선택기

요소의 속성을 통해 해당 요소를 선택합니다.

a) "[속성]", 이 속성이 있는 요소를 선택하세요.

b) "[속성=값]", 지정된 속성 값을 가진 모든 요소를 ​​값으로 선택합니다.

c) "[attribute !=value]", 속성 값이 value가 아닌 모든 요소를 ​​선택합니다.

d) "[속성 ^= 값]", 속성 값이 value로 시작하는 모든 요소를 ​​선택합니다.

e) "[속성 $= 값]", 속성 값이 value로 끝나는 모든 요소를 ​​선택합니다.

f) "[속성 *= 값]", 속성 값에 값이 포함된 모든 요소를 ​​선택합니다.

g) 복합 선택기인 "[selector1] [selector2]...[selectorN]"은 먼저 [selector1]을 선택하고 세트 A로 돌아가고, 세트 A는 [selector2]를 선택하고 세트 B로 돌아가고, 그 다음 세트 B로 돌아갑니다. [selectorN] 선택 ] 결과 집합을 반환하려면 선택하세요.

5. 하위 요소 필터 선택기

이름에서 알 수 있듯이 특정 요소의 하위 요소를 선택합니다.

a) ":nth-child(index/even/odd)"는 인덱스가 있는 요소, 짝수 인덱스가 있는 요소, 홀수 인덱스가 있는 요소를 선택합니다.

• nth-child(even/odd): 각 상위 요소 아래의 인덱스 값이 짝수(홀수)인 요소를 선택할 수 있습니다.

• nth-child(2): 각 상위 요소 아래에서 인덱스 값이 2인 요소를 선택할 수 있습니다.

• nth-child(3n): 각 상위 요소 아래의 인덱스 값이 3의 배수인 요소를 선택할 수 있습니다.

• nth-child(3n + 1): 각 상위 요소 아래에서 인덱스 값이 3n + 1인 요소를 선택할 수 있습니다.

b) ":first-child", 첫 번째 하위 요소를 선택합니다.

c) “:last-child”, 마지막 하위 요소를 선택합니다.

d) ":only-child"는 상위 요소에 이 하위 요소만 있는 유일한 하위 요소를 선택합니다.

6. 양식 필터 선택기

양식 요소의 필터 선택기를 선택하세요.

a) ":input"은 모든 , , <select> 및 <button> 요소를 선택합니다. </p> <p>b) “:text”, 모든 텍스트 상자 요소를 선택합니다. </p> <p>c) “:password”, 모든 비밀번호 상자 요소를 선택합니다. </p> <p>d) ":radio"를 사용하면 모든 라디오 버튼 요소를 선택할 수 있습니다. </p> <p>e) ":checkbox"는 모든 체크박스 요소를 선택합니다. </p> <p>f) “:submit”, 모든 제출 버튼 요소를 선택합니다. </p> <p>g) ":image", 모든 이미지 버튼 요소를 선택합니다. </p> <p>h) ":reset"은 모든 재설정 버튼 요소를 선택합니다. </p> <p>i) “:button”, 모든 버튼 요소를 선택합니다. </p> <p>j) “:file”은 모든 파일 업로드 도메인 요소를 선택합니다. </p> <p>k) ":hidden", 보이지 않는 요소를 모두 선택합니다. </p> <p><strong>7. 양식 개체 속성 필터 선택기</strong></p> <p>양식 요소 속성을 선택하는 필터 선택기입니다. </p> <ul style="list-style-type: disc;"> <li><p> ":enabled"는 사용 가능한 모든 요소를 ​​선택합니다. </p></li> <li><p>":disabled", 모든 비활성화 요소를 선택하세요. </p></li> <li><p>":checked"는 라디오 버튼, 체크박스 등 선택된 모든 요소를 ​​선택합니다. </p></li> <li><p>":selected"는 드롭다운 목록 상자 및 목록 상자와 같이 선택된 모든 요소를 ​​선택합니다. </p></li> </ul> <p>더 많은 프로그래밍 관련 지식을 보려면 <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程学习">프로그래밍 학습</a>을 방문하세요! ! </p><p>위 내용은 jQuery에는 어떤 필터 선택기가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">jquery</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">checkbox</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">对象</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">选择器</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">tr</a><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="코드에 반응을 설치하는 방법" href="http://m.php.cn/ko/faq/463664.html">코드에 반응을 설치하는 방법</a></span><span>다음 기사：<a class="dBlack" title="코드에 반응을 설치하는 방법" href="http://m.php.cn/ko/faq/463692.html">코드에 반응을 설치하는 방법</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/459010.html" title="jQuery는 div 표시, 숨기기 및 텍스트 채우기를 구현합니다." class="aBlack">jQuery는 div 표시, 숨기기 및 텍스트 채우기를 구현합니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/463507.html" title="jquery를 기반으로 작성된 4가지 유형의 js 감지 방법과 도구 방법을 소개합니다." class="aBlack">jquery를 기반으로 작성된 4가지 유형의 js 감지 방법과 도구 방법을 소개합니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/463558.html" title="jQuery PrimeUI란 무엇입니까?" class="aBlack">jQuery PrimeUI란 무엇입니까?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/463609.html" title="vue에 jquery를 도입하는 방법에 대한 간략한 토론" class="aBlack">vue에 jquery를 도입하는 방법에 대한 간략한 토론</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/463635.html" title="jquery에서 size()와 길이의 차이점은 무엇입니까?" class="aBlack">jquery에서 size()와 길이의 차이점은 무엇입니까?</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>