Rumah > Artikel > hujung hadapan web > jQuery :empty选择器的实例详解
概述
匹配所有不包含子元素或者文本的空元素
示例
描述:
查找所有不包含子元素或者文本的空元素
HTML 代码:
<table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table>
jQuery 代码:
$("td:empty")
结果:
[ <td></td>, <td></td> ]
此选择器匹配所有不包含子元素或者文本的空元素。
注意:空格也属于选择器包含的元素。
语法结构:
$(":empty")
此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如:
复制代码代码如下:
$("li:empty").animate({width:"200px"})
以上代码能够将li元素集合中的空li元素的宽度以自定义动画的方式设置为200px。
实例代码:
实例一:
脚本之家
实例二:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>脚本之家</title> <style type="text/css"> li { list-style-type:none; width:150px; height:30px; border:1px solid red; } .run{background-color:green;} .static{background-color:#603;} div{ width:100px; height:30px; background-color:blue; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("*:empty").animate({width:"200px"}); }) }) </script> </head> <body> <ul> <li>html专区</li> <li>div+css专区</li> <li>Jquery专区</li> <li>Javascript专区</li> <li></li> </ul> <div></div> <button>点击查看效果</button> </body> </html>
由于以上代码并没有指定与:empty选择器相配合使用的选择器,所以就默认和*选择器配合使用,能够将所有元素中的空元素的长度以自定义动画方式设置为200px。
Atas ialah kandungan terperinci jQuery :empty选择器的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!