jQuery 콘텐츠 필터 선택기 학습 tutorial_jquery

콘텐츠 필터의 필터링 규칙은 주로 포함된 하위 요소 또는 텍스트 콘텐츠를 기반으로 합니다.

$('div:contains("xxx")').css('background', '#ccc'); //选择元素文本节点含有xxx 文本的元素 
 
$('div:empty').css('background', '#ccc'); //选择空元素 
 
$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素 
 
$(':parent').css('background', '#ccc'); //选择非空元素 

jQuery는 :has 필터의 성능을 향상시키기 위해 has() 메서드를 제공합니다.

$('ul').has('.red').css('background', '#ccc'); //选择子元素含有class 是red 的元素 

jQuery에서는 :parent와 비슷한 이름의 메서드를 제공하지만 이 메서드는 하위 요소나 텍스트가 포함된 요소를 선택하지 않고 현재 요소의 상위 요소를 가져와 요소 컬렉션을 반환합니다.

$('li').parent().css('background', '#ccc'); //选择当前元素的父元素 
 
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素 
 
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到div 父元素停止 

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

더 잘 배우려면 먼저 여러 DOM 요소의 HTML 구조를 작성하세요.

<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"인 요소를 선택하세요

반환 값:

컬렉션 요소

예:

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

기능:

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

효과:

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

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

선택자:

E:empty //E가 DOM 요소인 경우 :empty는 DOM 요소에 하위 요소나 텍스트가 포함되어 있지 않음을 의미합니다.
설명:

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

반환 값:

컬렉션 요소

예:

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

기능:

하위 요소가 포함되지 않은(텍스트 요소 포함) div의 배경 색상을 변경합니다. 즉, 아무것도 포함되지 않은 div의 배경 색상을 변경합니다.

효과:

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

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

선택자:

E:has(selector) //E는 효과적인 DOM 요소 태그이고, :has(selector)에는 선택기가 포함되어 있으며 선택기는 필터링에 사용됩니다.

설명:

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

반환 값:

컬렉션 요소

예:

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

기능:
하위 요소 P를 포함하는 div 요소의 배경색 변경
효과:

在我们这个实例中，只有一个div中包含了子元素P，所以包含了符合这个要求的div元素其背景色被设置为“#f36”，改变后的HTML:

四、内容过滤选择器——:parent

选择器：

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

描述：

选取含有子元素或者文本的元素标签

返回值：

集合元素

实例：

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

功能：
改变含有子元素或文本内容的div的背景色。换句话说只在div包含了任何一个子元素或者任何内容，其背景色都将会改变。
效果：

本例子，只有一个div和一个p元素中不包含任何子元素和文本内容，因为我们这里是对div进行设置，所以效果中显示，除了这两个不含有子元素和任何内容的div的背景色都变成了“#f36”，变化后的HTML：

有关于jQuery选择器中的内容过滤选择器，就简单的说到这里，大家如果想更深的体会其具体的用法，可以在本地多做几个实例练习。如果大家对jQuery选择器的其他选择器用法感兴趣的话，可以在本站中了解其他的选择器的具体功能和用法，同时也可以随时观注本站的内容更新。