Explication détaillée des exemples de jQuery : sélecteur vide-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Explication détaillée des exemples de jQuery : sélecteur vide

Jun 23, 2017 am 11:18 AM

empty jquery 实例详解选择器

Aperçu

Correspond à tous les éléments vides qui ne contiennent pas d'éléments enfants ou de texte

Exemple

Description :

Trouve tous les éléments vides qui ne contiennent pas contenir des éléments enfants ou du texte Élément vide

Code HTML :

&lt;table&gt; &lt;tr&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Value 2&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt;

Copier après la connexion

Code jQuery :

$(&quot;td:empty&quot;)

Copier après la connexion

Résultat :

[ &lt;td&gt;&lt;/td&gt;, &lt;td&gt;&lt;/td&gt; ]

Copier après la connexion

Ce sélecteur correspond à tous les éléments vides qui ne contiennent aucun élément enfant ni texte.

Remarque : Les espaces sont également inclus dans les éléments du sélecteur.

Structure grammaticale :

$(&quot;:empty&quot;)

Copier après la connexion

Ce sélecteur est généralement utilisé en conjonction avec d'autres sélecteurs, tels que le sélecteur de classe et le dispositif de sélection d'élément etc. Par exemple :

Copiez le code comme suit :

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

Copier après la connexion

Le code ci-dessus peut définir la largeur de l'élément li vide dans la collection d'éléments li à 200 px dans une animation personnalisée. .

Exemple de code :

Exemple un :

<!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;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $(&quot;li:empty&quot;).animate({width:&quot;200px&quot;}); 
  }) 
}) 
</script>
</head>
<body>
<ul>
  <li>html专区</li>
  <li>div+css专区</li>
  <li>Jquery专区</li>
  <li>Javascript专区</li>
  <li></li>
</ul>
<button>点击查看效果</button>
</body>
</html>

Copier après la connexion

Exemple deux :

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot; utf-8&quot;&gt;
&lt;meta name=&quot;author&quot; content=&quot;http://www.jb51.net/&quot; /&gt;
&lt;title&gt;脚本之家&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
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;
}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;mytest/jQuery/jquery-1.8.3.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt; 
$(document).ready(function(){ 
  $(&quot;button&quot;).click(function(){ 
    $(&quot;*:empty&quot;).animate({width:&quot;200px&quot;}); 
  }) 
}) 
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul&gt;
  &lt;li&gt;html专区&lt;/li&gt;
  &lt;li&gt;div+css专区&lt;/li&gt;
  &lt;li&gt;Jquery专区&lt;/li&gt;
  &lt;li&gt;Javascript专区&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;/div&gt;
&lt;button&gt;点击查看效果&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Puisque le code ci-dessus ne spécifie pas le sélecteur :vide Sélecteur utilisé conjointement, il est donc utilisé par défaut avec le sélecteur *, qui peut définir la longueur des éléments vides dans tous les éléments à 200 px dans une animation personnalisée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn