Home > Article > Web Front-end > Detailed explanation of examples of jQuery :empty selector
Overview
Match all empty elements that do not contain child elements or text
Example
Description:
Find all empty elements that do not contain child elements or text Empty element
HTML code:
<table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table>
jQuery code:
$("td:empty")
Result:
[ <td></td>, <td></td> ]
This selector matches all An empty element containing child elements or text.
Note: Spaces also belong to elements included in the selector.
Syntax structure:
$(":empty")
This selector is generally used in conjunction with other selectors, such as Class selector and Element selectoretc. For example:
Copy the code The code is as follows:
$("li:empty").animate({width:"200px"})
The above code can set the width of the empty li element in the li element collection to 200px in a custom animation.
Example code:
Example one:
脚本之家
Example two:
<!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>
Because the above code does not specify the use with the :empty selector selector, so it is used with the * selector by default, and can set the length of empty elements in all elements to 200px in a custom animation.
The above is the detailed content of Detailed explanation of examples of jQuery :empty selector. For more information, please follow other related articles on the PHP Chinese website!