JQuery 内容过滤选择器

一时失言乱红尘 2024-02-17 18:09 55阅读 0赞

HTML页面结构:

<body>
    <a id="a1">contains(text)</a>  
    <a id="a2">empty</a> 
    <a id="a3">has(selector)</a> 
    <a id="a4">parent</a> 
    <hr/>
    <h2>内容过滤选择器
    </h2>
    <div>Test Resign</div>
    <div>JIMD Martin</div>
    <div>Malcom Test Sinclair</div>
    <div>M.Ohn</div>
    <div></div>
    <p></p>
    <div><p>Has p</p></div>
    </body>

**:contains(text) 选取含有文本内容为"text"的元素**

$("#a1").click(function(){
    		//查找所有包含 "Test" 的 div 元素
    		$("div:contains('Test')").css("background","cyan");
    		  
    	   });

![Center][]

**:empty 选取不含任何子元素或文本的空元素**

$("#a2").click(function(){
    		
    		$("div:empty").css("background","cyan");
    		  
    	   });

**![Center 1][]**

**通过FireFox的Firebug可以查看: 此时的<div></div>标签已加入了样式!**

**![Center 2][]**

**:has(selector)选取含有选择器所匹配的元素的元素**

$("#a3").click(function(){
    		
    		$("div:has(p)").css("background","cyan");
    		  
    	   });

![Center 3][]  
**:parent选取含有子元素或者文本的元素标签**

$("#a4").click(function(){
    		
    		$("div:parent").css("background","cyan");
    		  
    	   });

![Center 4][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3ead926ccf254469a9639dd07f5587f6.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/dfdb77395b6040fc9d1598e741b686ba.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a68612754b8d41d0bdf72bdf56d81026.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2d7189c5c84d42bfb2c6a97fa6f2fe13.png
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1c27923b22b247a4ab7de5c4bc9997b4.png