Comment obtenir la valeur de span dans jquery-js tutoriel-php.cn

Comment obtenir la valeur de span dans jquery

藏色散人

Libérer： 2020-11-17 10:22:51

original

7440 Les gens l'ont consulté

Comment obtenir la valeur span avec jquery : créez d'abord un exemple de code frontal ; puis définissez le span ; enfin, transmettez "$(document).ready(function(){$("button").click( function() {..}}" pour obtenir la valeur de span.

Comment obtenir la valeur de span dans jquery

Recommandé : "Tutoriel de base de JavaScript "

Jetons d'abord un coup d'œil à un exemple. L'exemple de code est le suivant :

<html>
  <head>
    <SCRIPT language=JavaScript src="js/jquery.min.js"></SCRIPT>
    <SCRIPT language=JavaScript>
       var test1=$("#spId").val();
       var test2=$("#spId").html();
       var test3=$("#spId").text();
     alert("val的值："  + test1);
     alert("html的值：" + test2);
     alert("text的值：" + test3);
    </script>
  </head>
  <body>
     <span id="spId">aaaa</span>
  </body>
</html>

Copier après la connexion

Le résultat de l'alerte est le suivant

[valeur val : non définie]

[valeur html : null]

[valeur texte : ]

Aucune des trois méthodes ci-dessus n'a obtenu l'effet souhaité value. La raison pour laquelle ils ne l'ont pas obtenu était parce quehtml est analysé de haut en bas lors de l'analyse en $("#spId. ") en js, le span ci-dessous n'existe pas encore, bien sûr vous ne pouvez pas l'obtenir.
Si vous le modifiez comme suit :

<html>
  <head>
    <SCRIPT language=JavaScript src="js/jquery.min.js"></SCRIPT>    
  </head>
  <body>
     <span id="spId">aaaa</span>
     <SCRIPT language=JavaScript>
       var test1=$("#spId").val();
       var test2=$("#spId").html();
       var test3=$("#spId").text();
       alert("val的值："  + test1);
       alert("html的值：" + test2);
       alert("text的值：" + test3);
     </script>
  </body>
</html>

Copier après la connexion

js est analysé après span. De plus, jquery est utilisé. La fonction ready contient ces codes, peu importe où ils sont placés, sa fonction est d'exécuter les js inclus uniquement après le chargement de la page entière, comme : <🎜. >

<script type="text/javascript">
   $(document).ready(function(){
       var test1=$("#spId").val();
       var test2=$("#spId").html();
       var test3=$("#spId").text();
       alert("val的值："  + test1);
       alert("html的值：" + test2);
       alert("text的值：" + test3);

Copier après la connexion

   });
</script>

Copier après la connexion

Par conséquent, le réglage et l'acquisition du span sont les suivants :

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
       $("#spId").text("testSpan");
       alert("text的值：" + $("#spId").text())
  });
});
</script>
</head>
<body>
<p><span id="spId"><a href="#">aaaa</a></span></p>
<button>切换</button>
</body>
</html>

Copier après la connexion

Si souhaitez obtenir le code html, changez simplement le texte en html,

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
       alert("text的值：" + $("#spId").text())
       alert("html的值：" + $("#spId").html())
  });
});
</script>
</head>
<body>
<p><span id="spId"><a href="#">aaaa</a></span></p>

<button>切换</button>
</body>
</html>

Copier après la connexion

Définissez le HTML et obtenez le HTML, comme suit

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
       alert("text的值：" + $("#spId").text() + "\n" +
             "html的值：" + $("#spId").html() )

       $("#spId").text("testSpan")

       alert("text的值：" + $("#spId").text() + "\n"+
             "html的值：" + $("#spId").html() )

       $("#spId").html("<p>testSpantest</p>")

       alert("text的值：" + $("#spId").text() + "\n"+
             "html的值：" + $("#spId").html() )
  });
});
</script>
</head>
<body>
<p><span id="spId"><a href="#">初期值</a></span></p>

<button>切换</button>
</body>
</html>

Copier après la connexion

Résultat :

三、注意点：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
       <span style="background-color: rgb(255, 204, 204);">$("#spId").text("testSpan");</span>
       alert("text的值：" + $("#spId").text())
       <span style="background-color: rgb(255, 204, 153);">alert("html的值：" + $("#spId").html())</span>
  });
});
</script>
</head>
<body>
<p><span id="spId"><a href="#">aaaa</a></span></p>

<button>切换</button>
</body>
</html>

Copier après la connexion

结果