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>

在我们这个实例中，只有一个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 />