夏日博客

A-A+

jQuery对P标签的操作的几个小实例讲解

2016年01月11日 前端设计 暂无评论 阅读 8 views 次

本文我们分享几个使用jQuery操作p标签的几个实例，实例包括：根据id获取元素本身（Object对象）的方法，jquery为每个p标签增加onclick方法，如何为jquery动态生成的p标签添加动态文本内容?

注:以下代码均通过W3School在线测试。

根据id获取元素本身（Object对象）的方法：

$("#id");

例如:

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <script src="/jquery/jquery-1.11.1.min.js">    
  5. </script>    
  6. <script>    
  7. $(document).ready(function(){    
  8.   $("p").click(function(){    
  9.     alert($("#p1"));    
  10.   });    
  11. });    
  12. </script>    
  13. </head>    
  14. <body>    
  15. <p id="p1" name="name1">如果您点击我，我会消失。</p>    
  16. <p id="p2" name="name2">点击我，我会消失。</p>    
  17. <p id="p3" name="name3">也要点击我哦。</p>    
  18. </body>    
  19. </html>  

jquery为每个p标签增加onclick方法

  1. <script src="../../scripts/jquery-1.3.1.js" type="text/<a href="/js_a/js.html" target="_blank">javascript</a>"></script>    
  2. <script type="text/javascript" >    
  3.     $(function(){    
  4.         $("p").click(function(){    
  5.             alert("我被点击了");    
  6.         });    
  7.     });    
  8. </script>    
  9. </head>    
  10. <body>    
  11. <p>测试1</p>    
  12. <p>测试2</p>  

如何为jquery动态生成的p标签添加动态文本内容?

回答：

  1. $("<p/>").appendTo("body").html("这是P标签的内容");  

上面的代码的意思是在body尾部追加一个P标签，该P标签的HTML内容是 这是P标签的内容

标签：

给我留言