Blogger Information
Blog 62
fans 7
comment 2
visits 58133
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery DOM常用操作方法介绍
我是郭富城
Original
740 people have browsed it

jQuery DOM常用操作方法介绍

JQuery中的DOM操作主要对包括:建(新建)、增(添加)、删(删除)、改(修改)、查(查找)(像数据库操作)。下面的DOM操作将围绕上面的DOM树进行学习JQueryDOM操作。

1. append()和appendTo()

  • 父元素.append(子元素)
  • 子元素.appendTo(父元素)
  1. var cl = console.log.bind(console);
  2. // 1. 元素的插入与替换, 父元素.append(子元素)
  3. $("body").append("<ol>");
  4. // 子元素.appendTo(父元素)
  5. $("<li>").text("笔记本电脑").appendTo("ol");
  6. $("<li>").addClass("active").text("智能手机").appendTo("ol");
  7. $("<li>", {
  8. id: "hello",
  9. style: "background-color:yellow",
  10. })
  11. .html("<a href=''>格子衫</a>")
  12. .appendTo("ol");
  13. // append(callback)
  14. $("ol").append(function () {
  15. var res = "";
  16. for (var i = 0; i < 5; i++) {
  17. res += "<li><a href=''>最新商品" + (i + 1) + "</a></li>";
  18. }
  19. return res;
  20. });

2. prepend()和prependTo()

prepend()方法将每匹配的元素内部前置要添加的元素,prependTo()方法将元素添加到每一个匹配的元素内部前置

  1. $("<li>新元素2</li>").insertAfter("ol > li:nth-of-type(4)");
  2. // prepend(), prependTo(), 将新元素插入到头部
  3. $("<li>最新留言</li>").prependTo("ol");

3. after()和before()

after()方法向匹配的元素后面添加元素,新添加的元素做为目标元素后的紧邻的兄弟元素。 before()方法在每一个匹配的元素之前插入,做为匹配元素的前一个兄弟节点。

  1. //方法将查找节点p,然后把新建的元素添加到span节点后面做为p的兄弟节点。
  2. $("p").after("<span>新加段新加段新加段新加段新加段</span>");
  3. // 从第3个元素前面添加<li>, before(), 在某个元素之前添加
  4. $("ol > li:nth-of-type(3)").before("<li>新元素</li>");

4. insertAfter()和insertBefore()

insertAfter()方法将新建的元素插入到查找到的目标元素后,做为目标元素的兄弟节点。insertBefore()方法将新建元素添加到目标元素前,做为目标元素的前一个兄弟节点。

  1. // insertAfter()
  2. $("<li>新元素2</li>").insertAfter("ol > li:nth-of-type(4)");
  3. $("<a href='#'>锚</a>").insertBefore("ul");
  4. // insertBefore()新建a元素,将新建的a元素添加到元素ul前,做为ul的前一个兄弟节点。

5. replaceWith()和replaceAll()

替换节点$(element).repalcewith()$(element).repalceAll(),替换节点方法能够替换某个节点,有两种形式形式实现:replaceWith()replaceAll().
使用replaceWith方法使用后面的元素替换前面的元素,replaceAll方法使用前面的元素替换后面的元素。

  1. // 元素的换: replaceWith()
  2. $("ol > li:last-of-type").replaceWith("<h3>Hello PHP.CN</h3>");
  3. $("<p>Hello World...</p>").replaceAll("ol > li:first-of-type");

6. 总结

jQuery就类似laravel框架和TP框架,jQuery作为JavaScript常用的函数库,封装了许多方法,用起来确实很巧妙,精简了很多操作步骤。这也难怪市面上的jQuery项目占了70%,毕竟上手了就很难回头去学习原生的了。

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:jquery只有一个普通的函数库罢了, 不要将它的功能过度夸大, 实际上开发中50%以上的功能还是要靠原生代码实现
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post