Home >Web Front-end >JS Tutorial >Detailed explanation of examples of jQuery :empty selector

Detailed explanation of examples of jQuery :empty selector

黄舟Original: 2017-06-23 11:18:441382browse

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:






脚本之家






  html专区
  div+css专区
  Jquery专区
  Javascript专区

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The difference between jquery :has() and :contains() selectorsNext article：The difference between jquery :has() and :contains() selectors

See more

Detailed explanation of examples of jQuery :empty selector

Related articles