jQuery의 필터 선택기는 무엇입니까?
- yulia원래의
- 2018-09-18 16:02:131599검색
jQuery에는 자식 요소 선택자, 하위 요소 선택자, 필터 선택자 등 많은 선택자가 있습니다. 이 글에서는 jQuery의 필터 선택자에 대해 설명하겠습니다. 참고해 보세요.
:first 및 :last 필터 선택기
:first는 동일한 태그가 있는 요소 그룹에서 첫 번째 요소를 가져옵니다.
:last는 동일한 태그가 있는 요소 그룹에서 마지막 요소를 가져옵니다.
예:
<body>
<div>改变最后一行"苹果"背景颜色：</div>
<ol>
<li>葡萄</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
<li>苹果</li>
</ol>
<script type="text/javascript">
$("li:last").css("background-color", "red");
</script>:contains(text) 필터 선택기
:contains(text)는 지정된 문자열을 포함하는 모든 요소를 선택합니다. 일반적으로 "텍스트" 문자열 내용을 포함하는 모든 요소 개체를 얻기 위해 다른 요소와 조합하여 사용됩니다. 예:
<body>
<div>改变包含"jQuery"字符内容的背景色：</div>
<ol>
<li>强大的"jQuery"</li>
<li>"javascript"也很实用</li>
<li>"jQuery"前端必学</li>
<li>"java"是一种开发语言</li>
<li>前端利器——"jQuery"</li>
</ol>
<script type="text/javascript">
$("li:contains('jQuery')").css("background", "green");
</script>
</body>
:has(selector) filter selector
:has(selector) 필터 선택기의 기능은 선택기에 지정된 요소 이름을 포함하는 모든 요소를 가져오는 것입니다. 예:
<body>
<div>改变包含"label"元素的背景色：</div>
<ol>
<li><p>我是P先生</p></li>
<li><label>L妹纸就是我</label></li>
<li><p>我也是P先生</p></li>
<li><label>我也是L妹纸哦</label></li>
<li><p>P先生就是我哦</p></li>
</ol>
<script type="text/javascript">
$("li:has('label')").css("background-color", "blue");
</script>
</body>
: 숨겨진 필터 선택기
:숨겨진 필터 선택기의 기능은 모든 보이지 않는 요소를 얻는 것입니다. 이러한 보이지 않는 요소에는 유형 속성 값이 Hidden인 요소가 포함됩니다. 예:
<body>
<h3>显示隐藏元素的内容</h3>
<input id="hidstr" type="hidden" value="我已隐藏起来"/>
<div></div>
<script type="text/javascript">
var $strHTML = $("input:hidden").val();
$("div").html($strHTML);
</script>
</body>
:visible filter selector
:visible filter 선택기 표시되는 모든 요소를 가져옵니다. 즉, 요소의 표시 속성 값이 "없음"으로 설정되지 않은 한 이 선택기를 통해 모든 요소를 가져올 수 있습니다.예:
<body>
<h3>修改可见“水果”的背景色</h3>
<ul>
<li style="display:none">橘子</li>
<li style="display:block">香蕉</li>
<li style="display:">葡萄</li>
<li>苹果</li>
<li style="display:none">西瓜</li>
</ul>
<script type="text/javascript">
$("li:visible").css("background-color","blue");
</script>
</body>
[attribute=value] 속성 선택기
[attribute=value] 속성 선택기의 기능은 정확히 동일한 속성 이름과 속성 값을 가진 모든 요소를 가져오는 것입니다. 여기서 []는 속성 선택기 괄호로 묶인 매개변수 속성은 속성 이름을 나타내고 값 매개변수는 속성 값을 나타냅니다.예:
<body>
<h3>改变"title"属性值为"蔬菜"的背景色</h3>
<ul>
<li title="蔬菜">茄子</li>
<li title="水果">香蕉</li>
<li title="蔬菜">芹菜</li>
<li title="水果">苹果</li>
<li title="水果">西瓜</li>
</ul>
<script type="text/javascript">
$("li[title='蔬菜']").css("background-color", "green");
</script>
</body>
[attribute!=value] 속성 선택기
[attribute!=value] 속성 선택기의 기능은 속성 이름을 포함하지 않거나 속성과 다른 모든 요소를 가져오는 것입니다. 이름 및 속성 값. 여기서 []는 속성 선택자에만 사용되는 대괄호 기호입니다. 매개변수 속성은 속성 이름을 나타내고, 값 매개변수는 속성 값을 나타냅니다.[attribute*=value] 속성 선택기
[attribute*=value] 속성 값에 지정된 내용을 포함하는 모든 요소를 가져올 수 있습니다. 여기서 []는 속성 선택기 전용 대괄호 기호이고, 매개변수 속성은 속성 이름을 나타내고, 값 매개변수는 해당 속성 값을 나타냅니다.예:
<body>
<h3>改变"title"属性值包含"果"的背景色</h3>
<ul>
<li title="蔬菜">茄子</li>
<li title="水果">香蕉</li>
<li title="蔬菜">芹菜</li>
<li title="人参果">小西红柿</li>
<li title="水果">西瓜</li>
</ul>
<script type="text/javascript">
$("li[title*='果']").css("background-color", "green");
</script>
</body>
:first-child 하위 요소 필터 선택기
:first-child 하위 요소 필터 선택기는 각 상위 요소에서 반환된 첫 번째 하위 요소를 가져올 수 있으며 일반적으로 사용되는 여러 요소입니다. 수집 데이터 선택 처리.예:
<body>
<h3>改变每个"蔬菜水果"中第一行的背景色</h3>
<ol>
<li>芹菜</li>
<li>茄子</li>
<li>萝卜</li>
<li>大白菜</li>
<li>西红柿</li>
</ol>
<ol>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>苹果</li>
<li>西瓜</li>
</ol>
<script type="text/javascript">
$("li:first-child").css("background-color", "green");
</script>
</body>
:last-child 하위 요소 필터링 선택기
:first-child 하위 요소 필터링 선택기의 기능과 달리 :last-child 하위 요소 필터링 선택기의 기능은 다음의 내용을 가져오는 것입니다. 각 상위 요소 반환된 마지막 하위 요소도 컬렉션이며, 이는 일반적으로 여러 컬렉션 데이터의 선택 처리에 사용됩니다.위 내용은 jQuery의 필터 선택기는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.