Details of the content filter selector of the jquery selector

First, write out the HTML structure of the DOM element:

<style type="text/css">
    
    .highlight{   
            background-color: gray
    }
</style>

<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, : the contains (text)
Select the element that contains the text content as "text"

$("div:contains('John')").addClass("highlight"); //Find all divs that contain "John"

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127093134.png ">
Second, the: the empty
Selects an empty element that does not contain any children or text
Review the element in chrome to see that the class style of div as empty has changed

$("div:empty").addClass("highlight");

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127093144.png ">
And three: from the selector ()
Select the element that contains the element that the selector matches

$("div:has(p)").addClass("highlight"); //Find all div elements that contain p

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127093151.png ">

Fourth, the: the parent
Select an element tag that contains child elements or text

$("div:parent").addClass("highlight");  //Find all divs that contain child elements or text

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127093159.png ">