jquery如何获取span的值

jquery获取span值的方法:首先创建一个前端代码示例;然后设置span;最后通过“$(document).ready(function(){$(\”button\”).click(function(

jquery获取span值的方法:首先创建一个前端代码示例;然后设置span;最后通过“$(document).ready(function(){$("button").click(function(){..}}”方法获取span的值即可。

推荐:《javascript基础教程》

先看个示例,示例代码如下:

<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>

alert的结果 如下

【val的值:undefined】

【html的值:null】

【text的值:】

上面三种都没有取得想要的值,之所以没有取到是因为html是从上往下解析的,在解析到js里的$("#spId")时,下面这个span还不存在,当然就取不到了。 如果改成下面这样

<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>

js在span的后面解析,span就有了。另外,jquery的做法是用ready函数包含这些代码,放哪就无所谓了。它的作用就是在加载完整个页面后才执行包含的js,如:

<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);
   });</script>

一、 所以,span 的设置和获取如下:

<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>

二、

如果想获得html代码,把text换成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>

设置html,并取得 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() + "\\\\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>

结果:

三、注意点:

<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>

结果

此时 ,获取的html()为 【testSpan】,而不是【<a href="#">testSpan</a>】

关于作者: 宏图SEO小编

为您推荐

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注