jQuery 콘텐츠 필터 선택기

jQuery 콘텐츠 필터링 선택기의 필터링 규칙은 주로 DOM 요소에 포함된 하위 요소 또는 해당 텍스트 콘텐츠에 적용됩니다.

<div>John Resign</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J.Ohn</div>
<div></div>
<p></p>
<div><p>Has p</p></div>

1. 콘텐츠 필터링 선택기 ——:contains(text)

선택기:

E:contains(text)  //E是指DOM元素，:contains(text)包含的文本，text是指定查找的字符串

설명:

텍스트 콘텐츠 "text"를 포함하는 요소 선택

반환 값:

컬렉션 요소

Instance :

<script type="text/javascript">   $(document).ready(function(){
      $('div:contains(John)').css('background','#f36');
   });</script>

기능:

텍스트 "John"이 포함된 div 요소의 배경색 변경

효과:

이전 HTML 구조로 돌아가서 두 개의 div가 있음을 볼 수 있습니다. it 요소에는 "John"이라는 텍스트가 포함되어 있습니다. 여기서는 주로 "John"이라는 텍스트가 포함된 div의 배경색을 변경하기 때문에 첫 번째와 세 번째 div의 배경색이 "#f36"이 되는 효과를 볼 수 있습니다. , 변경 사항을 더 잘 이해하기 위해 Firefox의 Firebug 도구를 통해 HTML의 변경 사항을 볼 수 있습니다.

2. 콘텐츠 필터링 선택기 - :empty

선택기 :

E:empty //其中E为DOM元素，:empty是指DOM元素中不包含任何子元素或文本

설명:

하위 요소나 텍스트가 없는 빈 요소를 선택하세요

반환 값:

Collection elements

Instance:

<script type="text/javascript">   $(document).ready(function(){
      $('div:empty').css('background','#f36');
   });</script>

Function:

변경 없음 하위 요소가 포함된 div의 배경색( 텍스트가 아닌 요소 포함), 즉 아무것도 포함하지 않은 div의 배경색 변경

효과:

이전 HTML의 모든 요소에는 하위 요소가 없지만 일부 요소에는 텍스트 요소가 포함되어 있음 . 하위 요소와 텍스트 콘텐츠가 없는 하나의 div 및 p 요소만 있습니다. 또한 이 예에서는 하위 요소와 텍스트 콘텐츠가 포함되지 않은 div의 배경색만 변경했으므로 실제로는 div에만 "#f36"의 배경색이 적용됩니다. . HTML 변경 사항:

3. 콘텐츠 필터링 선택기 - :has(selector)

Selector:

E:has(selector)  //其中E为有效果DOM元素标签，:has(selector)含有一个选择器，selector用于筛选的选择器

Description:

선택기 요소와 일치하는 요소를 포함하는 요소 선택

반환 값:

컬렉션 요소

인스턴스:

<script type="text/javascript">   $(document).ready(function(){
      $('div:has(p)').css('background','#f36');
   });</script>

기능:

하위 요소가 포함된 div 요소의 배경색 변경 P

효과:

이 예에는 하나만 있습니다. div 하위 요소 P를 포함하므로 이 요구 사항을 충족하는 div 요소가 포함되고 배경색은 "#f36"으로 설정됩니다. 변경된 HTML:

4. 콘텐츠 필터링 선택기 - :parent

선택기:

E:parent  //E为有效的DOM元素标签，:parent含有子元素或文本内容

설명:

하위 요소 또는 텍스트가 포함된 요소 태그 선택

반환 값:

컬렉션 요소

인스턴스:

<script type="text/javascript">   $(document).ready(function(){
      $('div:parent').css('background','#f36');
   });</script>

기능:

변경 하위 요소나 텍스트 콘텐츠가 포함된 div의 배경색입니다. 즉, div에 하위 요소나 콘텐츠가 포함되어 있으면 배경색이 변경됩니다.

효과:

이 예에서는 하위 요소와 텍스트 콘텐츠가 포함되지 않은 div와 p 요소가 하나만 있습니다. 여기서 div를 설정하므로 효과에 표시됩니다. , 이 두 가지를 제외하고 하위 요소와 모든 콘텐츠가 포함된 div의 배경색은 "#f36"으로 변경되었습니다. HTML은