JQUERY操作html--获取和设置内容、属性、回调函数 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


JQUERY操作html--获取和设置内容、属性、回调函数

2019-9-25 释然 前端及开发文章及欣赏


一:jQuery - 获取内容和属性

1。获得内容 - text()、html() 以及 val()

      text() - 返回所选元素的文本内容

帝皇彩票官网       html() - 返回所选元素的内容(包括 HTML 标记)

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1">圣诞快乐,<b>新年快乐</b></p>   //给p元素里边的文本一部分加上b标签
<button id="b1">显示文本</button>
<button id="b2">显示html</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    
    $("#b1").click(function(){        
    alert(  $("#p1").text() );        //获取文本
        });
        
    $("#b2").click(function(){        
    alert(  $("#p1").html()  );      //获取html内容  结果会包含b标签
    
        });
}); </script>

         val() - 返回表单字段的value值

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip" value="nihao">
<button id="but">显示value值</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    $("#but").click(function(){
        alert($("#ip").val());   结果返回表单元素的value值(nihao)
        
        });

}); </script>

 

2.获取属性 - attr()

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com"></a>
<button id="but">显示元素属性</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
   $("#but").click(function(){
       alert($("#aa").attr("href"));
       });
}); </script>


 


 

二、jQuery - 设置内容和属性

1设置内容和回调函数 - text()、html() 以及 val()

帝皇彩票官网          text() - 设置所选元素的文本内容

         html() - 设置所选元素的内容(包括 HTML 标记)

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1"></p>
<button id="b1">显示文本</button>
<button id="b2">显示html</button>

</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    
    $("#b1").click(function(){   
         
    $("#p1").text("圣诞快乐,<b>新年快乐</b>") ; //设置文本  });
        
    $("#b2").click(function(){    
        
   $("#p1").html("圣诞快乐,<b>新年快乐</b>") ; //设置html内容  结果会包含b标签  });
}); </script>

 text()、html()回调函数

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1">新年快乐</p>
<button id="b1">显示文本</button>
<button id="b2">显示html</button>

</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    
    $("#b1").click(function(){   
         
    $("#p1").text(function(){ return "happy new year";         //调用函数,返回一个新的文本
        }
         ) ;        
        });
        
    $("#b2").click(function(){    
        
   $("#p1").text(function(){ return "happy <b>new</b> year";     //调用函数,返回一个新的文本
        }      
    
       );
       });
}); </script>

帝皇彩票官网      val() - 设置表单字段的value值和回调函数 

帝皇彩票官网  

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip">
<button id="but">显示value值</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    $("#but").click(function(){
        $("#ip").val("happy"); 
        
        });

}); </script>

val()的回调函数

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip">
<button id="but">显示value值</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    $("#but").click(function(){
        $("#ip").val(function(){ return "happay";
            }); 
        
        });

}); </script>

帝皇彩票官网  

2。设置属性  attr()

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com">11111</a>
<button id="but">显示元素属性</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
   $("#but").click(function(){
       alert($("#aa").attr( {  "href":"http://news.baidu.com/"  } ));  //attr()里边,要加{}号  });
}); </script>

 attr()的回调函数

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com"></a>
<button id="but">显示元素属性</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
   $("#but").click(function(){
       alert($("#aa").attr({  "href":function(){return "http://news.baidu.com/" } } )); //attr()里边,要加{}号  }); 
	

}); </script>

蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务。

标签: JQUERY操作html--获取和设置内容、属性、回调函数 « three.js 的简单实例 | jQuery-获取内容和属性»


蓝蓝帝皇彩票官网 http://www.bjhbys.com

  1. 2019年11月(3)
  2. 2019年10月(53)
  3. 帝皇彩票官网2019年9月(48)
  4. 2019年8月(63)
  5. 2019年7月(59)
  6. 2019年6月(59)
  7. 2019年5月(31)
  8. 2019年4月(37)
  9. 2019年3月(43)
  10. 2019年2月(26)
  11. 2019年1月(45)
  12. 2018年12月(41)
  13. 2018年11月(40)
  14. 帝皇彩票官网2018年10月(29)
  15. 2018年9月(40)
  16. 2018年8月(87)
  17. 2018年7月(107)
  18. 2018年6月(86)
  19. 2018年5月(110)
  20. 2018年4月(40)
  21. 2018年3月(35)
  22. 2017年8月(35)
  23. 2017年7月(45)
  24. 2017年6月(7)
  25. 2017年5月(27)
  26. 2017年4月(51)
  27. 2017年3月(70)
  28. 帝皇彩票官网2017年2月(65)
  29. 2017年1月(69)
  30. 2016年12月(55)
  31. 2016年11月(111)
  32. 2016年10月(92)
  33. 2016年9月(53)
  34. 2016年8月(9)
  35. 2016年7月(4)
  36. 2016年6月(9)
  37. 2016年3月(19)
  38. 2016年2月(26)
  39. 2016年1月(30)
  40. 2015年12月(33)
  41. 2015年11月(35)
  42. 2015年10月(46)
  43. 2015年9月(43)
  44. 2015年8月(40)
  45. 2015年7月(33)
  46. 2015年6月(46)
  47. 2015年5月(58)
  48. 2015年4月(70)
  49. 2015年3月(55)
  50. 2015年2月(17)
  51. 帝皇彩票官网2015年1月(33)
  52. 2014年12月(21)
  53. 2014年11月(84)
  54. 帝皇彩票官网2014年10月(94)
  55. 2014年9月(6)
  56. 2014年8月(1)
  57. 2014年7月(13)
  58. 帝皇彩票官网2014年6月(66)
  59. 2014年5月(99)
  60. 2014年4月(88)
  61. 2014年3月(102)
  62. 2014年2月(68)
  63. 2014年1月(83)
  64. 2013年12月(106)
  65. 2013年11月(112)
  66. 2013年10月(61)
  67. 2013年9月(20)
  68. 2013年7月(13)
  69. 2013年6月(27)
  70. 2013年5月(48)
  71. 2013年4月(39)
  72. 2013年3月(8)
  73. 2013年2月(20)
  74. 2013年1月(31)
  75. 2012年12月(33)
  76. 2012年11月(31)
  77. 2012年10月(23)
  78. 2012年9月(8)
  79. 2012年7月(14)
  80. 2012年6月(15)
  81. 2012年5月(31)
  82. 2012年4月(24)
  83. 2012年2月(4)
  84. 2012年1月(8)
  85. 2011年12月(35)
  86. 2011年11月(32)
  87. 2011年10月(13)
  88. 2011年8月(1)
  89. 2011年6月(1)
订阅Rss
帝皇彩票登陆 67娱乐系统 帝皇彩票平台 博发彩票登陆 pk10机器人 大象彩票APP 博发彩票APP下载 吉利彩票计划 迪士尼彩乐园开户 吉林快3