经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
JQuery --- 第五期 (JQuery节点操作)
来源:cnblogs  作者:CN丶Moti  时间:2019/5/5 8:57:41  对本文有异议

学习笔记

1.JQuery添加节点相关方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JQuery添加节点相关方法</title>
  6. <script src="../jquery-1.12.4.js"></script>
  7. <script>
  8. $(function () {
  9. //**************************************************************内部插入
  10. var $li = $("<li>我是新增的li</li>");
  11. /**
  12. * 1.append:将A元素添加到指定元素B内部的最后
  13. * B作为方法调用者
  14. * A作为方法参数
  15. */
  16. $("button").click(function () {
  17. $("ul").append($li);
  18. });
  19. /**
  20. * 2.appendTo:将A元素添加到指定元素B内部的最后
  21. * A作为方法调用者
  22. * B作为方法参数
  23. */
  24. $("button").click(function () {
  25. $li.appendTo("ul");
  26. });
  27. /**
  28. * 3.prepend:将A元素添加到指定元素B内部的最前面
  29. * B作为方法调用者
  30. * A作为方法参数
  31. */
  32. $("button").click(function () {
  33. $("ul").prepend($li);
  34. });
  35. /**
  36. * 4.prependTo:将A元素添加到指定元素B内部的最前面
  37. * A作为方法调用者
  38. * B作为方法参数
  39. */
  40. $("button").click(function () {
  41. $li.prependTo("ul");
  42. });
  43. //**************************************************************外部插入
  44. /**
  45. * 1.after:将A元素添加到指定元素B外部的后面
  46. * B作为方法调用者
  47. * A作为方法参数
  48. */
  49. $("button").click(function () {
  50. $("ul").after($li);
  51. });
  52. /**
  53. * 2.insertAfter:将A元素添加到指定元素B外部的后面
  54. * A作为方法调用者
  55. * B作为方法参数
  56. */
  57. $("button").click(function () {
  58. $li.insertAfter("ul");
  59. });
  60. /**
  61. * 3.before:将A元素添加到指定元素B外部的前面
  62. * B作为方法调用者
  63. * A作为方法参数
  64. */
  65. $("button").click(function () {
  66. $("ul").before($li);
  67. });
  68. /**
  69. * 4.insertBefore:将A元素添加到指定元素B外部的前面
  70. * A作为方法调用者
  71. * B作为方法参数
  72. */
  73. $("button").click(function () {
  74. $li.insertBefore("ul");
  75. });
  76. });
  77. </script>
  78. </head>
  79. <body>
  80. <button>添加节点</button>
  81. <ul>
  82. <li>我是第1个li</li>
  83. <li>我是第2个li</li>
  84. <li>我是第3个li</li>
  85. </ul>
  86. </body>
  87. </html>

 2.JQuery删除节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JQuery删除节点</title>
  6. <script src="../jquery-1.12.4.js"></script>
  7. <script>
  8. $(function () {
  9. //删除节点
  10. /**
  11. * 1.remove方法:删除整个元素
  12. */
  13. $("button").click(function () {
  14. $("li").remove(".item");
  15. $(".one").remove();
  16. });
  17. /**
  18. * 2.empty方法:清空元素的内容和子元素
  19. */
  20. $("button").click(function () {
  21. $(".two").empty();
  22. });
  23. /**
  24. * detach方法:和remove方法一模一样
  25. */
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <button>删除节点</button>
  31. <button>清空节点</button>
  32. <ul>
  33. <li class="item">我是第1个li</li>
  34. <li>我是第2个li</li>
  35. <li class="item">我是第3个li</li>
  36. <li>我是第4个li</li>
  37. <li class="item">我是第5个li</li>
  38. </ul>
  39. <div class="one">我是div1</div>
  40. <div class="two">我是div2
  41. <span>我是span</span>
  42. </div>
  43. </body>
  44. </html>

 

3.JQuery替换节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jQuery替换元素</title>
  6. <script src="../jquery-1.12.4.js"></script>
  7. <script>
  8. $(function () {
  9. //替换元素
  10. var $h6 = $("<h6>我是标题6</h6>")
  11. /**
  12. * 1.replaceWith方法:替换所有匹配的元素A为指定元素B
  13. * A为方法调用者,B为方法参数
  14. */
  15. $("button").click(function () {
  16. $("h1").replaceWith($h6);
  17. });
  18. /**
  19. * 2.replaceAll方法:替换所有匹配的元素A为指定元素B
  20. * A为方法参数,B为方法调用者
  21. */
  22. $("button").click(function () {
  23. $h6.replaceAll("h1");
  24. });
  25. });
  26. </script>
  27. </head>
  28. <body>
  29. <button>替换元素</button>
  30. <h1>我是标题1</h1>
  31. <h1>我是标题1</h1>
  32. <h1>我是标题1</h1>
  33. <h1>我是标题1</h1>
  34. <h1>我是标题1</h1>
  35. </body>
  36. </html>

4.JQuery节点的复制

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JQuery节点的复制</title>
  6. <script src="../jquery-1.12.4.js"></script>
  7. <script>
  8. $(function () {
  9. /**
  10. * clone(false):浅复制,只复制节点,不能复制事件
  11. * clone(true):深复制,复制节点同时复制事件
  12. */
  13. $("button").eq(0).click(function () {
  14. var $li = $("li:first").clone(false);
  15. $("ul").append($li);
  16. });
  17. $("button").eq(1).click(function () {
  18. var $li = $("li:first").clone(true);
  19. $("ul").append($li);
  20. });
  21. $("li").click(function () {
  22. alert($(this).html());
  23. });
  24. });
  25. </script>
  26. </head>
  27. <body>
  28. <button>浅复制</button>
  29. <button>深复制</button>
  30. <ul>
  31. <li>我是第1个li</li>
  32. <li>我是第2个li</li>
  33. <li>我是第3个li</li>
  34. <li>我是第4个li</li>
  35. <li>我是第5个li</li>
  36. </ul>
  37. </body>
  38. </html>

 

原文链接:http://www.cnblogs.com/cnmoti/p/10796418.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号