PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > JQuery实战:DOM操作和Ajax请求(跨域请求)

JQuery实战:DOM操作和Ajax请求(跨域请求)

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰ 原创
2021年01月16日 13:28:35 850浏览

DOM操作(Jquery):

1、DOM操作插入:
(1)函数方法

方法 作用说明
.append .appendTo 当前元素有子元素则在子元素末尾插入,无子元素则在当前元素后面插入 ;两个方法作用相同,只是使用方法不同
.prepend() .prepednTo() 在元素内部头部插入,两个方法作用相同,用办法不同
.after() .insertAfter() 在元素之后插入,两个方法作用相同,只是使用方法不同
.before() .insertBefore() 在元素之前插入,两个方法作用相同,只是使用方法不同

2.元素的删除操作

方法 作用说明
.remove() 移除元素本身
.empty() 移除元素本身的内容(包含里面的html内容)

3.替换元素

方法 作用说明
new.replaceAll(old) 替换元素内所有匹配的
old.replaceWith(new) 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

4.实操演练
(1)代码部分

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Jquery操作和请求</title>
  6. <script src="jquery.js"></script>
  7. <style>
  8. ul:first-of-type{
  9. background-color: lightblue;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <ul>
  15. <li>item1</li>
  16. <li class="shuang">item2</li>
  17. <li>item3</li>
  18. <li class="shuang">item4</li>
  19. <li class="dan">item5</li>
  20. </ul>
  21. <ul>
  22. <li>item1</li>
  23. <li>item2</li>
  24. <li>item3</li>
  25. </ul>
  26. </body>
  27. <script>
  28. let cl=console.log;
  29. cl($);
  30. // appendTo和append作用相同:在元素内部末尾(或者元素后面)插入,用法不同而已
  31. $("ul:first-child").append("<li>item6</li>");
  32. $("<li>item7</li>").appendTo($("ul:first-child"));
  33. $("ul:first-child > li:nth-child(3)").append("<li>item</li>");
  34. //在元素内部头部插入,两个方法作用相同知识用办法不同,
  35. $("ul:first-child").prepend("<li>item0</li>");
  36. $("<li>item-1</li>").prependTo($("ul:first-child"));
  37. // after()和before()
  38. $("ul:first-child").after("<h2>结束</h2>");
  39. $("ul:first-child").before("<h1>开始</h1>");
  40. // cl($("ul:last-of-type"));
  41. $("<h2>second<h2>").insertAfter($("ul:last-of-type"));
  42. $("<h2>one<h2>").insertBefore($("ul:last-of-type"));
  43. cl($("ul:last-of-type").text());
  44. cl($("ul:last-of-type > li:last-of-type").text());
  45. // cl($("ul:nth-child(1)"));
  46. // .remove();
  47. $("li:last-of-type").remove();
  48. $("ul:last-of-type > li:nth-of-type(1)").empty();
  49. $("ul:last-of-type").empty();
  50. $("ul:last-of-type").remove();
  51. cl($(".shuang"));
  52. // 两个函数作用相同知识用法不同
  53. $("<li>$$$$$$$$</li>").replaceAll($(".shuang"))
  54. $(".dan").replaceWith($("<li>22222</li>"));
  55. </script>
  56. </html>

Jquery请求和跨域请求

1.GET和POST请求:

  • $.get(url,callback());GET请求
  • $.post(url,data,callback());POST请求

2.ajax请求

  1. $.ajax({
  2. type:"GET",
  3. url:"url",
  4. data:{
  5. id:2,
  6. },
  7. dataType:"json|html",
  8. //告诉跨域访问的服务器需要返回的函数名称
  9. //dataType:"jsonp",
  10. //jsonpCallback: "show",
  11. success:function(){……}
  12. })
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议