jQuery中:empty選擇器用法實例

更新時間：2014年12月30日 11:53:27 投稿：shichen2014

這篇文章主要介紹了jQuery中:empty選擇器用法,實例分析了:empty選擇器的功能、定義及匹配空元素的用法技巧,具有一定的參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery中empty選擇器用法。分享給大家供大家參考。具體分析如下：

此選擇器匹配所有不包含子元素或者文本的空元素。

注意:空格也屬于選擇器包含的元素。

語法結(jié)構(gòu):

復(fù)制代碼代碼如下:

$(":empty")

此選擇器一般也要和其他選擇器配合使用，比如類選擇器和元素選擇器等等。例如:

復(fù)制代碼代碼如下:

$("li:empty").animate({width:"200px"})

以上代碼能夠?qū)i元素集合中的空li元素的寬度以自定義動畫的方式設(shè)置為200px。

實例代碼:

實例一:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://m.fzitv.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;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("li:empty").animate({width:"200px"}); 

  }) 

}) 

</script>

</head>

<body>

<ul>

  <li>html專區(qū)</li>

  <li>div+css專區(qū)</li>

  <li>Jquery專區(qū)</li>

  <li>Javascript專區(qū)</li>

  <li></li>

</ul>

<button>點擊查看效果</button>

</body>

</html>

實例二:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://m.fzitv.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專區(qū)</li>

  <li>div+css專區(qū)</li>

  <li>Jquery專區(qū)</li>

  <li>Javascript專區(qū)</li>

  <li></li>

</ul>

<div></div>

<button>點擊查看效果</button>

</body>

</html>