jQuery设置和获取span的内容 (详解)
2016-05-20 09:23
996 查看
先看个示例,示例代码如下:
alert的结果 如下
【val的值:undefined】
【html的值:null】
【text的值:】
上面三种都没有取得想要的值,之所以没有取到是因为html是从上往下解析的,在解析到js里的$("#spId")时,下面这个span还不存在,当然就取不到了。
如果改成下面这样
js在span的后面解析,span就有了。另外,jquery的做法是用ready函数包含这些代码,放哪就无所谓了。它的作用就是在加载完整个页面后才执行包含的js,如:
所以,span 的设置和获取如下:
二、
如果想获得html代码,把text换成html就可以了,
设置html,并取得
html, 如下
结果:
三、注意点:
此时
,获取的html()为 【testSpan】,而不是【<a
href="#">testSpan</a>】
<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> <div><span id="spId"><a href="#">aaaa</a></span></div> <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> <div><span id="spId"><a href="#">aaaa</a></span></div> <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> <div><span id="spId"><a href="#">初期值</a></span></div> <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> <div><span id="spId"><a href="#">aaaa</a></span></div> <button>切换</button> </body> </html>结果
此时
,获取的html()为 【testSpan】,而不是【<a
href="#">testSpan</a>】
相关文章推荐
- jQuery中通过ajax调用webservice传递数组参数的问题实例详解
- jQuery+CSS实现的图片滚动效果
- 简单的tab栏切换及遮罩效果demo
- 如何选择jQuery版本 1.x? 2.x? 3.x?
- jquery获取radio选择的tr中的数据
- jquery 1.6 后 checkbox 使用attr("checked"),undefined.
- jQuery踹门笔记@codeSchool
- jquery动画-animate()
- JQuery 多属性选择节点
- js实现windows扫雷(jquery)
- jquery滑动
- jQuery入门(3) 设置DOM属性与获取DOM属性
- Jquery 对象和Dom对象(js) 的异同点
- jQuery入门(2) 获取元素和DOM转换
- jQuery同时操作多个属性
- jquery效果-淡入与淡出效果
- jQuery 获取屏幕高度、宽度
- jquery移除事件
- jquery操作select(取值,设置选中)
- WebStrom 2016.1.1.破解