jquery Content Filter Selector Learning Tutorial _jquery

The filter rules for content filters are primarily contained in child elements or text content.

$ (' Div:contains (' xxx ') '). CSS (' background ', ' #ccc '); Select element text node contains the element 
 
$ (' div:empty ') of the xxx text. css (' background ', ' #ccc ');//Select Empty element 
 
$ (' Ul:has (. red) '). CSS (' Background ', ' #ccc '); Select a child element containing the element 
 
$ (':p arent ') of the class is red. CSS (' background ', ' #ccc ');//Select Non-empty element 

JQuery provides a has () method to improve: Has filter performance:

$ (' ul '). has ('. Red '). CSS (' background ', ' #ccc '); Select a child element containing the element with class is red 

JQuery provides a method of name and parent similarity, but this method does not select elements that contain child elements or text, but rather gets the parent element of the current element, which returns the collection of elements.

$ (' Li '). Parent (). CSS (' background ', ' #ccc '); Select the parent element of the current element 
 
$ (' Li '). Parents (). CSS (' background ', ' #ccc ');//Select the parent element of the current element and the ancestor element 
 
$ (' Li '). Parentsuntil (' div '). CSS (' background ', ' #ccc '); Select Current element to encounter Div parent element stop 

The filtering rules of the jquery Content filter selector are mainly used in the elements of the DOM or its textual content, including the following four filtering methods:

To better learn, write the HTML structure of several DOM elements first:

<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>

A, Content filter selector--:contains (text)
selector:

E:contains (text)//e refers to the DOM element,: Contains (text) contains the text, and text is the string that specifies the lookup
Describe:

Select an element that contains the text content as "text"

return value:

Collection elements

Instance:

<script type= "Text/javascript" >
 $ (document). Ready (function () {
  $ (' Div:contains (John) '). CSS (' Background ', ' #f36 ');
</script>

Function:

Change the background color of a DIV element containing the text "John"

Effect:

Back in the previous HTML structure, we can see that there are two div elements that contain the "John" text, because we are mainly changing the background color of the div containing the text "John", we can see in the effect that the background color of the first and third div of us becomes "#f36 "To get a better sense of the changes, you can see the changes in HTML through the Firebug tool in Firefox:

Second, Content filter selector--:empty

Selector:

E:empty//where E is a DOM element,: Empty refers to a DOM element that does not contain any child elements or text
Describe:

Select an empty element that does not contain any child elements or text

return value:

Collection elements

Instance:

<script type= "Text/javascript" >
 $ (document). Ready (function () {
  $ (' Div:empty '). CSS (' background ', ' # F36 ');
</script>

Function:

Change the background color of a div that contains no child elements (including text elements), in other words, to change the background color of a div that doesn't contain anything.

Effect:

Although none of the elements in the preceding HTML contains child elements, some contain text elements, and only one div and one P element has no child elements and no textual content. In addition to our example, we only have to change the background color of the div without the child elements and text content, so our effect only div plus the "#f36" background color, also let us look at the changes in HTML:

Third, Content filter selector--:has (selector)

Selector:

E:has (selector)//where E is tagged with the effect DOM element,: Has (selector) contains a selector, selector the selector for filtering

Describe:

Select the element that contains the element that the selector matches

return value:

Collection elements

Instance:

<script type= "Text/javascript" >
 $ (document). Ready (function () {
  $ (' Div:has (P) '). CSS (' background ', ' # F36 ');
</script>

Function:
Change the background color of a DIV element that contains a child element p
Effect:

In our case, only a div contains the child element p, so the background color of the div element that matches this requirement is set to "#f36", and the changed HTML:

Iv. Content Filter Selector--:p arent

Selector:

E:parent//e is a valid DOM element label,:p arent contains child elements or textual content.

Describe:

Select an element label that contains child elements or text

return value:

Collection elements

Instance:

<script type= "Text/javascript" >
 $ (document). Ready (function () {
  $ (' div:parent '). CSS (' background ', ' # F36 ');
</script>

Function:
Changes the background color of a div that contains child elements or text content. In other words, the background color will change only if the div contains any of the child elements or any content.
Effect:

This example, there is only one div and one P element that does not contain any child elements and text content, because we are here to set up the div, so the effect shows that the background color of the Div, except for the two without the child element and any content, becomes "#f36" and the changed HTML:

About the Content filter selector in the jquery selector, simply speaking here, if you want to get a deeper understanding of its specific usage, you can do a few more examples of local practice. If you are interested in other selector usage of the jquery selector, you can learn about the specific functions and usage of the other selectors in this site, and you can always view the contents of the site update.