jQuery content filter selector learning tutorial_jquery

The filtering rules of the content filter are mainly based on the contained sub-elements or text content.

$('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 provides a has() method to improve the performance of the :has filter:

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

jQuery provides a method with a similar name to :parent, but this method does not select elements containing child elements or text, but obtains the parent element of the current element and returns a collection of elements.

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

The filtering rules of jQuery content filtering selector are mainly applied to sub-elements or their text content contained in DOM elements. They mainly include the following four filtering methods:

In order to learn better, first write the HTML structure of several DOM elements:

<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. Content filtering selector——:contains(text)
Selector:

E:contains(text) //E refers to the DOM element, the text contained in :contains(text), and text is the string specified to be searched
Description:

Select elements with text content "text"

Return value:

Collection elements

Example:

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

Function:

Change the background color of the div element containing the text "John"

Effect:

Going back to the previous HTML structure, we can see that two of the div elements contain the text "John", because here we mainly change the background color of the div containing the text "John", so everyone is in the effect It can be seen that the background color of our first and third div has changed to "#f36". In order to better understand the changes, you can see the changes in HTML through the Firebug tool in Firefox:

2. Content filtering selector——:empty

Selector:

E:empty //Where E is a DOM element, :empty means that the DOM element does not contain any sub-elements or text
Description:

Select an empty element without any child elements or text

Return value:

Collection elements

Example:

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

Function:

Change the background color of a div that does not contain child elements (including no text elements), in other words, change the background color of a div that does not contain anything

Effect:

Although all the elements in our previous html do not contain child elements, some contain text elements. There is only one div and one p element with no child elements and no text content. In addition, in our example, we only changed the background color of the div that does not contain child elements and text content, so in our effect only the div has the background color of "#f36". Let's take a look. HTML changes:

3. Content filtering selector——:has(selector)

Selector:

E:has(selector) //E is the effective DOM element tag, :has(selector) contains a selector, and selector is used for filtering

Description:

Select elements containing the element matched by the selector

Return value:

Collection elements

Example:

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

Function:
Change the background color of the div element containing the child element P
Effect:

在我们这个实例中，只有一个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选择器的其他选择器用法感兴趣的话，可以在本站中了解其他的选择器的具体功能和用法，同时也可以随时观注本站的内容更新。