分享

jQuery修改标签的text显示内容或value值

 梦想的图书馆1 2016-11-14

修改常见标签元素:超链接<a></a>标签、<span>标签、<div>标签以及form表单常用input标签内容。

  1. <html xmlns="http://www./1999/xhtml">  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <title>jquery 测试</title>  
  5.   
  6. <script type="text/javascript" src="jquery-1.8.3.min.js"></script>  
  7.   
  8. </head>  
  9. <body>  
  10.   
  11. <div>  
  12. jquery修改a标签的href链接和文字,先点击下面链接<br />然后点击"改变"按钮,然后再点击一次下面的链接,注意两次打开页面的不同:<br />  
  13. A<a href="http://i./" id="a1">原文</a>   
  14. <input type="button" value="改变A" id="a11" /><p></p>  
  15.   
  16. Span<span id="span1">原文</span>   
  17. <input type="button" value="改变span" id="span11" /><p></p>  
  18.   
  19. Div<div id="div1" target="_blank">原文</div>   
  20. <input type="button" value="改变DIV" id="div11" />  
  21. </div>  
  22. <p></p>  
  23. input<input type="text" name="text1" id="text1" value="111">  
  24. <input type="button" value="改变input" id="text11" /><p></p>  
  25.   
  26. textarea <input type="textarea" name="textarea1" id="textarea1" value="111">  
  27. <input type="button" value="改变textarea" id="textarea11" /><p></p>  
  28.   
  29. <input type="button" value="改变button" id="button11" /><p></p>  
  30. <script type="text/javascript">  
  31. $("#a11").bind("click",  
  32.     function (){  
  33.         $('#a1').attr('href','http://www.baidu.com');   
  34.         alert("改变了超链接链接地址")  
  35.         $("#a1").text('首页1');  
  36.         alert("改变显示的内容1")  
  37.         $("#a1").html('首页2');  
  38.         alert("改变显示的内容2")  
  39.     })  
  40. $("#span11").bind("click",  
  41.     function (){  
  42.         $("#span1").html('首页');  
  43.         alert("改变显示内容")  
  44.         $("#span1").text('首页');  
  45.     })  
  46. $("#div11").bind("click",  
  47.     function (){  
  48.         $("#div1").html('首页1');  
  49.         alert("改变显示内容1")  
  50.         $("#div1").text('首页2');  
  51.         alert("改变显示内容2")  
  52.     })  
  53. $("#text11").bind("click",  
  54.     function (){  
  55.         $("#text1").val('首页');  
  56.     })  
  57. $("#textarea11").bind("click",  
  58.     function (){  
  59.         $("#textarea1").val('首页');    
  60.     })  
  61. $("#button11").bind("click",  
  62.     function (){  
  63.         $("#button11").val('首页');     
  64.     })        
  65.   
  66. </script>  
  67.   
  68. </body>  
  69. </html>  
附源代码下载:源码下载

解压后用浏览器打开即可。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多