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